uikit 3.20.9-dev.449143287 → 3.20.9-dev.76ecfef9e

package/dist/js/uikit.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.20.9-dev.449143287 | https://www.getuikit.com | (c) 2014 - 2024 YOOtheme | MIT License */
+/*! UIkit 3.20.9-dev.76ecfef9e | https://www.getuikit.com | (c) 2014 - 2024 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -310,7 +310,7 @@
     const isVisibleFn = inBrowser && Element.prototype.checkVisibility || function() {
       return this.offsetWidth || this.offsetHeight || this.getClientRects().length;
     };
-    function isVisible(element) {
+    function isVisible$1(element) {
       return toNodes(element).some((element2) => isVisibleFn.call(element2));
     }
     const selInput = "input,select,textarea,button";
@@ -1199,7 +1199,7 @@
     }
 
     function isInView(element, offsetTop = 0, offsetLeft = 0) {
-      if (!isVisible(element)) {
+      if (!isVisible$1(element)) {
         return false;
       }
       return intersectRect(
@@ -1215,7 +1215,7 @@
       );
     }
     function scrollIntoView(element, { offset: offsetBy = 0 } = {}) {
-      const parents2 = isVisible(element) ? scrollParents(element, false, ["hidden"]) : [];
+      const parents2 = isVisible$1(element) ? scrollParents(element, false, ["hidden"]) : [];
       return parents2.reduce(
         (fn, scrollElement, i) => {
           const { scrollTop, scrollHeight, offsetHeight } = scrollElement;
@@ -1274,7 +1274,7 @@
       }
     }
     function scrolledOver(element, startOffset = 0, endOffset = 0) {
-      if (!isVisible(element)) {
+      if (!isVisible$1(element)) {
         return 0;
       }
       const scrollElement = scrollParent(element, true);
@@ -1324,7 +1324,7 @@
         ["height", "y", "top", "bottom"]
       ]) {
         if (isWindow(viewportElement)) {
-          viewportElement = scrollElement.ownerDocument;
+          viewportElement = viewportElement.document;
         } else {
           rect[start] += toFloat(css(viewportElement, `border-${start}-width`));
         }
@@ -1336,17 +1336,16 @@
     }
     function getCoveringElement(target) {
       const { left, width, top } = dimensions$1(target);
-      for (const topPosition of [0, top]) {
-        const coverEl = target.ownerDocument.elementsFromPoint(left + width / 2, topPosition).find(
-          (el) => !el.contains(target) && // If e.g. Offcanvas is not yet closed
+      for (const position of top ? [0, top] : [0]) {
+        for (const el of toWindow(target).document.elementsFromPoint(left + width / 2, position)) {
+          if (!el.contains(target) && // If e.g. Offcanvas is not yet closed
           !hasClass(el, "uk-togglable-leave") && (hasPosition(el, "fixed") && zIndex(
             parents(target).reverse().find(
               (parent2) => !parent2.contains(el) && !hasPosition(parent2, "static")
             )
-          ) < zIndex(el) || hasPosition(el, "sticky") && parent(el).contains(target))
-        );
-        if (coverEl) {
-          return coverEl;
+          ) < zIndex(el) || hasPosition(el, "sticky") && parent(el).contains(target))) {
+            return el;
+          }
         }
       }
     }
@@ -1611,7 +1610,7 @@
         isTouch: isTouch,
         isUndefined: isUndefined,
         isVideo: isVideo,
-        isVisible: isVisible,
+        isVisible: isVisible$1,
         isVoidElement: isVoidElement,
         isWindow: isWindow,
         last: last,
@@ -2065,7 +2064,7 @@
         (el, i) => i && elements[i - 1].offsetParent !== el.offsetParent
       );
       for (const el of elements) {
-        if (!isVisible(el)) {
+        if (!isVisible$1(el)) {
           continue;
         }
         const offset = getOffset(el, withOffset);
@@ -2149,7 +2148,7 @@
     }
     function getProps$1(el, opacity) {
       const zIndex = css(el, "zIndex");
-      return isVisible(el) ? {
+      return isVisible$1(el) ? {
         display: "",
         opacity: opacity ? css(el, "opacity") : "0",
         pointerEvents: "none",
@@ -2160,7 +2159,7 @@
     }
     function getTransitionProps(target, nodes, currentProps) {
       const propsTo = nodes.map(
-        (el, i) => parent(el) && i in currentProps ? currentProps[i] ? isVisible(el) ? getPositionWithMargin(el) : { opacity: 0 } : { opacity: isVisible(el) ? 1 : 0 } : false
+        (el, i) => parent(el) && i in currentProps ? currentProps[i] ? isVisible$1(el) ? getPositionWithMargin(el) : { opacity: 0 } : { opacity: isVisible$1(el) ? 1 : 0 } : false
       );
       const propsFrom = propsTo.map((props, i) => {
         const from = parent(nodes[i]) === target && (currentProps[i] || getProps$1(nodes[i]));
@@ -2274,7 +2273,7 @@
       );
     }
     function getTransitionNodes(target) {
-      return getRows(children(target)).flat().filter(isVisible);
+      return getRows(children(target)).flat().filter(isVisible$1);
     }
     function awaitTimeout(timeout) {
       return new Promise((resolve) => setTimeout(resolve, timeout));
@@ -2572,7 +2571,7 @@
         },
         isToggled(el = this.$el) {
           el = toNode(el);
-          return hasClass(el, this.clsEnter) ? true : hasClass(el, this.clsLeave) ? false : this.cls ? hasClass(el, this.cls.split(" ")[0]) : isVisible(el);
+          return hasClass(el, this.clsEnter) ? true : hasClass(el, this.clsLeave) ? false : this.cls ? hasClass(el, this.cls.split(" ")[0]) : isVisible$1(el);
         },
         _toggle(el, toggled) {
           if (!el) {
@@ -2587,7 +2586,7 @@
             changed = toggled === el.hidden;
             changed && (el.hidden = !toggled);
           }
-          $$("[autofocus]", el).some((el2) => isVisible(el2) ? el2.focus() || true : el2.blur());
+          $$("[autofocus]", el).some((el2) => isVisible$1(el2) ? el2.focus() || true : el2.blur());
           if (changed) {
             trigger(el, "toggled", [toggled, this]);
           }
@@ -2974,6 +2973,9 @@
           return this.show(duration, percent2, true);
         },
         translate(percent2) {
+          if (percent2 === this.percent()) {
+            return;
+          }
           this.reset();
           const props2 = translate(percent2, dir);
           css(next, props2[1]);
@@ -3555,7 +3557,7 @@
     };
     App.util = util;
     App.options = {};
-    App.version = "3.20.9-dev.449143287";
+    App.version = "3.20.9-dev.76ecfef9e";
 
     const PREFIX = "uk-";
     const DATA = "__uikit__";
@@ -3610,7 +3612,7 @@
     function detachFromElement(element, instance) {
       var _a;
       (_a = element[DATA]) == null ? true : delete _a[instance.$options.name];
-      if (!isEmpty(element[DATA])) {
+      if (isEmpty(element[DATA])) {
         delete element[DATA];
       }
     }
@@ -4557,7 +4559,7 @@
     }
 
     function getMaxPathLength(el) {
-      return isVisible(el) ? Math.ceil(Math.max(0, ...$$("[stroke]", el).map((stroke) => stroke.getTotalLength()))) : 0;
+      return isVisible$1(el) ? Math.ceil(Math.max(0, ...$$("[stroke]", el).map((stroke) => stroke.getTotalLength()))) : 0;
     }
 
     const props = {
@@ -4904,7 +4906,7 @@
           if (!types.has("scroll")) {
             percent = false;
           }
-          if (!isVisible(this.$el)) {
+          if (!isVisible$1(this.$el)) {
             return false;
           }
           if (!this.matchMedia) {
@@ -4959,15 +4961,18 @@
         }
       },
       update: {
-        write() {
+        read() {
           if (!this.parallax) {
-            return;
+            return false;
           }
           const target = this.parallaxTarget;
           const start = toPx(this.parallaxStart, "height", target, true);
           const end = toPx(this.parallaxEnd, "height", target, true);
           const percent = ease(scrolledOver(target, start, end), this.parallaxEasing);
-          const [prevIndex, slidePercent] = this.getIndexAt(percent);
+          return { parallax: this.getIndexAt(percent) };
+        },
+        write({ parallax }) {
+          const [prevIndex, slidePercent] = parallax;
           const nextIndex = this.getValidIndex(prevIndex + Math.ceil(slidePercent));
           const prev = this.slides[prevIndex];
           const next = this.slides[nextIndex];
@@ -5107,6 +5112,9 @@
           return this.show(duration, percent, true);
         },
         translate(percent) {
+          if (percent === this.percent()) {
+            return;
+          }
           const distance = this.getDistance() * dir * (isRtl ? -1 : 1);
           css(
             list,
@@ -5259,7 +5267,7 @@
           };
         },
         slides() {
-          return children(this.list).filter(isVisible);
+          return children(this.list).filter(isVisible$1);
         }
       },
       connected() {
@@ -5325,7 +5333,7 @@
               this.dir > 0 && i < index ? 1 : this.dir < 0 && i >= this.index ? -1 : ""
             )
           );
-          if (!this.center) {
+          if (!this.center || !this.length) {
             return;
           }
           const next = this.slides[index];
@@ -7640,11 +7648,8 @@
         },
         {
           read({ rows, scrollColumns, parallaxStart, parallaxEnd }) {
-            if (scrollColumns && positionedAbsolute(rows)) {
-              return false;
-            }
             return {
-              scrolled: scrollColumns ? scrolledOver(this.$el, parallaxStart, parallaxEnd) : false
+              scrolled: scrollColumns && !positionedAbsolute(rows) ? scrolledOver(this.$el, parallaxStart, parallaxEnd) : false
             };
           },
           write({ columns, scrolled, scrollColumns, translates }) {
@@ -7766,7 +7771,7 @@
     }
     function getHeight(element) {
       const style = pick(element.style, ["display", "minHeight"]);
-      if (!isVisible(element)) {
+      if (!isVisible$1(element)) {
         css(element, "display", "block", "important");
       }
       css(element, "minHeight", "");
@@ -7792,7 +7797,7 @@
       observe: resize({ target: ({ target }) => target }),
       update: {
         read() {
-          return { height: this.target.offsetHeight };
+          return this.target ? { height: this.target.offsetHeight } : false;
         },
         write({ height }) {
           css(this.$el, { minHeight: height });
@@ -7821,7 +7826,7 @@
       ],
       update: {
         read() {
-          if (!isVisible(this.$el)) {
+          if (!isVisible$1(this.$el)) {
             return false;
           }
           let minHeight = "";
@@ -8347,11 +8352,11 @@
       let last;
       for (const percent of [0.25, 0.5, 0.75]) {
         const elements = target.ownerDocument.elementsFromPoint(
-          Math.max(0, left) + width * percent,
-          Math.max(0, top) + height / 2
+          Math.max(0, left + width * percent),
+          Math.max(0, top + height / 2)
         );
         for (const element of elements) {
-          if (target.contains(element) || element.closest('[class*="-leave"]') && elements.some((el) => element !== el && matches(el, '[class*="-enter"]'))) {
+          if (target.contains(element) || !isVisible(element) || element.closest('[class*="-leave"]') && elements.some((el) => element !== el && matches(el, '[class*="-enter"]'))) {
             continue;
           }
           const color = css(element, "--uk-inverse");
@@ -8366,6 +8371,18 @@
       }
       return last ? `uk-${last}` : "";
     }
+    function isVisible(element) {
+      if (css(element, "visibility") !== "visible") {
+        return false;
+      }
+      while (element) {
+        if (css(element, "opacity") === "0") {
+          return false;
+        }
+        element = parent(element);
+      }
+      return true;
+    }
 
     var leader = {
       mixins: [Class, Media],
@@ -8479,13 +8496,14 @@
       };
       modal.prompt = function(message, value, options) {
         const promise = openDialog(
-          ({ i18n }) => `<form class="uk-form-stacked"> <div class="uk-modal-body"> <label>${isString(message) ? message : html(message)}</label> <input class="uk-input" value="${value || ""}" autofocus> </div> <div class="uk-modal-footer uk-text-right"> <button class="uk-button uk-button-default uk-modal-close" type="button">${i18n.cancel}</button> <button class="uk-button uk-button-primary">${i18n.ok}</button> </div> </form>`,
+          ({ i18n }) => `<form class="uk-form-stacked"> <div class="uk-modal-body"> <label>${isString(message) ? message : html(message)}</label> <input class="uk-input" autofocus> </div> <div class="uk-modal-footer uk-text-right"> <button class="uk-button uk-button-default uk-modal-close" type="button">${i18n.cancel}</button> <button class="uk-button uk-button-primary">${i18n.ok}</button> </div> </form>`,
           options,
           () => null,
           () => input.value
         );
         const { $el } = promise.dialog;
         const input = $("input", $el);
+        input.value = value || "";
         on($el, "show", () => input.select());
         return promise;
       };
@@ -8638,7 +8656,7 @@
       observe: swipe({ filter: ({ swiping }) => swiping }),
       update: {
         read() {
-          if (this.isToggled() && !isVisible(this.$el)) {
+          if (this.isToggled() && !isVisible$1(this.$el)) {
             this.hide();
           }
         },
@@ -8745,7 +8763,7 @@
       }),
       update: {
         read() {
-          if (!this.content || !this.container || !isVisible(this.$el)) {
+          if (!this.content || !this.container || !isVisible$1(this.$el)) {
             return false;
           }
           return {
@@ -8902,12 +8920,12 @@
       ],
       methods: {
         toggle(el, inview) {
-          var _a;
-          const state = this.elementData.get(el);
+          var _a, _b;
+          const state = (_a = this.elementData) == null ? void 0 : _a.get(el);
           if (!state) {
             return;
           }
-          (_a = state.off) == null ? void 0 : _a.call(state);
+          (_b = state.off) == null ? void 0 : _b.call(state);
           css(el, "opacity", !inview && this.hidden ? 0 : "");
           toggleClass(el, this.inViewClass, inview);
           toggleClass(el, state.cls);
@@ -8961,7 +8979,7 @@
           read() {
             const targets = this.links.map(getTargetedElement).filter(Boolean);
             const { length } = targets;
-            if (!length || !isVisible(this.$el)) {
+            if (!length || !isVisible$1(this.$el)) {
               return false;
             }
             const scrollElement = scrollParent(targets, true);
@@ -8972,9 +8990,8 @@
             if (scrollTop === max) {
               active = length - 1;
             } else {
+              const offsetBy = this.offset + offset(getCoveringElement()).height;
               for (let i = 0; i < targets.length; i++) {
-                const fixedEl = getCoveringElement(targets[i]);
-                const offsetBy = this.offset + (fixedEl ? offset(fixedEl).height : 0);
                 if (offset(targets[i]).top - viewport.top - offsetBy > 0) {
                   break;
                 }
@@ -9057,19 +9074,17 @@
         this.placeholder = null;
       },
       observe: [
-        viewport({
-          handler() {
-            if (toPx("100vh", "height") !== this._data.viewport) {
-              this.$emit("resize");
-            }
-          }
-        }),
+        viewport(),
         scroll$1({ target: () => document.scrollingElement }),
         resize({
-          target: () => document.scrollingElement,
-          options: { box: "content-box" }
-        }),
-        resize()
+          target: ({ $el }) => [$el, parent($el), document.scrollingElement],
+          handler(entries) {
+            this.$emit(
+              this._data.resized && entries.some(({ target }) => target === parent(this.$el)) ? "update" : "resize"
+            );
+            this._data.resized = true;
+          }
+        })
       ],
       events: [
         {
@@ -9095,26 +9110,16 @@
               }
             });
           }
-        },
-        {
-          name: "transitionstart",
-          handler() {
-            this.transitionInProgress = once(
-              this.$el,
-              "transitionend transitioncancel",
-              () => this.transitionInProgress = null
-            );
-          }
         }
       ],
       update: [
         {
-          read({ height: height$1, width, margin, sticky }) {
-            this.inactive = !this.matchMedia || !isVisible(this.$el);
+          read({ height: height$1, width, margin, sticky }, types) {
+            this.inactive = !this.matchMedia || !isVisible$1(this.$el);
             if (this.inactive) {
               return;
             }
-            const hide = this.isFixed && !this.transitionInProgress;
+            const hide = this.isFixed && types.has("update");
             if (hide) {
               preventTransition(this.target);
               this.hide();
@@ -9164,7 +9169,8 @@
               margin,
               top: offsetPosition(referenceElement)[0],
               sticky,
-              viewport: viewport2
+              viewport: viewport2,
+              maxScrollHeight
             };
           },
           write({ height, width, margin, offset, sticky }) {
@@ -9197,9 +9203,10 @@
             end,
             elHeight,
             height,
-            sticky
+            sticky,
+            maxScrollHeight
           }) {
-            const scroll2 = document.scrollingElement.scrollTop;
+            const scroll2 = Math.min(document.scrollingElement.scrollTop, maxScrollHeight);
             const dir = prevScroll <= scroll2 ? "down" : "up";
             const referenceElement = this.isFixed ? this.placeholder : this.$el;
             return {
@@ -9356,9 +9363,12 @@
     function reset(el) {
       css(el, { position: "", top: "", marginTop: "", width: "" });
     }
-    function preventTransition(el) {
-      addClass(el, "uk-transition-disable");
-      requestAnimationFrame(() => removeClass(el, "uk-transition-disable"));
+    const clsTransitionDisable = "uk-transition-disable";
+    function preventTransition(element) {
+      if (!hasClass(element, clsTransitionDisable)) {
+        addClass(element, clsTransitionDisable);
+        requestAnimationFrame(() => removeClass(element, clsTransitionDisable));
+      }
     }
 
     var svg = {