uikit 3.19.5-dev.66a60877b → 3.19.5-dev.74c343fa4

package/dist/js/uikit.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.19.5-dev.66a60877b | https://www.getuikit.com | (c) 2014 - 2024 YOOtheme | MIT License */
+/*! UIkit 3.19.5-dev.74c343fa4 | https://www.getuikit.com | (c) 2014 - 2024 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -296,10 +296,11 @@
     function isVoidElement(element) {
       return toNodes(element).some((element2) => voidElements[element2.tagName.toLowerCase()]);
     }
+    const isVisibleFn = Element.prototype.checkVisibility || function() {
+      return this.offsetWidth || this.offsetHeight || this.getClientRects().length;
+    };
     function isVisible(element) {
-      return toNodes(element).some(
-        (element2) => element2.offsetWidth || element2.offsetHeight || element2.getClientRects().length
-      );
+      return toNodes(element).some((element2) => isVisibleFn.call(element2));
     }
     const selInput = "input,select,textarea,button";
     function isInput(element) {
@@ -373,10 +374,7 @@
       const selectors = [];
       for (let sel of (_a = selector.match(splitSelectorRe)) != null ? _a : []) {
         sel = sel.replace(trailingCommaRe, "").trim();
-        if (sel[0] === ">") {
-          sel = `:scope ${sel}`;
-        }
-        isContextSelector || (isContextSelector = ["!", "+", "~", "-"].includes(sel[0]));
+        isContextSelector || (isContextSelector = ["!", "+", "~", "-", ">"].includes(sel[0]));
         selectors.push(sel);
       }
       return {
@@ -385,6 +383,11 @@
         isContextSelector
       };
     });
+    const parsePositionSelector = memoize((selector) => {
+      selector = selector.substr(1).trim();
+      const index2 = selector.indexOf(" ");
+      return ~index2 ? [selector.substring(0, index2), selector.substring(index2 + 1)] : [selector, ""];
+    });
     function _query(selector, context = document, queryFn) {
       if (!selector || !isString(selector)) {
         return selector;
@@ -396,33 +399,36 @@
       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)) {
         context = context.ownerDocument;
@@ -993,24 +999,18 @@
       },
       flush
     };
-    function flush(recursion) {
+    function flush() {
       runTasks(fastdom.reads);
       runTasks(fastdom.writes.splice(0));
       fastdom.scheduled = false;
       if (fastdom.reads.length || fastdom.writes.length) {
-        scheduleFlush(recursion + 1);
+        scheduleFlush();
       }
     }
-    const RECURSION_LIMIT = 4;
-    function scheduleFlush(recursion) {
-      if (fastdom.scheduled) {
-        return;
-      }
-      fastdom.scheduled = true;
-      if (recursion && recursion < RECURSION_LIMIT) {
-        Promise.resolve().then(() => flush(recursion));
-      } else {
-        requestAnimationFrame(() => flush(1));
+    function scheduleFlush() {
+      if (!fastdom.scheduled) {
+        fastdom.scheduled = true;
+        queueMicrotask(flush);
       }
     }
     function runTasks(tasks) {
@@ -2027,6 +2027,11 @@
         firstColumn: "uk-first-column"
       },
       observe: [
+        mutation({
+          options: {
+            childList: true
+          }
+        }),
         mutation({
           options: {
             attributes: true,
@@ -2108,99 +2113,15 @@
       };
     }
 
-    const clsLeave = "uk-transition-leave";
-    const clsEnter = "uk-transition-enter";
-    function fade(action, target, duration, stagger = 0) {
-      const index = transitionIndex(target, true);
-      const propsIn = { opacity: 1 };
-      const propsOut = { opacity: 0 };
-      const wrapIndexFn = (fn) => () => index === transitionIndex(target) ? fn() : Promise.reject();
-      const leaveFn = wrapIndexFn(async () => {
-        addClass(target, clsLeave);
-        await Promise.all(
-          getTransitionNodes(target).map(
-            (child, i) => new Promise(
-              (resolve) => setTimeout(
-                () => Transition.start(child, propsOut, duration / 2, "ease").then(
-                  resolve
-                ),
-                i * stagger
-              )
-            )
-          )
-        );
-        removeClass(target, clsLeave);
-      });
-      const enterFn = wrapIndexFn(async () => {
-        const oldHeight = height(target);
-        addClass(target, clsEnter);
-        action();
-        css(children(target), { opacity: 0 });
-        await awaitFrame$1();
-        const nodes = children(target);
-        const newHeight = height(target);
-        css(target, "alignContent", "flex-start");
-        height(target, oldHeight);
-        const transitionNodes = getTransitionNodes(target);
-        css(nodes, propsOut);
-        const transitions = transitionNodes.map(async (child, i) => {
-          await awaitTimeout(i * stagger);
-          await Transition.start(child, propsIn, duration / 2, "ease");
-        });
-        if (oldHeight !== newHeight) {
-          transitions.push(
-            Transition.start(
-              target,
-              { height: newHeight },
-              duration / 2 + transitionNodes.length * stagger,
-              "ease"
-            )
-          );
-        }
-        await Promise.all(transitions).then(() => {
-          removeClass(target, clsEnter);
-          if (index === transitionIndex(target)) {
-            css(target, { height: "", alignContent: "" });
-            css(nodes, { opacity: "" });
-            delete target.dataset.transition;
-          }
-        });
-      });
-      return hasClass(target, clsLeave) ? waitTransitionend(target).then(enterFn) : hasClass(target, clsEnter) ? waitTransitionend(target).then(leaveFn).then(enterFn) : leaveFn().then(enterFn);
-    }
-    function transitionIndex(target, next) {
-      if (next) {
-        target.dataset.transition = 1 + transitionIndex(target);
-      }
-      return toNumber(target.dataset.transition) || 0;
-    }
-    function waitTransitionend(target) {
-      return Promise.all(
-        children(target).filter(Transition.inProgress).map(
-          (el) => new Promise((resolve) => once(el, "transitionend transitioncanceled", resolve))
-        )
-      );
-    }
-    function getTransitionNodes(target) {
-      return getRows(children(target)).flat().filter((node) => isVisible(node));
-    }
-    function awaitFrame$1() {
-      return new Promise((resolve) => requestAnimationFrame(resolve));
-    }
-    function awaitTimeout(timeout) {
-      return new Promise((resolve) => setTimeout(resolve, timeout));
-    }
-
     async function slide(action, target, duration) {
       await awaitFrame();
       let nodes = children(target);
       const currentProps = nodes.map((el) => getProps$1(el, true));
       const targetProps = { ...css(target, ["height", "padding"]), display: "block" };
       await Promise.all(nodes.concat(target).map(Transition.cancel));
-      action();
+      await action();
       nodes = nodes.concat(children(target).filter((el) => !includes(nodes, el)));
       await Promise.resolve();
-      fastdom.flush();
       const targetStyle = attr(target, "style");
       const targetPropsTo = css(target, ["height", "padding"]);
       const [propsTo, propsFrom] = getTransitionProps(target, nodes, currentProps);
@@ -2208,7 +2129,6 @@
       nodes.forEach((el, i) => propsFrom[i] && css(el, propsFrom[i]));
       css(target, targetProps);
       trigger(target, "scroll");
-      fastdom.flush();
       await awaitFrame();
       const transitions = nodes.map((el, i) => parent(el) === target && Transition.start(el, propsTo[i], duration, "ease")).concat(Transition.start(target, targetPropsTo, duration, "ease"));
       try {
@@ -2278,6 +2198,86 @@
       return new Promise((resolve) => requestAnimationFrame(resolve));
     }
 
+    const clsLeave = "uk-transition-leave";
+    const clsEnter = "uk-transition-enter";
+    function fade(action, target, duration, stagger = 0) {
+      const index = transitionIndex(target, true);
+      const propsIn = { opacity: 1 };
+      const propsOut = { opacity: 0 };
+      const wrapIndexFn = (fn) => () => index === transitionIndex(target) ? fn() : Promise.reject();
+      const leaveFn = wrapIndexFn(async () => {
+        addClass(target, clsLeave);
+        await Promise.all(
+          getTransitionNodes(target).map(
+            (child, i) => new Promise(
+              (resolve) => setTimeout(
+                () => Transition.start(child, propsOut, duration / 2, "ease").then(
+                  resolve
+                ),
+                i * stagger
+              )
+            )
+          )
+        );
+        removeClass(target, clsLeave);
+      });
+      const enterFn = wrapIndexFn(async () => {
+        const oldHeight = height(target);
+        addClass(target, clsEnter);
+        action();
+        css(children(target), { opacity: 0 });
+        await awaitFrame();
+        const nodes = children(target);
+        const newHeight = height(target);
+        css(target, "alignContent", "flex-start");
+        height(target, oldHeight);
+        const transitionNodes = getTransitionNodes(target);
+        css(nodes, propsOut);
+        const transitions = transitionNodes.map(async (child, i) => {
+          await awaitTimeout(i * stagger);
+          await Transition.start(child, propsIn, duration / 2, "ease");
+        });
+        if (oldHeight !== newHeight) {
+          transitions.push(
+            Transition.start(
+              target,
+              { height: newHeight },
+              duration / 2 + transitionNodes.length * stagger,
+              "ease"
+            )
+          );
+        }
+        await Promise.all(transitions).then(() => {
+          removeClass(target, clsEnter);
+          if (index === transitionIndex(target)) {
+            css(target, { height: "", alignContent: "" });
+            css(nodes, { opacity: "" });
+            delete target.dataset.transition;
+          }
+        });
+      });
+      return hasClass(target, clsLeave) ? waitTransitionend(target).then(enterFn) : hasClass(target, clsEnter) ? waitTransitionend(target).then(leaveFn).then(enterFn) : leaveFn().then(enterFn);
+    }
+    function transitionIndex(target, next) {
+      if (next) {
+        target.dataset.transition = 1 + transitionIndex(target);
+      }
+      return toNumber(target.dataset.transition) || 0;
+    }
+    function waitTransitionend(target) {
+      return Promise.all(
+        children(target).filter(Transition.inProgress).map(
+          (el) => new Promise((resolve) => once(el, "transitionend transitioncanceled", resolve))
+        )
+      );
+    }
+    function getTransitionNodes(target) {
+      return getRows(children(target)).flat().filter(isVisible);
+    }
+    function awaitTimeout(timeout) {
+      return new Promise((resolve) => setTimeout(resolve, timeout));
+    }
+
     var Animate = {
       props: {
         duration: Number,
@@ -3254,6 +3254,7 @@
         }
       }
     }
+    const mutationOptions = { subtree: true, childList: true };
     function registerComputed(instance, key, cb) {
       instance._hasComputed = true;
       Object.defineProperty(instance, key, {
@@ -3262,6 +3263,13 @@
           const { _computed, $props, $el } = instance;
           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];
         },
@@ -3282,11 +3290,16 @@
         read: () => runWatches(instance, resetComputed(instance)),
         events: ["resize", "computed"]
       });
-      registerComputedObserver();
-      instances$1.add(instance);
+      instance._computedObserver = observeMutation(
+        instance.$el,
+        () => callUpdate(instance, "computed"),
+        mutationOptions
+      );
     }
     function disconnectComputedUpdates(instance) {
-      instances$1 == null ? void 0 : instances$1.delete(instance);
+      var _a;
+      (_a = instance._computedObserver) == null ? void 0 : _a.disconnect();
+      delete instance._computedObserver;
       resetComputed(instance);
     }
     function resetComputed(instance) {
@@ -3294,23 +3307,6 @@
       instance._computed = {};
       return values;
     }
-    let observer;
-    let instances$1;
-    function registerComputedObserver() {
-      if (observer) {
-        return;
-      }
-      instances$1 = /* @__PURE__ */ new Set();
-      observer = new MutationObserver(() => {
-        for (const instance of instances$1) {
-          callUpdate(instance, "computed");
-        }
-      });
-      observer.observe(document, {
-        subtree: true,
-        childList: true
-      });
-    }
 
     function initEvents(instance) {
       instance._events = [];
@@ -3563,7 +3559,7 @@
     };
     App.util = util;
     App.options = {};
