uikit 3.19.5-dev.9d6b5103b → 3.19.5-dev.c6a7fbca6

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.5-dev.9d6b5103b",
+  "version": "3.19.5-dev.c6a7fbca6",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

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/inverse.js

@@ -1,5 +1,5 @@
 import { $$, css, dimensions, matches, observeResize, on, replaceClass } from 'uikit-util';
-import { mutation } from '../api/observables';
+import { intersection, mutation } from '../api/observables';
 
 export default {
     props: {
@@ -17,6 +17,12 @@ export default {
     },
 
     observe: [
+        intersection({
+            handler([{ isIntersecting }]) {
+                this.isIntersecting = isIntersecting;
+            },
+            args: { intersecting: false },
+        }),
         mutation({
             target: ({ target }) => target,
             options: { attributes: true, attributeFilter: ['class'], attributeOldValue: true },
@@ -55,6 +61,10 @@ export default {
 
     update: {
         read() {
+            if (!this.isIntersecting) {
+                return false;
+            }
+
             for (const target of this.target) {
                 replaceClass(
                     target,

package/src/js/util/selector.js

@@ -18,57 +18,91 @@ 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(context),
+                queryFn,
+                `:scope :nth-child(${index(context) + 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 +110,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>