uikit 3.19.4 → 3.19.5-dev.3a146179f

package/dist/js/uikit.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.19.4 | https://www.getuikit.com | (c) 2014 - 2024 YOOtheme | MIT License */
+/*! UIkit 3.19.5-dev.3a146179f | https://www.getuikit.com | (c) 2014 - 2024 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -88,7 +88,7 @@
       return parseFloat(value) || 0;
     }
     function toNode(element) {
-      return toNodes(element)[0];
+      return element && toNodes(element)[0];
     }
     function toNodes(element) {
       return isNode(element) ? [element] : Array.from(element || []).filter(isNode);
@@ -319,13 +319,6 @@
     function matches(element, selector) {
       return toNodes(element).some((element2) => element2.matches(selector));
     }
-    function closest(element, selector) {
-      var _a;
-      return (_a = toNode(element)) == null ? void 0 : _a.closest(startsWith(selector, ">") ? selector.slice(1) : selector);
-    }
-    function within(element, selector) {
-      return isString(selector) ? !!closest(element, selector) : toNode(selector).contains(toNode(element));
-    }
     function parents(element, selector) {
       const elements = [];
       while (element = parent(element)) {
@@ -367,55 +360,82 @@
     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) ? context : context.ownerDocument;
+      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) => {
+      var _a;
+      selector = selector.replace(addStarRe, "$1 *");
+      let isContextSelector = false;
+      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]));
+        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;
-            }
-          }
-          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 (ctx) {
-            selector += `${selector ? "," : ""}${domPath(ctx)} ${sel}`;
-          }
+      const parsed = parseSelector(selector);
+      if (!parsed.isContextSelector) {
+        return _doQuery(context, queryFn, parsed.selector);
+      }
+      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 = context.parentElement.closest(selectors[0]);
+          sel = selectors.slice(1).join(" ").trim();
+          if (!sel.length && 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) {
+            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) {
         return null;
       }
     }
-    const selectorRe = /.*?[^\\](?![^(]*\))(?:,|$)/g;
-    const splitSelector = memoize(
-      (selector) => selector.match(selectorRe).map((selector2) => selector2.replace(/,$/, "").trim())
-    );
     function domPath(element) {
       const names = [];
       while (element.parentNode) {
@@ -1540,7 +1560,6 @@
         camelize: camelize,
         children: children,
         clamp: clamp,
-        closest: closest,
         createEvent: createEvent,
         css: css,
         data: data,
@@ -1661,7 +1680,6 @@
         uniqueBy: uniqueBy,
         unwrap: unwrap,
         width: width,
-        within: within,
         wrapAll: wrapAll,
         wrapInner: wrapInner
     });
@@ -2011,10 +2029,10 @@
       observe: [
         mutation({
           options: {
-            childList: true,
             attributes: true,
             attributeFilter: ["style"]
-          }
+          },
+          target: ({ $el }) => [$el, ...children($el)]
         }),
         resize({
           target: ({ $el }) => [$el, ...children($el)]
@@ -2368,10 +2386,7 @@
           }
           await Promise.all(
             $$(this.target, this.$el).map((target) => {
-              const filterFn = () => {
-                applyState(state, target, children(target));
-                this.$update(this.$el);
-              };
+              const filterFn = () => applyState(state, target, children(target));
               return animate ? this.animate(filterFn, target) : filterFn();
             })
           );
@@ -2390,7 +2405,9 @@
     }
     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;
       if (sort) {
         const sorted = sortItems(children, sort, order);
@@ -3237,6 +3254,7 @@
         }
       }
     }
+    const mutationOptions = { subtree: true, childList: true };
     function registerComputed(instance, key, cb) {
       instance._hasComputed = true;
       Object.defineProperty(instance, key, {
@@ -3245,6 +3263,15 @@
           const { _computed, $props, $el } = instance;
           if (!hasOwn(_computed, key)) {
             _computed[key] = (cb.get || cb).call(instance, $props, $el);
+            if (cb.observe && instance._computedObserver) {
+              const observeEl = cb.observe.call(instance, _computed[key]);
+              if (observeEl && observeEl !== $el) {
+                instance._computedObserver.observe(
+                  findClosestCommonParent(observeEl, $el),
+                  mutationOptions
+                );
+              }
+            }
           }
           return _computed[key];
         },
@@ -3265,11 +3292,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) {
@@ -3277,22 +3309,11 @@
       instance._computed = {};
       return values;
     }
-    let observer;
-    let instances$1;
-    function registerComputedObserver() {
-      if (observer) {
-        return;
+    function findClosestCommonParent(el1, el2) {
+      while (el1 && !el1.contains(el2)) {
+        el1 = el1.parentNode;
       }
-      instances$1 = /* @__PURE__ */ new Set();
-      observer = new MutationObserver(() => {
-        for (const instance of instances$1) {
-          callUpdate(instance, "computed");
-        }
-      });
-      observer.observe(document, {
-        subtree: true,
-        childList: true
-      });
+      return el1;
     }
 
     function initEvents(instance) {
@@ -3363,18 +3384,30 @@
       }
       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 if (observer.observe) {
+              observer.disconnect();
+            }
+          }
         }
         for (const target of targets) {
-          !includes(prev, target) && observer.observe(target);
+          if (!includes(prev, target) || !observer.unobserve) {
+            observer.observe(target, options);
+          }
         }
       };
     }
