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

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.16.4-dev.fd2458e3b",
+  "version": "3.16.5-dev.dda1f1b31",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [
@@ -30,7 +30,7 @@
     "eslint": "^8.35.0",
     "eslint-config-prettier": "^8.6.0",
     "fs-extra": "^11.1.0",
-    "glob": "^8.1.0",
+    "glob": "^9.2.1",
     "inquirer": "^9.1.4",
     "less": "^4.1.3",
     "minimist": "^1.2.8",

package/src/images/icons/mastodon.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <path d="m18.5,6.87c0-3.95-2.59-5.11-2.59-5.11-1.31-.6-3.55-.85-5.88-.87h-.06c-2.33.02-4.57.27-5.88.87,0,0-2.59,1.16-2.59,5.11,0,.91-.02,1.99.01,3.14.09,3.87.71,7.68,4.28,8.62,1.65.44,3.06.53,4.2.47,2.07-.11,3.23-.74,3.23-.74l-.07-1.5s-1.48.47-3.14.41c-1.64-.06-3.38-.18-3.64-2.2-.02-.18-.04-.37-.04-.57,0,0,1.61.39,3.66.49,1.25.06,2.42-.07,3.61-.22,2.28-.27,4.27-1.68,4.52-2.97.39-2.02.36-4.94.36-4.94Zm-3.05,5.09h-1.9v-4.65c0-.98-.41-1.48-1.24-1.48-.91,0-1.37.59-1.37,1.76v2.54h-1.89v-2.54c0-1.17-.46-1.76-1.37-1.76-.82,0-1.24.5-1.24,1.48v4.65h-1.9v-4.79c0-.98.25-1.76.75-2.33.52-.58,1.19-.87,2.03-.87.97,0,1.71.37,2.19,1.12l.47.79.47-.79c.49-.75,1.22-1.12,2.19-1.12.84,0,1.51.29,2.03.87.5.58.75,1.35.75,2.33v4.79Z"/>
+</svg>

package/src/js/api/app.js

@@ -0,0 +1,12 @@
+import { init } from './state';
+import * as util from '../util';
+
+const App = function (options) {
+    init(this, options);
+};
+
+App.util = util;
+App.options = {};
+App.version = VERSION;
+
+export default App;

package/src/js/api/boot.js

@@ -1,59 +1,80 @@
-import { getComponentName } from './component';
-import { apply, hasAttr, inBrowser, trigger } from 'uikit-util';
+import { callConnected, callDisconnected } from './hooks';
+import { components, createComponent, getComponent, getComponents } from './component';
+import { apply, hasAttr, inBrowser, isPlainObject, startsWith, trigger } from '../util';
 
-export default function (UIkit) {
-    const { connect, disconnect } = UIkit;
-
-    if (!inBrowser || !window.MutationObserver) {
-        return;
+export default function (App) {
+    if (inBrowser && window.MutationObserver) {
+        requestAnimationFrame(() => init(App));
     }
+}
 
-    requestAnimationFrame(function () {
-        trigger(document, 'uikit:init', UIkit);
+function init(App) {
+    trigger(document, 'uikit:init', App);
 
-        if (document.body) {
-            apply(document.body, connect);
-        }
+    if (document.body) {
+        apply(document.body, connect);
+    }
 
-        new MutationObserver((records) => records.forEach(applyChildListMutation)).observe(
-            document,
-            {
-                childList: true,
-                subtree: true,
-            }
-        );
-
-        new MutationObserver((records) => records.forEach(applyAttributeMutation)).observe(
-            document,
-            {
-                attributes: true,
-                subtree: true,
-            }
-        );
-
-        UIkit._initialized = true;
+    new MutationObserver((records) => records.forEach(applyChildListMutation)).observe(document, {
+        childList: true,
+        subtree: true,
     });
 
-    function applyChildListMutation({ addedNodes, removedNodes }) {
-        for (const node of addedNodes) {
-            apply(node, connect);
-        }
+    new MutationObserver((records) => records.forEach(applyAttributeMutation)).observe(document, {
+        attributes: true,
+        subtree: true,
+    });
+
+    App._initialized = true;
+}
+
+function applyChildListMutation({ addedNodes, removedNodes }) {
+    for (const node of addedNodes) {
+        apply(node, connect);
+    }
+
+    for (const node of removedNodes) {
+        apply(node, disconnect);
+    }
+}
+
+function applyAttributeMutation({ target, attributeName }) {
+    const name = getComponentName(attributeName);
 
-        for (const node of removedNodes) {
-            apply(node, disconnect);
+    if (name) {
+        if (hasAttr(target, attributeName)) {
+            createComponent(name, target);
+            return;
         }
+
+        getComponent(target, name)?.$destroy();
+    }
+}
+
+function connect(node) {
+    const components = getComponents(node);
+    for (const name in getComponents(node)) {
+        callConnected(components[name]);
     }
 
-    function applyAttributeMutation({ target, attributeName }) {
+    for (const attributeName of node.getAttributeNames()) {
         const name = getComponentName(attributeName);
+        name && createComponent(name, node);
+    }
+}
 
-        if (name) {
-            if (hasAttr(target, attributeName)) {
-                UIkit[name](target);
-                return;
-            }
+function disconnect(node) {
+    const components = getComponents(node);
+    for (const name in getComponents(node)) {
+        callDisconnected(components[name]);
+    }
+}
 
-            UIkit.getComponent(target, name)?.$destroy();
-        }
+function getComponentName(attribute) {
+    if (startsWith(attribute, 'data-')) {
+        attribute = attribute.slice(5);
     }
+
+    const cmp = components[attribute];
+    return cmp && (isPlainObject(cmp) ? cmp : cmp.options).name;
 }

package/src/js/api/component.js

@@ -1,85 +1,84 @@
-import { $$, camelize, hyphenate, isPlainObject } from 'uikit-util';
+import App from './app';
+import { $$, camelize, hyphenate, isEmpty, isPlainObject } from '../util';
 
-const components = {};
-export default function (UIkit) {
-    const { data: DATA, prefix: PREFIX } = UIkit;
+const PREFIX = 'uk-';
+const DATA = '__uikit__';
 
-    UIkit.component = function (name, options) {
-        name = hyphenate(name);
-        const id = PREFIX + name;
+export const components = {};
 
-        if (!options) {
-            if (isPlainObject(components[id])) {
-                components[id] = components[`data-${id}`] = UIkit.extend(components[id]);
-            }
+export function component(name, options) {
+    const id = PREFIX + hyphenate(name);
 
-            return components[id];
+    if (!options) {
+        if (isPlainObject(components[id])) {
+            components[id] = App.extend(components[id]);
         }
 
-        name = camelize(name);
+        return components[id];
+    }
 
-        UIkit[name] = function (element, data) {
-            const component = UIkit.component(name);
+    name = camelize(name);
 
-            return component.options.functional
-                ? new component({ data: isPlainObject(element) ? element : [...arguments] })
-                : element
-                ? $$(element).map(init)[0]
-                : init();
+    App[name] = (element, data) => createComponent(name, element, data);
 
-            function init(element) {
-                const instance = UIkit.getComponent(element, name);
+    const opt = isPlainObject(options) ? { ...options } : options.options;
 
-                if (instance) {
-                    if (data) {
-                        instance.$destroy();
-                    } else {
-                        return instance;
-                    }
-                }
+    opt.id = id;
+    opt.name = name;
 
-                return new component({ el: element, data });
-            }
-        };
+    opt.install?.(App, opt, name);
 
-        const opt = isPlainObject(options) ? { ...options } : options.options;
+    if (App._initialized && !opt.functional) {
+        requestAnimationFrame(() => createComponent(name, `[${id}],[data-${id}]`));
+    }
 
-        opt.id = id;
-        opt.name = name;
+    return (components[id] = opt);
+}
 
-        opt.install?.(UIkit, opt, name);
+export function createComponent(name, element, data) {
+    const Component = component(name);
 
-        if (UIkit._initialized && !opt.functional) {
-            requestAnimationFrame(() => UIkit[name](`[${id}],[data-${id}]`));
-        }
+    return Component.options.functional
+        ? new Component({ data: isPlainObject(element) ? element : [...arguments] })
+        : element
+        ? $$(element).map(init)[0]
+        : init();
 
-        return (components[id] = components[`data-${id}`] = isPlainObject(options) ? opt : options);
-    };
+    function init(element) {
+        const instance = getComponent(element, name);
 
-    UIkit.getComponents = (element) => element?.[DATA] || {};
-    UIkit.getComponent = (element, name) => UIkit.getComponents(element)[name];
-
-    UIkit.connect = (node) => {
-        if (node[DATA]) {
-            for (const name in node[DATA]) {
-                node[DATA][name]._callConnected();
+        if (instance) {
+            if (data) {
+                instance.$destroy();
+            } else {
+                return instance;
             }
         }
 
-        for (const attribute of node.getAttributeNames()) {
-            const name = getComponentName(attribute);
-            name && UIkit[name](node);
-        }
-    };
+        return new Component({ el: element, data });
+    }
+}
 
-    UIkit.disconnect = (node) => {
-        for (const name in node[DATA]) {
-            node[DATA][name]._callDisconnected();
-        }
-    };
+export function getComponents(element) {
+    return element[DATA] || {};
+}
+
+export function getComponent(element, name) {
+    return getComponents(element)[name];
 }
 
-export function getComponentName(attribute) {
-    const cmp = components[attribute];
-    return cmp && (isPlainObject(cmp) ? cmp : cmp.options).name;
+export function attachToElement(element, instance) {
+    if (!element[DATA]) {
+        element[DATA] = {};
+    }
+
+    element[DATA][instance.$options.name] = instance;
+}
+
+export function detachFromElement(element, instance) {
+    delete element[DATA]?.[instance.$options.name];
+
+    if (!isEmpty(element[DATA])) {
+        delete element[DATA];
+    }
 }

package/src/js/api/computed.js

@@ -0,0 +1,39 @@
+import { hasOwn, isUndefined } from '../util';
+
+export function initComputed(instance) {
+    const { computed } = instance.$options;
+
+    instance._computed = {};
+
+    if (computed) {
+        for (const key in computed) {
+            registerComputed(instance, key, computed[key]);
+        }
+    }
+}
+
+function registerComputed(instance, key, cb) {
+    Object.defineProperty(instance, key, {
+        enumerable: true,
+
+        get() {
+            const { _computed, $props, $el } = instance;
+
+            if (!hasOwn(_computed, key)) {
+                _computed[key] = (cb.get || cb).call(instance, $props, $el);
+            }
+
+            return _computed[key];
+        },
+
+        set(value) {
+            const { _computed } = instance;
+
+            _computed[key] = cb.set ? cb.set.call(instance, value) : value;
+
+            if (isUndefined(_computed[key])) {
+                delete _computed[key];
+            }
+        },
+    });
+}

package/src/js/api/events.js

@@ -0,0 +1,45 @@
+import { hasOwn, isArray, isFunction, isPlainObject, isString, on } from '../util';
+
+export function initEvents(instance) {
+    instance._events = [];
+    for (const event of instance.$options.events || []) {
+        if (hasOwn(event, 'handler')) {
+            registerEvent(instance, event);
+        } else {
+            for (const key in event) {
+                registerEvent(instance, event[key], key);
+            }
+        }
+    }
+}
+
+export function unbindEvents(instance) {
+    instance._events.forEach((unbind) => unbind());
+    delete instance._events;
+}
+
+export function registerEvent(instance, event, key) {
+    let { name, el, handler, capture, passive, delegate, filter, self } = isPlainObject(event)
+        ? event
+        : { name: key, handler: event };
+    el = isFunction(el) ? el.call(instance, instance) : el || instance.$el;
+
+    if (isArray(el)) {
+        el.forEach((el) => registerEvent(instance, { ...event, el }, key));
+        return;
+    }
+
+    if (!el || (filter && !filter.call(instance))) {
+        return;
+    }
+
+    instance._events.push(
+        on(
+            el,
+            name,
+            delegate ? (isString(delegate) ? delegate : delegate.call(instance, instance)) : null,
+            isString(handler) ? instance[handler] : handler.bind(instance),
+            { passive, capture, self }
+        )
+    );
+}

package/src/js/api/global.js

@@ -1,72 +1,74 @@
-import { $, apply, isString, mergeOptions, parents, toNode } from 'uikit-util';
+import App from './app';
+import { init } from './state';
+import { callUpdate } from './update';
+import { mergeOptions } from './options';
+import { component, getComponent, getComponents } from './component';
+import { $, apply, isString, parents, toNode } from '../util';
+
+App.component = component;
+App.getComponents = getComponents;
+App.getComponent = getComponent;
+
+App.use = function (plugin) {
+    if (plugin.installed) {
+        return;
+    }
 
-export default function (UIkit) {
-    const DATA = UIkit.data;
+    plugin.call(null, this);
+    plugin.installed = true;
 
-    UIkit.use = function (plugin) {
-        if (plugin.installed) {
-            return;
-        }
+    return this;
+};
 
-        plugin.call(null, this);
-        plugin.installed = true;
+App.mixin = function (mixin, component) {
+    component = (isString(component) ? this.component(component) : component) || this;
+    component.options = mergeOptions(component.options, mixin);
+};
 
-        return this;
-    };
+App.extend = function (options) {
+    options = options || {};
 
-    UIkit.mixin = function (mixin, component) {
-        component = (isString(component) ? UIkit.component(component) : component) || this;
-        component.options = mergeOptions(component.options, mixin);
+    const Super = this;
+    const Sub = function UIkitComponent(options) {
+        init(this, options);
     };
 
-    UIkit.extend = function (options) {
-        options = options || {};
+    Sub.prototype = Object.create(Super.prototype);
+    Sub.prototype.constructor = Sub;
+    Sub.options = mergeOptions(Super.options, options);
 
-        const Super = this;
-        const Sub = function UIkitComponent(options) {
-            this._init(options);
-        };
+    Sub.super = Super;
+    Sub.extend = Super.extend;
 
-        Sub.prototype = Object.create(Super.prototype);
-        Sub.prototype.constructor = Sub;
-        Sub.options = mergeOptions(Super.options, options);
+    return Sub;
+};
 
-        Sub.super = Super;
-        Sub.extend = Super.extend;
+export function update(element, e) {
+    element = element ? toNode(element) : document.body;
 
-        return Sub;
-    };
-
-    UIkit.update = function (element, e) {
-        element = element ? toNode(element) : document.body;
+    for (const parentEl of parents(element).reverse()) {
+        updateElement(parentEl, e);
+    }
 
-        for (const parentEl of parents(element).reverse()) {
-            update(parentEl[DATA], e);
-        }
+    apply(element, (element) => updateElement(element, e));
+}
 
-        apply(element, (element) => update(element[DATA], e));
-    };
+App.update = update;
 
-    let container;
-    Object.defineProperty(UIkit, 'container', {
-        get() {
-            return container || document.body;
-        },
-
-        set(element) {
-            container = $(element);
-        },
-    });
-
-    function update(data, e) {
-        if (!data) {
-            return;
-        }
-
-        for (const name in data) {
-            if (data[name]._connected) {
-                data[name]._callUpdate(e);
-            }
-        }
+function updateElement(element, e) {
+    const components = getComponents(element);
+    for (const name in components) {
+        callUpdate(components[name], e);
     }
 }
+
+let container;
+Object.defineProperty(App, 'container', {
+    get() {
+        return container || document.body;
+    },
+
+    set(element) {
+        container = $(element);
+    },
+});