uikit 3.19.5-dev.62bcee51f → 3.19.5-dev.68a7ed8e1

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.62bcee51f",
+  "version": "3.19.5-dev.68a7ed8e1",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

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 selector = cb.observe.call(instance, $props);
+                    instance._computedObserver.observe(
+                        ['~', '+', '-'].includes(selector[0])
+                            ? $el.parentElement
+                            : $el.getRootNode(),
+                        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);
 }
 
@@ -65,22 +78,3 @@ function resetComputed(instance) {
     instance._computed = {};
     return values;
 }
-
-let observer;
-let instances;
-function registerComputedObserver() {
-    if (observer) {
-        return;
-    }
-
-    instances = new Set();
-    observer = new MutationObserver(() => {
-        for (const instance of instances) {
-            callUpdate(instance, 'computed');
-        }
-    });
-    observer.observe(document, {
-        subtree: true,
-        childList: true,
-    });
-}

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

@@ -13,7 +13,10 @@ export default {
     },
 
     computed: {
-        target: ({ target }, $el) => query(target, $el),
+        target: {
+            get: ({ target }, $el) => query(target, $el),
+            observe: ({ target }) => target,
+        },
     },
 
     observe: resize({ target: ({ target }) => target }),

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

@@ -109,7 +109,7 @@ export default {
             target: () => document.scrollingElement,
             options: { box: 'content-box' },
         }),
-        resize({ target: ({ $el }) => $el }),
+        resize(),
     ],
 
     events: [

package/src/js/core/switcher.js

@@ -50,7 +50,10 @@ export default {
     },
 
     computed: {
-        connects: ({ connect }, $el) => queryAll(connect, $el),
+        connects: {
+            get: ({ connect }, $el) => queryAll(connect, $el),
+            observe: ({ connect }) => connect,
+        },
 
         connectChildren() {
             return this.connects.map((el) => children(el)).flat();

package/src/js/core/toggle.js

@@ -41,9 +41,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 }) => target,
         },
     },
 

package/src/js/mixin/internal/animate-fade.js

@@ -117,9 +117,7 @@ function waitTransitionend(target) {
 }
 
 function getTransitionNodes(target) {
-    return getRows(children(target))
-        .flat()
-        .filter((node) => isVisible(node));
+    return getRows(children(target)).flat().filter(isVisible);
 }
 
 function awaitFrame() {

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/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,
@@ -21,10 +21,13 @@ export function isVoidElement(element) {
     return toNodes(element).some((element) => voidElements[element.tagName.toLowerCase()]);
 }
 
+const isVisibleFn =
+    Element.prototype.checkVisibility ||
+    function () {
+        return this.offsetWidth || this.offsetHeight || this.getClientRects().length;
+    };
 export function isVisible(element) {
-    return toNodes(element).some(
-        (element) => element.offsetWidth || element.offsetHeight || element.getClientRects().length,
-    );
+    return toNodes(element).some((element) => isVisibleFn.call(element));
 }
 
 export const selInput = 'input,select,textarea,button';
@@ -49,16 +52,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/selector.js

@@ -35,10 +35,7 @@ const parseSelector = memoize((selector) => {
     const selectors = [];
     for (let sel of selector.match(splitSelectorRe) ?? []) {
         sel = sel.replace(trailingCommaRe, '').trim();
-        if (sel[0] === '>') {
-            sel = `:scope ${sel}`;
-        }
-        isContextSelector ||= ['!', '+', '~', '-'].includes(sel[0]);
+        isContextSelector ||= ['!', '+', '~', '-', '>'].includes(sel[0]);
         selectors.push(sel);
     }
 
@@ -49,6 +46,12 @@ const parseSelector = memoize((selector) => {
     };
 });
 
+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;
@@ -63,36 +66,42 @@ function _query(selector, context = document, queryFn) {
     selector = '';
     const isSingle = parsed.selectors.length === 1;
     for (let sel of parsed.selectors) {
+        let positionSel;
         let ctx = context;
 
         if (sel[0] === '!') {
-            const selectors = sel.substr(1).trim().split(' ');
-            ctx = context.parentElement.closest(selectors[0]);
-            sel = selectors.slice(1).join(' ').trim();
-            if (!sel.length && isSingle) {
+            [positionSel, sel] = parsePositionSelector(sel);
+            ctx = context.parentElement.closest(positionSel);
+            if (!sel && isSingle) {
                 return ctx;
             }
         }
 
-        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) {
+        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 (ctx) {
-            selector += `${selector ? ',' : ''}${domPath(ctx)} ${sel}`;
+        if (!ctx) {
+            continue;
+        }
+
+        if (isSingle) {
+            if (sel[0] === '~' || sel[0] === '+') {
+                sel = `:scope :nth-child(${index(ctx) + 1}) ${sel}`;
+                ctx = ctx.parentElement;
+            } else if (sel[0] === '>') {
+                sel = `:scope ${sel}`;
+            }
+
+            return _doQuery(ctx, queryFn, sel);
         }
+
+        selector += `${selector ? ',' : ''}${domPath(ctx)} ${sel}`;
     }
 
     if (!isDocument(context)) {

package/src/js/util/svg.js

@@ -1,5 +1,8 @@
 import { $$ } from './dom';
+import { isVisible } from './filter.js';
 
 export function getMaxPathLength(el) {
-    return Math.ceil(Math.max(0, ...$$('[stroke]', el).map((stroke) => stroke.getTotalLength?.())));
+    return isVisible(el)
+        ? Math.ceil(Math.max(0, ...$$('[stroke]', el).map((stroke) => stroke.getTotalLength())))
+        : 0;
 }

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>html:not(:has(body :first-child [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, ' '));