uikit 3.16.4-dev.fd2458e3b → 3.16.5-dev.dda1f1b31

package/src/js/api/state.js

@@ -1,242 +1,44 @@
-import {
-    assign,
-    camelize,
-    data as getData,
-    hasOwn,
-    hyphenate,
-    isArray,
-    isFunction,
-    isNumeric,
-    isPlainObject,
-    isString,
-    isUndefined,
-    mergeOptions,
-    on,
-    parseOptions,
-    startsWith,
-    toBoolean,
-    toNumber,
-} from 'uikit-util';
+import { callHook } from './hooks';
+import { initComputed } from './computed';
+import { coerce, mergeOptions } from './options';
+import { assign, isArray, isPlainObject, isUndefined } from '../util';
 
-export default function (UIkit) {
-    let uid = 0;
+let uid = 0;
 
-    UIkit.prototype._init = function (options) {
-        options = options || {};
-        options.data = normalizeData(options, this.constructor.options);
+export function init(instance, options = {}) {
+    options.data = normalizeData(options, instance.constructor.options);
 
-        this.$options = mergeOptions(this.constructor.options, options, this);
-        this.$el = null;
-        this.$props = {};
+    instance.$options = mergeOptions(instance.constructor.options, options, instance);
 
-        this._uid = uid++;
-        this._initData();
-        this._initMethods();
-        this._initComputeds();
-        this._callHook('created');
+    instance.$props = {};
 
-        if (options.el) {
-            this.$mount(options.el);
-        }
-    };
-
-    UIkit.prototype._initData = function () {
-        const { data = {} } = this.$options;
-
-        for (const key in data) {
-            this.$props[key] = this[key] = data[key];
-        }
-    };
-
-    UIkit.prototype._initMethods = function () {
-        const { methods } = this.$options;
-
-        if (methods) {
-            for (const key in methods) {
-                this[key] = methods[key].bind(this);
-            }
-        }
-    };
-
-    UIkit.prototype._initComputeds = function () {
-        const { computed } = this.$options;
-
-        this._computed = {};
-
-        if (computed) {
-            for (const key in computed) {
-                registerComputed(this, key, computed[key]);
-            }
-        }
-    };
-
-    UIkit.prototype._initProps = function (props) {
-        let key;
-
-        props = props || getProps(this.$options);
-
-        for (key in props) {
-            if (!isUndefined(props[key])) {
-                this.$props[key] = props[key];
-            }
-        }
-
-        const exclude = [this.$options.computed, this.$options.methods];
-        for (key in this.$props) {
-            if (key in props && notIn(exclude, key)) {
-                this[key] = this.$props[key];
-            }
-        }
-    };
-
-    UIkit.prototype._initEvents = function () {
-        this._events = [];
-        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);
-                }
-            }
-        }
-    };
-
-    UIkit.prototype._unbindEvents = function () {
-        this._events.forEach((unbind) => unbind());
-        delete this._events;
-    };
-
-    UIkit.prototype._initObservers = function () {
-        this._observers = [initPropsObserver(this), initChildListObserver(this)];
-    };
-
-    UIkit.prototype.registerObserver = function (...observer) {
-        this._observers.push(...observer);
-    };
-
-    UIkit.prototype._disconnectObservers = function () {
-        this._observers.forEach((observer) => observer?.disconnect());
-    };
-}
-
-function getProps(opts) {
-    const data = {};
-    const { args = [], props = {}, el, id } = opts;
-
-    if (!props) {
-        return data;
-    }
-
-    for (const key in props) {
-        const prop = hyphenate(key);
-        let value = getData(el, prop);
-
-        if (isUndefined(value)) {
-            continue;
-        }
-
-        value = props[key] === Boolean && value === '' ? true : coerce(props[key], value);
-
-        if (prop === 'target' && startsWith(value, '_')) {
-            continue;
-        }
-
-        data[key] = value;
-    }
-
-    const options = parseOptions(getData(el, id), args);
+    instance._uid = uid++;
+    initData(instance);
+    initMethods(instance);
+    initComputed(instance);
+    callHook(instance, 'created');
 
-    for (const key in options) {
-        const prop = camelize(key);
-        if (!isUndefined(props[prop])) {
-            data[prop] = coerce(props[prop], options[key]);
-        }
+    if (options.el) {
+        instance.$mount(options.el);
     }
-
-    return data;
 }
 
-function registerComputed(component, key, cb) {
-    Object.defineProperty(component, key, {
-        enumerable: true,
-
-        get() {
-            const { _computed, $props, $el } = component;
-
-            if (!hasOwn(_computed, key)) {
-                _computed[key] = (cb.get || cb).call(component, $props, $el);
-            }
+function initData(instance) {
+    const { data = {} } = instance.$options;
 
-            return _computed[key];
-        },
-
-        set(value) {
-            const { _computed } = component;
-
-            _computed[key] = cb.set ? cb.set.call(component, value) : value;
-
-            if (isUndefined(_computed[key])) {
-                delete _computed[key];
-            }
-        },
-    });
-}
-
-export 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;
-
-    if (isArray(el)) {
-        el.forEach((el) => registerEvent(component, { ...event, el }, key));
-        return;
-    }
-
-    if (!el || (filter && !filter.call(component))) {
-        return;
+    for (const key in data) {
+        instance.$props[key] = instance[key] = data[key];
     }
-
-    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 initMethods(instance) {
+    const { methods } = instance.$options;
 
-function coerce(type, value) {
-    if (type === Boolean) {
-        return toBoolean(value);
-    } else if (type === Number) {
-        return toNumber(value);
-    } else if (type === 'list') {
-        return toList(value);
-    } else if (type === Object && isString(value)) {
-        return parseOptions(value);
+    if (methods) {
+        for (const key in methods) {
+            instance[key] = methods[key].bind(instance);
+        }
     }
-
-    return type ? type(value) : value;
-}
-
-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 = {} }) {
@@ -261,59 +63,3 @@ function normalizeData({ data = {} }, { args = [], props = {} }) {
 
     return data;
 }
-
-function initChildListObserver(component) {
-    let { el, computed } = component.$options;
-
-    if (!computed) {
-        return;
-    }
-
-    for (const key in computed) {
-        if (computed[key].document) {
-            el = el.ownerDocument;
-            break;
-        }
-    }
-
-    const observer = new MutationObserver(() => component._callWatches());
-    observer.observe(el, {
-        childList: true,
-        subtree: true,
-    });
-
-    return observer;
-}
-
-function initPropsObserver(component) {
-    const { $options, $props } = component;
-    const { id, attrs, props, el } = $options;
-
-    if (!props || attrs === false) {
-        return;
-    }
-
-    const attributes = isArray(attrs) ? attrs : Object.keys(props);
-    const filter = attributes.map((key) => hyphenate(key)).concat(id);
-
-    const observer = new MutationObserver((records) => {
-        const data = getProps($options);
-        if (
-            records.some(({ attributeName }) => {
-                const prop = attributeName.replace('data-', '');
-                return (prop === id ? 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}`)),
-    });
-
-    return observer;
-}

package/src/js/api/update.js

@@ -0,0 +1,77 @@
+import { registerObserver } from './observer';
+import { callWatches } from './watch';
+import { assign, fastdom, isFunction, isPlainObject } from '../util';
+
+export function callUpdate(instance, e = 'update') {
+    if (!instance._connected) {
+        return;
+    }
+
+    if (e === 'update' || e === 'resize') {
+        callWatches(instance);
+    }
+
+    if (!instance.$options.update) {
+        return;
+    }
+
+    if (!instance._updates) {
+        instance._updates = new Set();
+        fastdom.read(() => {
+            if (instance._connected) {
+                runUpdates(instance, instance._updates);
+            }
+            delete instance._updates;
+        });
+    }
+
+    instance._updates.add(e.type || e);
+}
+
+function runUpdates(instance, types) {
+    for (const { read, write, events = [] } of instance.$options.update) {
+        if (!types.has('update') && !events.some((type) => types.has(type))) {
+            continue;
+        }
+
+        let result;
+        if (read) {
+            result = read.call(instance, instance._data, types);
+
+            if (result && isPlainObject(result)) {
+                assign(instance._data, result);
+            }
+        }
+
+        if (write && result !== false) {
+            fastdom.write(() => {
+                if (instance._connected) {
+                    write.call(instance, instance._data, types);
+                }
+            });
+        }
+    }
+}
+
+export function initUpdateObserver(instance) {
+    let { el, computed, observe } = instance.$options;
+
+    if (!computed && !observe?.some((options) => isFunction(options.target))) {
+        return;
+    }
+
+    for (const key in computed || {}) {
+        if (computed[key].document) {
+            el = el.ownerDocument;
+            break;
+        }
+    }
+
+    const observer = new MutationObserver(() => callWatches(instance));
+    observer.observe(el, {
+        childList: true,
+        subtree: true,
+    });
+
+    registerObserver(instance, observer);
+}

package/src/js/api/watch.js

@@ -0,0 +1,34 @@
+import { fastdom, hasOwn, isEqual } from '../util';
+import { callObserverUpdates } from './observer';
+
+export function callWatches(instance) {
+    if (instance._watch) {
+        return;
+    }
+
+    const initial = !hasOwn(instance, '_watch');
+
+    instance._watch = fastdom.read(() => {
+        if (instance._connected) {
+            runWatches(instance, initial);
+        }
+        instance._watch = null;
+    });
+}
+
+function runWatches(instance, initial) {
+    const values = { ...instance._computed };
+    instance._computed = {};
+
+    for (const [key, { watch, immediate }] of Object.entries(instance.$options.computed || {})) {
+        if (
+            watch &&
+            ((initial && immediate) ||
+                (hasOwn(values, key) && !isEqual(values[key], instance[key])))
+        ) {
+            watch.call(instance, instance[key], initial ? undefined : values[key]);
+        }
+    }
+
+    callObserverUpdates(instance);
+}

package/src/js/components/countdown.js

@@ -29,23 +29,21 @@ export default {
         this.stop();
     },
 
-    events: [
-        {
-            name: 'visibilitychange',
-
-            el() {
-                return document;
-            },
-
-            handler() {
-                if (document.hidden) {
-                    this.stop();
-                } else {
-                    this.start();
-                }
-            },
+    events: {
+        name: 'visibilitychange',
+
+        el() {
+            return document;
         },
-    ],
+
+        handler() {
+            if (document.hidden) {
+                this.stop();
+            } else {
+                this.start();
+            }
+        },
+    },
 
     methods: {
         start() {

package/src/js/components/filter.js

@@ -1,4 +1,5 @@
 import Animate from '../mixin/animate';
+import { parseOptions } from '../api/options';
 import {
     $,
     $$,
@@ -17,11 +18,10 @@ import {
     isTag,
     isUndefined,
     matches,
-    parseOptions,
     toggleClass,
     trigger,
 } from 'uikit-util';
-import { keyMap } from '../mixin/utils';
+import { keyMap } from '../util/keys';
 
 export default {
     mixins: [Animate],
@@ -70,8 +70,8 @@ export default {
                 return $$(`${target} > *`, $el);
             },
 
-            watch(list, old) {
-                if (old && !isEqualList(list, old)) {
+            watch(list, prev) {
+                if (prev) {
                     this.updateState();
                 }
             },
@@ -80,26 +80,24 @@ export default {
         },
     },
 
-    events: [
-        {
-            name: 'click keydown',
+    events: {
+        name: 'click keydown',
 
-            delegate() {
-                return `[${this.attrItem}],[data-${this.attrItem}]`;
-            },
+        delegate() {
+            return `[${this.attrItem}],[data-${this.attrItem}]`;
+        },
 
-            handler(e) {
-                if (e.type === 'keydown' && e.keyCode !== keyMap.SPACE) {
-                    return;
-                }
+        handler(e) {
+            if (e.type === 'keydown' && e.keyCode !== keyMap.SPACE) {
+                return;
+            }
 
-                if (closest(e.target, 'a,button')) {
-                    e.preventDefault();
-                    this.apply(e.current);
-                }
-            },
+            if (closest(e.target, 'a,button')) {
+                e.preventDefault();
+                this.apply(e.current);
+            }
         },
-    ],
+    },
 
     methods: {
         apply(el) {
@@ -211,10 +209,6 @@ function matchFilter(
         : stateSort === sort && stateOrder === order;
 }
 
-function isEqualList(listA, listB) {
-    return listA.length === listB.length && listA.every((el) => listB.includes(el));
-}
-
 function getSelector({ filter }) {
     let selector = '';
     each(filter, (value) => (selector += value || ''));

package/src/js/components/internal/slider-preload.js

@@ -1,9 +1,8 @@
-import Lazyload from '../../mixin/lazyload';
+import { lazyload } from '../../api/observables';
 
 export default {
-    mixins: [Lazyload],
-
-    connected() {
-        this.lazyload(this.slides, this.getAdjacentSlides);
-    },
+    observe: lazyload({
+        target: ({ slides }) => slides,
+        targets: (instance) => instance.getAdjacentSlides(),
+    }),
 };

package/src/js/components/lightbox-panel.js

@@ -1,7 +1,7 @@
-import { keyMap } from '../mixin/utils';
 import Animations from './internal/lightbox-animations';
 import Modal from '../mixin/modal';
 import Slideshow from '../mixin/slideshow';
+import { keyMap } from '../util/keys';
 import {
     $,
     addClass,

package/src/js/components/lightbox.js

@@ -1,16 +1,6 @@
 import LightboxPanel from './lightbox-panel';
-import {
-    $$,
-    assign,
-    attr,
-    data,
-    findIndex,
-    isElement,
-    isTag,
-    on,
-    parseOptions,
-    uniqueBy,
-} from 'uikit-util';
+import { parseOptions } from '../api/options';
+import { $$, assign, attr, data, findIndex, isElement, isTag, on, uniqueBy } from 'uikit-util';
 
 export default {
     install,
@@ -42,20 +32,18 @@ export default {
         this.hide();
     },
 
-    events: [
-        {
-            name: 'click',
+    events: {
+        name: 'click',
 
-            delegate() {
-                return `${this.toggle}:not(.uk-disabled)`;
-            },
+        delegate() {
+            return `${this.toggle}:not(.uk-disabled)`;
+        },
 
-            handler(e) {
-                e.preventDefault();
-                this.show(e.current);
-            },
+        handler(e) {
+            e.preventDefault();
+            this.show(e.current);
         },
-    ],
+    },
 
     methods: {
         show(index) {

package/src/js/components/parallax.js

@@ -1,10 +1,9 @@
-import Resize from '../mixin/resize';
-import Scroll from '../mixin/scroll';
 import Parallax from '../mixin/parallax';
+import { resize, scroll } from '../api/observables';
 import { css, isVisible, parent, query, scrolledOver, toPx } from 'uikit-util';
 
 export default {
-    mixins: [Parallax, Resize, Scroll],
+    mixins: [Parallax],
 
     props: {
         target: String,
@@ -41,9 +40,12 @@ export default {
         },
     },
 
-    resizeTargets() {
-        return [this.$el, this.target];
-    },
+    observe: [
+        resize({
+            target: ({ $el, target }) => [$el, target],
+        }),
+        scroll(),
+    ],
 
     update: {
         read({ percent }, types) {

package/src/js/components/slider.js

@@ -1,4 +1,5 @@
 import Class from '../mixin/class';
+import { resize } from '../api/observables';
 import Slider, { speedUp } from '../mixin/slider';
 import SliderReactive from '../mixin/slider-reactive';
 import SliderPreload from './internal/slider-preload';
@@ -15,6 +16,7 @@ import {
     findIndex,
     getIndex,
     includes,
+    isVisible,
     last,
     selFocusable,
     sumBy,
@@ -113,12 +115,20 @@ export default {
                 list: this.list,
             };
         },
+
+        slides() {
+            return children(this.list).filter(isVisible);
+        },
     },
 
     connected() {
         toggleClass(this.$el, this.clsContainer, !$(`.${this.clsContainer}`, this.$el));
     },
 
+    observe: resize({
+        target: ({ slides }) => slides,
+    }),
+
     update: {
         write() {
             for (const el of this.navItems) {