-    App.version = "3.19.5-dev.66a60877b";
+    App.version = "3.19.5-dev.74c343fa4";
 
     const PREFIX = "uk-";
     const DATA = "__uikit__";
@@ -4563,10 +4559,7 @@
     }
 
     function getMaxPathLength(el) {
-      return Math.ceil(Math.max(0, ...$$("[stroke]", el).map((stroke) => {
-        var _a;
-        return (_a = stroke.getTotalLength) == null ? void 0 : _a.call(stroke);
-      })));
+      return isVisible(el) ? Math.ceil(Math.max(0, ...$$("[stroke]", el).map((stroke) => stroke.getTotalLength()))) : 0;
     }
 
     const props = {
@@ -4770,6 +4763,7 @@
         }
       };
     }
+    const loading = {};
     const dimensions = {};
     function getBackgroundImageDimensions(el) {
       const src = css(el, "backgroundImage").replace(/^none|url\(["']?(.+?)["']?\)$/, "$1");
@@ -4779,11 +4773,12 @@
       const image = new Image();
       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);
         }
       }
@@ -7784,7 +7779,10 @@
         target: ""
       },
       computed: {
-        target: ({ target }, $el) => query(target, $el)
+        target: {
+          get: ({ target }, $el) => query(target, $el),
+          observe: ({ target }) => target
+        }
       },
       observe: resize({ target: ({ target }) => target }),
       update: {
@@ -8444,10 +8442,11 @@
     };
     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();
         on(
           dialog.$el,
@@ -8919,7 +8918,6 @@
           }
           trigger(el, inview ? "inview" : "outview");
           state.inview = inview;
-          this.$update(el);
         }
       }
     };
@@ -9066,7 +9064,7 @@
           target: () => document.scrollingElement,
           options: { box: "content-box" }
         }),
-        resize({ target: ({ $el }) => $el })
+        resize()
       ],
       events: [
         {
@@ -9479,7 +9477,10 @@
         swiping: true
       },
       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();
         },
@@ -9668,9 +9669,12 @@
         queued: true
       },
       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
         }
       },
       connected() {