@@ -3534,26 +3567,26 @@
     };
     App.util = util;
     App.options = {};
-    App.version = "3.19.4";
+    App.version = "3.19.5-dev.3a146179f";
 
     const PREFIX = "uk-";
     const DATA = "__uikit__";
     const components$2 = {};
     function component(name, options) {
-      var _a;
+      var _a, _b;
       const id = PREFIX + hyphenate(name);
       if (!options) {
-        if (isPlainObject(components$2[id])) {
+        if (!components$2[id].options) {
           components$2[id] = App.extend(components$2[id]);
         }
         return components$2[id];
       }
       name = camelize(name);
       App[name] = (element, data) => createComponent(name, element, data);
-      const opt = isPlainObject(options) ? { ...options } : options.options;
+      const opt = (_a = options.options) != null ? _a : { ...options };
       opt.id = id;
       opt.name = name;
-      (_a = opt.install) == null ? void 0 : _a.call(opt, App, opt, name);
+      (_b = opt.install) == null ? void 0 : _b.call(opt, App, opt, name);
       if (App._initialized && !opt.functional) {
         requestAnimationFrame(() => createComponent(name, `[${id}],[data-${id}]`));
       }
@@ -3561,7 +3594,7 @@
     }
     function createComponent(name, element, data, ...args) {
       const Component = component(name);
-      return Component.options.functional ? new Component({ data: isPlainObject(element) ? element : [element, data, ...args] }) : element ? $$(element).map(init)[0] : init();
+      return Component.options.functional ? new Component({ data: isPlainObject(element) ? element : [element, data, ...args] }) : element ? findAll(element).map(init)[0] : init();
       function init(element2) {
         const instance = getComponent(element2, name);
         if (instance) {
@@ -3923,7 +3956,6 @@
           }
         }
       },
-      observe: resize(),
       events: {
         itemshow({ target }) {
           addClass(target, this.clsEnter, this.clsSlideActive);
@@ -4052,6 +4084,7 @@
           return { animation: this.animation };
         }
       },
+      observe: resize(),
       events: {
         beforeitemshow({ target }) {
           addClass(target, this.clsActive);
@@ -4534,18 +4567,10 @@
     }
 
     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) => {
+        var _a;
+        return (_a = stroke.getTotalLength) == null ? void 0 : _a.call(stroke);
+      })));
     }
 
     const props = {
@@ -4749,6 +4774,7 @@
         }
       };
     }
