uikit 3.19.4 → 3.19.5-dev.21fa5c45d

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.21fa5c45d",
   "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/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 {
+                    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/core/drop.js

@@ -29,7 +29,6 @@ import {
     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 +128,6 @@ export default {
         css(this.$el, this._style);
     },
 
-    observe: lazyload({
-        target: ({ toggle, $el }) => query(toggle, $el),
-        targets: ({ $el }) => $el,
-    }),
-
     events: [
         {
             name: 'click',

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,16 @@ export default {
     },
 
     computed: {
-        target: ({ target }, $el) => (target ? $$(target, $el) : [$el]),
+        target: ({ target }, $el) => (target ? $$(target, $el) : $el),
     },
 
     observe: [
+        intersection({
+            handler([{ isIntersecting }]) {
+                this.isIntersecting = isIntersecting;
+            },
+            args: { intersecting: false },
+        }),
         mutation({
             target: ({ target }) => target,
             options: { attributes: true, attributeFilter: ['class'], attributeOldValue: true },
@@ -24,7 +30,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,
@@ -55,7 +64,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/switcher.js

@@ -10,6 +10,7 @@ import {
     hasClass,
     includes,
     isNode,
+    isTag,
     matches,
     queryAll,
     toArray,
@@ -188,7 +189,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

@@ -58,7 +58,7 @@ export default {
         }
     },
 
-    observe: lazyload({ target: ({ target }) => target }),
+    observe: lazyload({ targets: ({ target }) => target }),
 
     events: [
         {

package/src/js/util/selector.js

@@ -18,57 +18,87 @@ export function findAll(selector, context) {
     return toNodes(_query(selector, toNode(context), 'querySelectorAll'));
 }
 
-const contextSelectorRe = /(^|[^\\],)\s*[!>+~-]/;
-const isContextSelector = memoize((selector) => selector.match(contextSelectorRe));
-
 function getContext(selector, context = document) {
-    return (isString(selector) && isContextSelector(selector)) || isDocument(context)
+    return (isString(selector) && parseSelector(selector).isContextSelector) || isDocument(context)
         ? context
         : context.ownerDocument;
 }
 
-const contextSanitizeRe = /([!>+~-])(?=\s+[!>+~-]|\s*$)/g;
-const sanatize = memoize((selector) => selector.replace(contextSanitizeRe, '$1 *'));
+const addStarRe = /([!>+~-])(?=\s+[!>+~-]|\s*$)/g;
+const splitSelectorRe = /.*?[^\\](?![^(]*\))(?:,|$)/g;
+const trailingCommaRe = /\s*,$/;
+
+const parseSelector = memoize((selector) => {
+    selector = selector.replace(addStarRe, '$1 *');
+    let isContextSelector = false;
+
+    const selectors = [];
+    for (let sel of selector.match(splitSelectorRe)) {
+        sel = sel.replace(trailingCommaRe, '').trim();
+        if (sel[0] === '>') {
+            sel = `:scope ${sel}`;
+        }
+        isContextSelector ||= ['!', '+', '~', '-'].includes(sel[0]);
+        selectors.push(sel);
+    }
+
+    return {
+        selector: selectors.join(','),
+        selectors,
+        isContextSelector,
+    };
+});
 
 function _query(selector, context = document, queryFn) {
     if (!selector || !isString(selector)) {
         return selector;
     }
 
-    selector = sanatize(selector);
-
-    if (isContextSelector(selector)) {
-        const split = splitSelector(selector);
-        selector = '';
-        for (let sel of split) {
-            let ctx = context;
-
-            if (sel[0] === '!') {
-                const selectors = sel.substr(1).trim().split(' ');
-                ctx = parent(context).closest(selectors[0]);
-                sel = selectors.slice(1).join(' ').trim();
-                if (!sel.length && split.length === 1) {
-                    return ctx;
-                }
-            }
+    const parsed = parseSelector(selector);
+
+    if (!parsed.isContextSelector) {
+        return _doQuery(context, queryFn, parsed.selector);
+    }
 
-            if (sel[0] === '-') {
-                const selectors = sel.substr(1).trim().split(' ');
-                const prev = (ctx || context).previousElementSibling;
-                ctx = matches(prev, sel.substr(1)) ? prev : null;
-                sel = selectors.slice(1).join(' ');
+    selector = '';
+    const isSingle = parsed.selectors.length === 1;
+    for (let sel of parsed.selectors) {
+        let ctx = context;
+
+        if (sel[0] === '!') {
+            const selectors = sel.substr(1).trim().split(' ');
+            ctx = parent(context).closest(selectors[0]);
+            sel = selectors.slice(1).join(' ').trim();
+            if (!sel.length && isSingle) {
+                return ctx;
             }
+        }
 
-            if (ctx) {
-                selector += `${selector ? ',' : ''}${domPath(ctx)} ${sel}`;
+        if (sel[0] === '-') {
+            const selectors = sel.substr(1).trim().split(' ');
+            const prev = (ctx || context).previousElementSibling;
+            ctx = matches(prev, sel.substr(1)) ? prev : null;
+            sel = selectors.slice(1).join(' ');
+            if (!sel.length && isSingle) {
+                return ctx;
             }
+        } else if (sel[0] === '~' || (sel[0] === '+' && isSingle)) {
+            return _doQuery(parent(ctx), queryFn, `:scope :nth-child(${index(ctx) + 1}) ${sel}`);
         }
 
-        if (!isDocument(context)) {
-            context = context.ownerDocument;
+        if (ctx) {
+            selector += `${selector ? ',' : ''}${domPath(ctx)} ${sel}`;
         }
     }
 
+    if (!isDocument(context)) {
+        context = context.ownerDocument;
+    }
+
+    return _doQuery(context, queryFn, selector);
+}
+
+function _doQuery(context, queryFn, selector) {
     try {
         return context[queryFn](selector);
     } catch (e) {
@@ -76,12 +106,6 @@ function _query(selector, context = document, queryFn) {
     }
 }
 
-const selectorRe = /.*?[^\\](?![^(]*\))(?:,|$)/g;
-
-const splitSelector = memoize((selector) =>
-    selector.match(selectorRe).map((selector) => selector.replace(/,$/, '').trim()),
-);
-
 function domPath(element) {
     const names = [];
     while (element.parentNode) {

package/src/js/util/svg.js

@@ -1,16 +1,5 @@
 import { $$ } from './dom';
 
 export function getMaxPathLength(el) {
-    return Math.ceil(
-        Math.max(
-            0,
-            ...$$('[stroke]', el).map((stroke) => {
-                try {
-                    return stroke.getTotalLength();
-                } catch (e) {
-                    return 0;
-                }
-            }),
-        ),
-    );
+    return Math.ceil(Math.max(0, ...$$('[stroke]', el).map((stroke) => stroke.getTotalLength?.())));
 }

package/tests/modal.html

@@ -382,14 +382,14 @@
         <div id="modal-media-youtube" uk-modal>
             <div class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical">
                 <button class="uk-modal-close-outside" type="button" uk-close></button>
-                <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA" width="1920" height="1080" uk-responsive uk-video></iframe>
+                <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA" width="1920" height="1080" loading="lazy" uk-responsive uk-video></iframe>
             </div>
         </div>
 
         <div id="modal-media-vimeo" uk-modal>
             <div class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical">
                 <button class="uk-modal-close-outside" type="button" uk-close></button>
-                <iframe src="https://player.vimeo.com/video/1084537" width="500" height="281" uk-responsive uk-video></iframe>
+                <iframe src="https://player.vimeo.com/video/1084537" width="500" height="281" loading="lazy" uk-responsive uk-video></iframe>
             </div>
         </div>
 

package/build/package.json

@@ -1,4 +0,0 @@
-{
-    "private": true,
-    "type": "module"
-}