uikit 3.19.5-dev.57ec46163 → 3.19.5-dev.5db24934f

package/src/js/util/selector.js

@@ -1,5 +1,5 @@
 import { attr } from './attr';
-import { index, matches, parent } from './filter';
+import { index, matches } from './filter';
 import { isDocument, isString, memoize, toNode, toNodes } from './lang';
 
 export function query(selector, context) {
@@ -18,57 +18,96 @@ 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,
+    };
+});
+
+const parsePositionSelector = memoize((selector) => {
+    selector = selector.substr(1).trim();
+    const index = selector.indexOf(' ');
+    return ~index ? [selector.substring(0, index), selector.substring(index + 1)] : [selector, ''];
+});
 
 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 (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 (!parsed.isContextSelector) {
+        return _doQuery(context, queryFn, parsed.selector);
+    }
+
+    selector = '';
+    const isSingle = parsed.selectors.length === 1;
+    for (let sel of parsed.selectors) {
+        let positionSel;
+        let ctx = context;
+
+        if (sel[0] === '!') {
+            [positionSel, sel] = parsePositionSelector(sel);
+            ctx = context.parentElement.closest(positionSel);
+            if (!sel && isSingle) {
+                return ctx;
             }
+        }
 
-            if (ctx) {
-                selector += `${selector ? ',' : ''}${domPath(ctx)} ${sel}`;
+        if (ctx && sel[0] === '-') {
+            [positionSel, sel] = parsePositionSelector(sel);
+            ctx = ctx.previousElementSibling;
+            ctx = matches(ctx, positionSel) ? ctx : null;
+            if (!sel && isSingle) {
+                return ctx;
             }
+        } else if (sel[0] === '~' || (sel[0] === '+' && isSingle)) {
+            return _doQuery(
+                ctx.parentElement,
+                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 +115,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/src/less/components/utility.less

@@ -129,7 +129,7 @@
 [class*="uk-float-"] { max-width: 100%; }
 
 
-/* Overfow
+/* Overflow
  ========================================================================== */
 
 .uk-overflow-hidden { overflow: hidden; }

package/src/scss/components/utility.scss

@@ -111,7 +111,7 @@
 [class*="uk-float-"] { max-width: 100%; }
 
 
-/* Overfow
+/* Overflow
  ========================================================================== */
 
 .uk-overflow-hidden { overflow: hidden; }

package/tests/js/index.js

@@ -5,7 +5,6 @@ const tests = TESTS;
 const storage = window.sessionStorage;
 const key = '_uikit_style';
 const keyinverse = '_uikit_inverse';
-const docEl = document.documentElement;
 
 // try to load themes.json
 const request = new XMLHttpRequest();
@@ -39,7 +38,7 @@ storage[keyinverse] = storage[keyinverse] || '';
 const dir = storage._uikit_dir || 'ltr';
 
 // set dir
-docEl.dir = dir;
+document.documentElement.dir = dir;
 
 const style = styles[storage[key]] || styles.theme;
 
@@ -50,6 +49,10 @@ document.writeln(
     }">`,
 );
 
+document.writeln(
+    `<style>body:not(:has([aria-label="Component switcher"])) {padding-top: 80px}</style>`,
+);
+
 // add javascript
 document.writeln('<script src="../dist/js/uikit.js"></script>');
 document.writeln(
@@ -60,9 +63,8 @@ on(window, 'load', () =>
     setTimeout(
         () =>
             requestAnimationFrame(() => {
-                const $body = document.body;
                 const $container = prepend(
-                    $body,
+                    document.body,
                     `
         <div class="uk-container">
             <select class="uk-select uk-form-width-small" style="margin: 20px 20px 20px 0" aria-label="Component switcher">
@@ -144,8 +146,12 @@ on(window, 'load', () =>
 
                     addClass($$('.uk-navbar-container'), 'uk-navbar-transparent');
 
-                    css(docEl, 'background', $inverse.value === 'dark' ? '#fff' : '#222');
-                    addClass($body, `uk-${$inverse.value}`);
+                    css(
+                        document.documentElement,
+                        'background',
+                        $inverse.value === 'dark' ? '#fff' : '#222',
+                    );
+                    addClass(document.body, `uk-${$inverse.value}`);
                 }
 
                 on($inverse, 'change', () => {
@@ -161,15 +167,11 @@ on(window, 'load', () =>
                     location.reload();
                 });
                 $rtl.firstElementChild.checked = dir === 'rtl';
-
-                css(docEl, 'paddingTop', '');
             }),
         100,
     ),
 );
 
-css(docEl, 'paddingTop', '80px');
-
 function getParam(name) {
     const match = new RegExp(`[?&]${name}=([^&]*)`).exec(window.location.search);
     return match && decodeURIComponent(match[1].replace(/\+/g, ' '));

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>