+    const loading = {};
     const dimensions = {};
     function getBackgroundImageDimensions(el) {
       const src = css(el, "backgroundImage").replace(/^none|url\(["']?(.+?)["']?\)$/, "$1");
@@ -4758,11 +4784,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);
         }
       }
@@ -5252,7 +5279,7 @@
         toggleClass(this.$el, this.clsContainer, !$(`.${this.clsContainer}`, this.$el));
       },
       observe: resize({
-        target: ({ slides }) => slides
+        target: ({ slides, $el }) => [$el, ...slides]
       }),
       update: {
         write() {
@@ -5440,7 +5467,7 @@
     var sliderParallax = {
       mixins: [Parallax],
       beforeConnect() {
-        this.item = closest(this.$el, `.${this.$options.id.replace("parallax", "items")} > *`);
+        this.item = this.$el.closest(`.${this.$options.id.replace("parallax", "items")} > *`);
       },
       disconnected() {
         this.item = null;
@@ -6377,14 +6404,14 @@
       if (name) {
         if (hasAttr(target, attributeName)) {
           createComponent(name, target);
-          return;
+        } else {
+          (_a = getComponent(target, name)) == null ? void 0 : _a.$destroy();
         }
-        (_a = getComponent(target, name)) == null ? void 0 : _a.$destroy();
       }
     }
     function connect(node) {
       const components2 = getComponents(node);
-      for (const name in getComponents(node)) {
+      for (const name in components2) {
         callConnected(components2[name]);
       }
       for (const attributeName of node.getAttributeNames()) {
@@ -6394,7 +6421,7 @@
     }
     function disconnect(node) {
       const components2 = getComponents(node);
-      for (const name in getComponents(node)) {
+      for (const name in components2) {
         callDisconnected(components2[name]);
       }
     }
@@ -6403,7 +6430,7 @@
         attribute = attribute.slice(5);
       }
       const cmp = components$2[attribute];
-      return cmp && (isPlainObject(cmp) ? cmp : cmp.options).name;
+      return cmp && (cmp.options || cmp).name;
     }
 
     globalApi(App);
@@ -6856,10 +6883,6 @@
         }
         css(this.$el, this._style);
       },
-      observe: lazyload({
-        target: ({ toggle, $el }) => query(toggle, $el),
-        targets: ({ $el }) => $el
-      }),
       events: [
         {
           name: "click",
@@ -7150,7 +7173,8 @@
           document,
           `${pointerUp$1} ${pointerCancel} scroll`,
           ({ defaultPrevented, type, target: newTarget }) => {
-            if (!defaultPrevented && type === pointerUp$1 && target === newTarget && !(drop.targetEl && within(target, drop.targetEl))) {
+            var _a;
+            if (!defaultPrevented && type === pointerUp$1 && target === newTarget && !((_a = drop.targetEl) == null ? void 0 : _a.contains(target))) {
               drop.hide(false);
             }
           },
@@ -7766,7 +7790,10 @@
         target: ""
       },
       computed: {
-        target: ({ target }, $el) => query(target, $el)
+        target: {
+          get: ({ target }, $el) => query(target, $el),
+          observe: (target) => parent(target)
+        }
       },
       observe: resize({ target: ({ target }) => target }),
       update: {
@@ -7822,7 +7849,7 @@
                 const top = offsetPosition(offsetTopEl)[0] - offsetPosition(scrollElement)[0];
                 minHeight += top > 0 && top < viewportHeight / 2 ? ` - ${top}px` : "";
               } else {
-                minHeight += ` - ${css(scrollElement, "paddingTop")}`;
+                minHeight += ` - ${boxModelAdjust(scrollElement, "height", css(scrollElement, "boxSizing"))}px`;
               }
             }
             if (this.offsetBottom === true) {
@@ -8016,7 +8043,7 @@
       i18n: { toggle: "Open Search", submit: "Submit Search" },
       beforeConnect() {
         const isToggle = hasClass(this.$el, "uk-search-toggle") || hasClass(this.$el, "uk-navbar-toggle");
-        this.icon = isToggle ? "search-toggle-icon" : hasClass(this.$el, "uk-search-icon") && closest(this.$el, ".uk-search-large") ? "search-large" : closest(this.$el, ".uk-search-navbar") ? "search-navbar" : this.$props.icon;
+        this.icon = isToggle ? "search-toggle-icon" : hasClass(this.$el, "uk-search-icon") && this.$el.closest(".uk-search-large") ? "search-large" : this.$el.closest(".uk-search-navbar") ? "search-navbar" : this.$props.icon;
         if (hasAttr(this.$el, "aria-label")) {
           return;
         }
@@ -8160,13 +8187,13 @@
         delete this.img;
       },
       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"
+        filter: ({ loading }) => loading === "lazy",
+        target: ({ $el, $props }) => $props.target ? [$el, ...queryAll($props.target, $el)] : $el
       }),
       methods: {
         load() {
@@ -8256,9 +8283,17 @@
         selActive: false
       },
       computed: {
-        target: ({ target }, $el) => target ? $$(target, $el) : [$el]
+        target: ({ target }, $el) => target ? $$(target, $el) : $el
       },
       observe: [
+        intersection({
+          handler(entries) {
+            this.isIntersecting = entries.some(({ isIntersecting }) => isIntersecting);
+            this.$emit();
+          },
+          target: ({ target }) => target,
+          args: { intersecting: false }
+        }),
         mutation({
           target: ({ target }) => target,
           options: { attributes: true, attributeFilter: ["class"], attributeOldValue: true }
@@ -8266,7 +8301,10 @@
         {
           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,
@@ -8282,6 +8320,8 @@
               })
             ];
             return {
+              observe: observer.observe.bind(observer),
+              unobserve: observer.unobserve.bind(observer),
               disconnect() {
                 observer.disconnect();
                 listener.map((off) => off());
@@ -8295,7 +8335,10 @@
       ],
       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",
@@ -8410,10 +8453,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,
@@ -9445,7 +9489,10 @@
         swiping: true
       },
       computed: {
-        connects: ({ connect }, $el) => queryAll(connect, $el),
+        connects: {
+          get: ({ connect }, $el) => queryAll(connect, $el),
+          observe: (connects) => parent(connects[0])
+        },
         connectChildren() {
           return this.connects.map((el) => children(el)).flat();
         },
@@ -9546,7 +9593,11 @@
       ],
       update() {
         var _a;
-        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) {
           const toggle = this.toggles[index];
@@ -9630,9 +9681,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) => parent(target[0])
         }
       },
       connected() {
@@ -9645,7 +9699,7 @@
           }
         }
       },
-      observe: lazyload({ target: ({ target }) => target }),
+      observe: lazyload({ targets: ({ target }) => target }),
       events: [
         {
           name: pointerDown$1,