uikit 3.19.4 → 3.19.5-dev.3a146179f

package/eslint.config.js

@@ -1,16 +1,19 @@
-const eslintJs = require('@eslint/js');
-const eslintConfigPrettier = require('eslint-config-prettier');
-const globals = require('globals');
+import eslintJs from '@eslint/js';
+import eslintConfigPrettier from 'eslint-config-prettier';
+import globals from 'globals';
 
-module.exports = [
+export default [
     eslintJs.configs.recommended,
     eslintConfigPrettier,
+    {
+        ignores: ['*', '!src/', '!src/*', '!src/js', '!build/', 'build/*', '!build/*.js'],
+    },
     {
         rules: {
             'no-unused-vars': ['error', { caughtErrors: 'none' }],
         },
         languageOptions: {
-            ecmaVersion: 2022,
+            ecmaVersion: 'latest',
             sourceType: 'module',
             globals: {
                 ...globals.browser,

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.19.4",
+  "version": "3.19.5-dev.3a146179f",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [
@@ -10,6 +10,7 @@
     "./src/js/*.js",
     "./dist/**/*.js"
   ],
+  "type": "module",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/uikit/uikit.git"
@@ -60,8 +61,6 @@
     "prefix": "node build/prefix",
     "scope": "node build/scope",
     "release": "node build/release",
-    "watch": "chokidar \"**/*.less\" --initial -i \"node_modules\" -c \"node build/less\"",
-    "eslint": "eslint src/js build/*.js",
-    "eslint-fix": "eslint --fix src/js build/*.js"
+    "watch": "chokidar \"**/*.less\" --initial -i \"node_modules\" -c \"node build/less\""
   }
 }

package/src/js/api/boot.js

@@ -1,4 +1,4 @@
-import { apply, hasAttr, inBrowser, isPlainObject, startsWith, trigger } from 'uikit-util';
+import { apply, hasAttr, inBrowser, startsWith, trigger } from 'uikit-util';
 import { components, createComponent, getComponent, getComponents } from './component';
 import { callConnected, callDisconnected } from './hooks';
 
@@ -53,16 +53,15 @@ function applyAttributeMutation({ target, attributeName }) {
     if (name) {
         if (hasAttr(target, attributeName)) {
             createComponent(name, target);
-            return;
+        } else {
+            getComponent(target, name)?.$destroy();
         }
-
-        getComponent(target, name)?.$destroy();
     }
 }
 
 function connect(node) {
     const components = getComponents(node);
-    for (const name in getComponents(node)) {
+    for (const name in components) {
         callConnected(components[name]);
     }
 
@@ -74,7 +73,7 @@ function connect(node) {
 
 function disconnect(node) {
     const components = getComponents(node);
-    for (const name in getComponents(node)) {
+    for (const name in components) {
         callDisconnected(components[name]);
     }
 }
@@ -85,5 +84,5 @@ function getComponentName(attribute) {
     }
 
     const cmp = components[attribute];
-    return cmp && (isPlainObject(cmp) ? cmp : cmp.options).name;
+    return cmp && (cmp.options || cmp).name;
 }

package/src/js/api/component.js

@@ -1,4 +1,4 @@
-import { $$, camelize, hyphenate, isEmpty, isPlainObject } from 'uikit-util';
+import { camelize, findAll, hyphenate, isEmpty, isPlainObject } from 'uikit-util';
 import App from './app';
 
 const PREFIX = 'uk-';
@@ -10,7 +10,7 @@ export function component(name, options) {
     const id = PREFIX + hyphenate(name);
 
     if (!options) {
-        if (isPlainObject(components[id])) {
+        if (!components[id].options) {
             components[id] = App.extend(components[id]);
         }
 
@@ -21,7 +21,7 @@ export function component(name, options) {
 
     App[name] = (element, data) => createComponent(name, element, data);
 
-    const opt = isPlainObject(options) ? { ...options } : options.options;
+    const opt = options.options ?? { ...options };
 
     opt.id = id;
     opt.name = name;
@@ -41,7 +41,7 @@ export function createComponent(name, element, data, ...args) {
     return Component.options.functional
         ? new Component({ data: isPlainObject(element) ? element : [element, data, ...args] })
         : element
-          ? $$(element).map(init)[0]
+          ? findAll(element).map(init)[0]
           : init();
 
     function init(element) {

package/src/js/api/computed.js

@@ -1,6 +1,6 @@
-import { hasOwn, isUndefined } from 'uikit-util';
-import { callUpdate, prependUpdate } from './update';
-import { runWatches } from './watch';
+import { hasOwn, isUndefined, observeMutation } from 'uikit-util';
+import { callUpdate, prependUpdate } from './update.js';
+import { runWatches } from './watch.js';
 
 export function initComputed(instance) {
     const { computed } = instance.$options;
@@ -13,7 +13,7 @@ export function initComputed(instance) {
         }
     }
 }
-
+const mutationOptions = { subtree: true, childList: true };
 export function registerComputed(instance, key, cb) {
     instance._hasComputed = true;
     Object.defineProperty(instance, key, {
@@ -24,6 +24,15 @@ export function registerComputed(instance, key, cb) {
 
             if (!hasOwn(_computed, key)) {
                 _computed[key] = (cb.get || cb).call(instance, $props, $el);
+                if (cb.observe && instance._computedObserver) {
+                    const observeEl = cb.observe.call(instance, _computed[key]);
+                    if (observeEl && observeEl !== $el) {
+                        instance._computedObserver.observe(
+                            findClosestCommonParent(observeEl, $el),
+                            mutationOptions,
+                        );
+                    }
+                }
             }
 
             return _computed[key];
@@ -51,12 +60,16 @@ export function initComputedUpdates(instance) {
         events: ['resize', 'computed'],
     });
 
-    registerComputedObserver();
-    instances.add(instance);
+    instance._computedObserver = observeMutation(
+        instance.$el,
+        () => callUpdate(instance, 'computed'),
+        mutationOptions,
+    );
 }
 
 export function disconnectComputedUpdates(instance) {
-    instances?.delete(instance);
+    instance._computedObserver?.disconnect();
+    delete instance._computedObserver;
     resetComputed(instance);
 }
 
@@ -66,21 +79,9 @@ function resetComputed(instance) {
     return values;
 }
 
-let observer;
-let instances;
-function registerComputedObserver() {
-    if (observer) {
-        return;
+function findClosestCommonParent(el1, el2) {
+    while (el1 && !el1.contains(el2)) {
+        el1 = el1.parentNode;
     }
-
-    instances = new Set();
-    observer = new MutationObserver(() => {
-        for (const instance of instances) {
-            callUpdate(instance, 'computed');
-        }
-    });
-    observer.observe(document, {
-        subtree: true,
-        childList: true,
-    });
+    return el1;
 }

package/src/js/api/observer.js

@@ -46,21 +46,33 @@ function registerObservable(instance, observable) {
     const targets = hasOwn(instance, key) ? instance[key] : target;
     const observer = observe(targets, handler, options, args);
 
-    if (isFunction(target) && isArray(instance[key]) && observer.unobserve) {
-        registerWatch(instance, { handler: updateTargets(observer), immediate: false }, key);
+    if (isFunction(target) && isArray(instance[key])) {
+        registerWatch(
+            instance,
+            { handler: updateTargets(observer, options), immediate: false },
+            key,
+        );
     }
 
     registerObserver(instance, observer);
 }
 
-function updateTargets(observer) {
+function updateTargets(observer, options) {
     return (targets, prev) => {
         for (const target of prev) {
-            !includes(targets, target) && observer.unobserve(target);
+            if (!includes(targets, target)) {
+                if (observer.unobserve) {
+                    observer.unobserve(target);
+                } else if (observer.observe) {
+                    observer.disconnect();
+                }
+            }
         }
 
         for (const target of targets) {
-            !includes(prev, target) && observer.observe(target);
+            if (!includes(prev, target) || !observer.unobserve) {
+                observer.observe(target, options);
+            }
         }
     };
 }

package/src/js/components/filter.js

@@ -118,10 +118,7 @@ export default {
 
             await Promise.all(
                 $$(this.target, this.$el).map((target) => {
-                    const filterFn = () => {
-                        applyState(state, target, getChildren(target));
-                        this.$update(this.$el);
-                    };
+                    const filterFn = () => applyState(state, target, getChildren(target));
                     return animate ? this.animate(filterFn, target) : filterFn();
                 }),
             );
@@ -146,7 +143,9 @@ function isEqualState(stateA, stateB) {
 function applyState(state, target, children) {
     const selector = getSelector(state);
 
-    children.forEach((el) => css(el, 'display', selector && !matches(el, selector) ? 'none' : ''));
+    for (const el of children) {
+        css(el, 'display', selector && !matches(el, selector) ? 'none' : '');
+    }
 
     const [sort, order] = state.sort;
 

package/src/js/components/slider-parallax.js

@@ -1,11 +1,11 @@
-import { closest, css, endsWith, fastdom, noop, Transition } from 'uikit-util';
+import { css, endsWith, fastdom, noop, Transition } from 'uikit-util';
 import Parallax from '../mixin/parallax';
 
 export default {
     mixins: [Parallax],
 
     beforeConnect() {
-        this.item = closest(this.$el, `.${this.$options.id.replace('parallax', 'items')} > *`);
+        this.item = this.$el.closest(`.${this.$options.id.replace('parallax', 'items')} > *`);
     },
 
     disconnected() {

package/src/js/components/slider.js

@@ -129,7 +129,7 @@ export default {
     },
 
     observe: resize({
-        target: ({ slides }) => slides,
+        target: ({ slides, $el }) => [$el, ...slides],
     }),
 
     update: {

package/src/js/core/drop.js

@@ -27,9 +27,7 @@ import {
     pointerUp,
     query,
     removeClass,
-    within,
 } from 'uikit-util';
-import { lazyload } from '../api/observables';
 import Container from '../mixin/container';
 import Position from '../mixin/position';
 import Togglable from '../mixin/togglable';
@@ -129,11 +127,6 @@ export default {
         css(this.$el, this._style);
     },
 
-    observe: lazyload({
-        target: ({ toggle, $el }) => query(toggle, $el),
-        targets: ({ $el }) => $el,
-    }),
-
     events: [
         {
             name: 'click',
@@ -519,7 +512,7 @@ function listenForBackgroundClose(drop) {
                     !defaultPrevented &&
                     type === pointerUp &&
                     target === newTarget &&
-                    !(drop.targetEl && within(target, drop.targetEl))
+                    !drop.targetEl?.contains(target)
                 ) {
                     drop.hide(false);
                 }

package/src/js/core/height-placeholder.js

@@ -1,4 +1,4 @@
-import { css, query } from 'uikit-util';
+import { css, parent, query } from 'uikit-util';
 import { resize } from '../api/observables';
 
 export default {
@@ -13,7 +13,10 @@ export default {
     },
 
     computed: {
-        target: ({ target }, $el) => query(target, $el),
+        target: {
+            get: ({ target }, $el) => query(target, $el),
+            observe: (target) => parent(target),
+        },
     },
 
     observe: resize({ target: ({ target }) => target }),

package/src/js/core/height-viewport.js

@@ -68,7 +68,7 @@ export default {
                             offsetPosition(offsetTopEl)[0] - offsetPosition(scrollElement)[0];
                         minHeight += top > 0 && top < viewportHeight / 2 ? ` - ${top}px` : '';
                     } else {
-                        minHeight += ` - ${css(scrollElement, 'paddingTop')}`;
+                        minHeight += ` - ${boxModelAdjust(scrollElement, 'height', css(scrollElement, 'boxSizing'))}px`;
                     }
                 }
 

package/src/js/core/icon.js

@@ -3,7 +3,6 @@ import {
     addClass,
     apply,
     attr,
-    closest,
     css,
     each,
     hasAttr,
@@ -126,9 +125,9 @@ export const Search = {
             hasClass(this.$el, 'uk-search-toggle') || hasClass(this.$el, 'uk-navbar-toggle');
         this.icon = isToggle
             ? 'search-toggle-icon'
-            : hasClass(this.$el, 'uk-search-icon') && closest(this.$el, '.uk-search-large')
+            : hasClass(this.$el, 'uk-search-icon') && this.$el.closest('.uk-search-large')
               ? 'search-large'
-              : closest(this.$el, '.uk-search-navbar')
+              : this.$el.closest('.uk-search-navbar')
                 ? 'search-navbar'
                 : this.$props.icon;
 

package/src/js/core/img.js

@@ -56,13 +56,13 @@ export default {
     },
 
     observe: intersection({
-        target: ({ $el, $props }) => [$el, ...queryAll($props.target, $el)],
         handler(entries, observer) {
             this.load();
             observer.disconnect();
         },
         options: ({ margin }) => ({ rootMargin: margin }),
         filter: ({ loading }) => loading === 'lazy',
+        target: ({ $el, $props }) => ($props.target ? [$el, ...queryAll($props.target, $el)] : $el),
     }),
 
     methods: {

package/src/js/core/inverse.js

@@ -1,5 +1,5 @@
-import { $$, css, dimensions, matches, observeResize, on, replaceClass } from 'uikit-util';
-import { mutation } from '../api/observables';
+import { $$, css, dimensions, matches, observeResize, on, replaceClass, toNodes } from 'uikit-util';
+import { intersection, mutation } from '../api/observables';
 
 export default {
     props: {
@@ -13,10 +13,18 @@ export default {
     },
 
     computed: {
-        target: ({ target }, $el) => (target ? $$(target, $el) : [$el]),
+        target: ({ target }, $el) => (target ? $$(target, $el) : $el),
     },
 
     observe: [
+        intersection({
+            handler(entries) {
+                this.isIntersecting = entries.some(({ isIntersecting }) => isIntersecting);
+                this.$emit();
+            },
+            target: ({ target }) => target,
+            args: { intersecting: false },
+        }),
         mutation({
             target: ({ target }) => target,
             options: { attributes: true, attributeFilter: ['class'], attributeOldValue: true },
@@ -24,7 +32,10 @@ export default {
         {
             target: ({ target }) => target,
             observe: (target, handler) => {
-                const observer = observeResize([...target, document.documentElement], handler);
+                const observer = observeResize(
+                    [...toNodes(target), document.documentElement],
+                    handler,
+                );
                 const listener = [
                     on(document, 'scroll itemshown itemhidden', handler, {
                         passive: true,
@@ -41,6 +52,8 @@ export default {
                 ];
 
                 return {
+                    observe: observer.observe.bind(observer),
+                    unobserve: observer.unobserve.bind(observer),
                     disconnect() {
                         observer.disconnect();
                         listener.map((off) => off());
@@ -55,7 +68,11 @@ export default {
 
     update: {
         read() {
-            for (const target of this.target) {
+            if (!this.isIntersecting) {
+                return false;
+            }
+
+            for (const target of toNodes(this.target)) {
                 replaceClass(
                     target,
                     'uk-light,uk-dark',

package/src/js/core/margin.js

@@ -15,10 +15,10 @@ export default {
     observe: [
         mutation({
             options: {
-                childList: true,
                 attributes: true,
                 attributeFilter: ['style'],
             },
+            target: ({ $el }) => [$el, ...children($el)],
         }),
         resize({
             target: ({ $el }) => [$el, ...children($el)],

package/src/js/core/modal.js

@@ -70,12 +70,11 @@ export default {
 
 function install({ modal }) {
     modal.dialog = function (content, options) {
-        const dialog = modal(
-            `<div class="uk-modal">
-                <div class="uk-modal-dialog">${content}</div>
-             </div>`,
-            { stack: true, role: 'alertdialog', ...options },
-        );
+        const dialog = modal($(`<div><div class="uk-modal-dialog">${content}</div></div>`), {
+            stack: true,
+            role: 'alertdialog',
+            ...options,
+        });
 
         dialog.show();
 

package/src/js/core/switcher.js

@@ -10,7 +10,9 @@ import {
     hasClass,
     includes,
     isNode,
+    isTag,
     matches,
+    parent,
     queryAll,
     toArray,
     toggleClass,
@@ -49,7 +51,10 @@ export default {
     },
 
     computed: {
-        connects: ({ connect }, $el) => queryAll(connect, $el),
+        connects: {
+            get: ({ connect }, $el) => queryAll(connect, $el),
+            observe: (connects) => parent(connects[0]),
+        },
 
         connectChildren() {
             return this.connects.map((el) => children(el)).flat();
@@ -188,7 +193,11 @@ export default {
     ],
 
     update() {
-        attr(this.connects, 'role', 'presentation');
+        for (const el of this.connects) {
+            if (isTag(el, 'ul')) {
+                attr(el, 'role', 'presentation');
+            }
+        }
         attr(children(this.$el), 'role', 'presentation');
 
         for (const index in this.toggles) {

package/src/js/core/toggle.js

@@ -9,6 +9,7 @@ import {
     isTouch,
     matches,
     once,
+    parent,
     pointerDown,
     pointerEnter,
     pointerLeave,
@@ -41,9 +42,12 @@ export default {
     },
 
     computed: {
-        target({ target }, $el) {
-            target = queryAll(target || $el.hash, $el);
-            return target.length ? target : [$el];
+        target: {
+            get: ({ target }, $el) => {
+                target = queryAll(target || $el.hash, $el);
+                return target.length ? target : [$el];
+            },
+            observe: (target) => parent(target[0]),
         },
     },
 
@@ -58,7 +62,7 @@ export default {
         }
     },
 
-    observe: lazyload({ target: ({ target }) => target }),
+    observe: lazyload({ targets: ({ target }) => target }),
 
     events: [
         {

package/src/js/mixin/parallax.js

@@ -7,6 +7,7 @@ import {
     isString,
     isUndefined,
     noop,
+    once,
     propName,
     toFloat,
     toPx,
@@ -271,6 +272,7 @@ function setBackgroundPosFn(bgProps, positions, props) {
     };
 }
 
+const loading = {};
 const dimensions = {};
 function getBackgroundImageDimensions(el) {
     const src = css(el, 'backgroundImage').replace(/^none|url\(["']?(.+?)["']?\)$/, '$1');
@@ -283,11 +285,13 @@ function getBackgroundImageDimensions(el) {
     if (src) {
         image.src = src;
 
-        if (!image.naturalWidth) {
-            image.onload = () => {
+        if (!image.naturalWidth && !loading[src]) {
+            once(image, 'error load', () => {
                 dimensions[src] = toDimensions(image);
                 trigger(el, createEvent('load', false));
-            };
+            });
+            loading[src] = true;
+
             return toDimensions(image);
         }
     }

package/src/js/mixin/slider.js

@@ -10,7 +10,6 @@ import {
     removeClass,
     trigger,
 } from 'uikit-util';
-import { resize } from '../api/observables';
 import I18n from './i18n';
 import SliderAutoplay from './slider-autoplay';
 import SliderDrag from './slider-drag';
@@ -80,8 +79,6 @@ export default {
         },
     },
 
-    observe: resize(),
-
     events: {
         itemshow({ target }) {
             addClass(target, this.clsEnter, this.clsSlideActive);

package/src/js/mixin/slideshow.js

@@ -1,4 +1,5 @@
 import { addClass, removeClass } from 'uikit-util';
+import { resize } from '../api/observables.js';
 import Animations from './internal/slideshow-animations';
 import Transitioner from './internal/slideshow-transitioner';
 import Slider from './slider.js';
@@ -27,6 +28,8 @@ export default {
         },
     },
 
+    observe: resize(),
+
     events: {
         beforeitemshow({ target }) {
             addClass(target, this.clsActive);

package/src/js/util/filter.js

@@ -1,4 +1,4 @@
-import { isString, startsWith, toArray, toNode, toNodes } from './lang';
+import { toArray, toNode, toNodes } from './lang';
 
 const voidElements = {
     area: true,
@@ -49,16 +49,6 @@ export function matches(element, selector) {
     return toNodes(element).some((element) => element.matches(selector));
 }
 
-export function closest(element, selector) {
-    return toNode(element)?.closest(startsWith(selector, '>') ? selector.slice(1) : selector);
-}
-
-export function within(element, selector) {
-    return isString(selector)
-        ? !!closest(element, selector)
-        : toNode(selector).contains(toNode(element));
-}
-
 export function parents(element, selector) {
     const elements = [];
 

package/src/js/util/lang.js

@@ -111,7 +111,7 @@ export function toFloat(value) {
 }
 
 export function toNode(element) {
-    return toNodes(element)[0];
+    return element && toNodes(element)[0];
 }
 
 export function toNodes(element) {