uikit 3.20.9-dev.2cb573699 → 3.20.9-dev.2d9611923

package/dist/js/uikit.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.20.9-dev.2cb573699 | https://www.getuikit.com | (c) 2014 - 2024 YOOtheme | MIT License */
+/*! UIkit 3.20.9-dev.2d9611923 | https://www.getuikit.com | (c) 2014 - 2024 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -2352,7 +2352,9 @@
       },
       events: {
         name: "click keydown",
-        delegate: ({ attrItem }) => `[${attrItem}],[data-${attrItem}]`,
+        delegate() {
+          return `[${this.attrItem}],[data-${this.attrItem}]`;
+        },
         handler(e) {
           if (e.type === "keydown" && e.keyCode !== keyMap.SPACE) {
             return;
@@ -2737,7 +2739,9 @@
       events: [
         {
           name: "click",
-          delegate: ({ selClose }) => `${selClose},a[href*="#"]`,
+          delegate() {
+            return `${this.selClose},a[href*="#"]`;
+          },
           handler(e) {
             const { current, defaultPrevented } = e;
             const { hash } = current;
@@ -3035,7 +3039,9 @@
         {
           name: "visibilitychange",
           el: () => document,
-          filter: ({ autoplay }) => autoplay,
+          filter() {
+            return this.autoplay;
+          },
           handler() {
             if (document.hidden) {
               this.stopAutoplay();
@@ -3089,7 +3095,9 @@
         {
           name: pointerDown,
           passive: true,
-          delegate: ({ selList }) => `${selList} > *`,
+          delegate() {
+            return `${this.selList} > *`;
+          },
           handler(e) {
             if (!this.draggable || this.parallax || !isTouch(e) && hasSelectableText(e.target) || e.target.closest(selInput) || e.button > 0 || this.length < 2) {
               return;
@@ -3106,7 +3114,9 @@
         {
           // iOS workaround for slider stopping if swiping fast
           name: pointerMove,
-          el: ({ list }) => list,
+          el() {
+            return this.list;
+          },
           handler: noop,
           ...pointerOptions
         }
@@ -3321,7 +3331,7 @@
     function registerEvent(instance, event, key) {
       let { name, el, handler, capture, passive, delegate, filter, self } = isPlainObject(event) ? event : { name: key, handler: event };
       el = isFunction(el) ? el.call(instance, instance) : el || instance.$el;
-      if (!el || isArray(el) && !el.length || filter && !filter.call(instance, instance)) {
+      if (!el || isArray(el) && !el.length || filter && !filter.call(instance)) {
         return;
       }
       instance._events.push(
@@ -3547,7 +3557,7 @@
     };
     App.util = util;
     App.options = {};
-    App.version = "3.20.9-dev.2cb573699";
+    App.version = "3.20.9-dev.2d9611923";
 
     const PREFIX = "uk-";
     const DATA = "__uikit__";
@@ -3814,8 +3824,12 @@
       events: [
         {
           name: "click keydown",
-          delegate: ({ selNavItem }) => selNavItem,
-          filter: ({ parallax }) => !parallax,
+          delegate() {
+            return this.selNavItem;
+          },
+          filter() {
+            return !this.parallax;
+          },
           handler(e) {
             if (e.target.closest("a,button") && (e.type === "click" || e.keyCode === keyMap.SPACE)) {
               e.preventDefault();
@@ -3829,8 +3843,12 @@
         },
         {
           name: "keydown",
-          delegate: ({ selNavItem }) => selNavItem,
-          filter: ({ parallax }) => !parallax,
+          delegate() {
+            return this.selNavItem;
+          },
+          filter() {
+            return !this.parallax;
+          },
           handler(e) {
             const { current, keyCode } = e;
             const cmd = data(current, this.attrItem);
@@ -4151,7 +4169,9 @@
         {
           name: "click",
           self: true,
-          delegate: ({ selList }) => `${selList} > *`,
+          delegate() {
+            return `${this.selList} > *`;
+          },
           handler(e) {
             if (!e.defaultPrevented) {
               this.hide();
@@ -4365,7 +4385,9 @@
       },
       events: {
         name: "click",
-        delegate: ({ toggle }) => `${toggle}:not(.uk-disabled)`,
+        delegate() {
+          return `${this.toggle}:not(.uk-disabled)`;
+        },
         handler(e) {
           e.preventDefault();
           this.show(e.current);
@@ -5449,7 +5471,9 @@
         {
           name: "itemin itemout",
           self: true,
-          el: ({ item }) => item,
+          el() {
+            return this.item;
+          },
           handler({ type, detail: { percent, duration, timing, dir } }) {
             fastdom.read(() => {
               if (!this.matchMedia) {
@@ -5467,7 +5491,9 @@
         {
           name: "transitioncanceled transitionend",
           self: true,
-          el: ({ item }) => item,
+          el() {
+            return this.item;
+          },
           handler() {
             Transition.cancel(this.$el);
           }
@@ -5475,7 +5501,9 @@
         {
           name: "itemtranslatein itemtranslateout",
           self: true,
-          el: ({ item }) => item,
+          el() {
+            return this.item;
+          },
           handler({ type, detail: { percent, dir } }) {
             fastdom.read(() => {
               if (!this.matchMedia) {
@@ -6473,7 +6501,9 @@
       events: [
         {
           name: "click keydown",
-          delegate: ({ targets, $props }) => `${targets} ${$props.toggle}`,
+          delegate() {
+            return `${this.targets} ${this.$props.toggle}`;
+          },
           async handler(e) {
             var _a;
             if (e.type === "keydown" && e.keyCode !== keyMap.SPACE) {
@@ -6489,7 +6519,9 @@
         {
           name: "shown hidden",
           self: true,
-          delegate: ({ targets }) => targets,
+          delegate() {
+            return this.targets;
+          },
           handler() {
             this.$emit();
           }
@@ -6598,7 +6630,9 @@
       },
       events: {
         name: "click",
-        delegate: ({ selClose }) => selClose,
+        delegate() {
+          return this.selClose;
+        },
         handler(e) {
           e.preventDefault();
           this.close();
@@ -6662,7 +6696,9 @@
       events: [
         {
           name: `${pointerEnter} focusin`,
-          filter: ({ autoplay }) => includes(autoplay, "hover"),
+          filter() {
+            return includes(this.autoplay, "hover");
+          },
           handler(e) {
             if (!isTouch(e) || !isPlaying(this.$el)) {
               play(this.$el);
@@ -6673,7 +6709,9 @@
         },
         {
           name: `${pointerLeave} focusout`,
-          filter: ({ autoplay }) => includes(autoplay, "hover"),
+          filter() {
+            return includes(this.autoplay, "hover");
+          },
           handler(e) {
             if (!isTouch(e)) {
               pause(this.$el);
@@ -6711,16 +6749,18 @@
       data: {
         automute: true
       },
-      created() {
-        this.useObjectFit = isTag(this.$el, "img", "video");
+      events: {
+        "load loadedmetadata"() {
+          this.$emit("resize");
+        }
       },
       observe: resize({
-        target: ({ $el }) => getPositionedParent($el) || parent($el),
-        filter: ({ useObjectFit }) => !useObjectFit
+        target: ({ $el }) => [getPositionedParent($el) || parent($el)],
+        filter: ({ $el }) => !useObjectFit($el)
       }),
       update: {
         read() {
-          if (this.useObjectFit) {
+          if (useObjectFit(this.$el)) {
             return false;
           }
           const { ratio, cover } = Dimensions;
@@ -6762,6 +6802,9 @@
         }
       }
     }
+    function useObjectFit(el) {
+      return isTag(el, "img", "video");
+    }
 
     let active;
     var drop = {
@@ -6826,7 +6869,7 @@
         this.tracker = new MouseTracker();
       },
       beforeConnect() {
-        this.clsDrop = this.$props.clsDrop || this.$options.id;
+        this.clsDrop = this.$props.clsDrop || `uk-${this.$options.name}`;
       },
       connected() {
         addClass(this.$el, "uk-drop", this.clsDrop);
@@ -6845,7 +6888,9 @@
       events: [
         {
           name: "click",
-          delegate: () => ".uk-drop-close",
+          delegate() {
+            return ".uk-drop-close";
+          },
           handler(e) {
             e.preventDefault();
             this.hide(false);
@@ -6853,7 +6898,9 @@
         },
         {
           name: "click",
-          delegate: () => 'a[href*="#"]',
+          delegate() {
+            return 'a[href*="#"]';
+          },
           handler({ defaultPrevented, current }) {
             const { hash } = current;
             if (!defaultPrevented && hash && isSameSiteAnchor(current) && !this.$el.contains($(hash))) {
@@ -6899,7 +6946,9 @@
         },
         {
           name: `${pointerEnter} focusin`,
-          filter: ({ mode }) => includes(mode, "hover"),
+          filter() {
+            return includes(this.mode, "hover");
+          },
           handler(e) {
             if (!isTouch(e)) {
               this.clearTimers();
@@ -6908,7 +6957,9 @@
         },
         {
           name: `${pointerLeave} focusout`,
-          filter: ({ mode }) => includes(mode, "hover"),
+          filter() {
+            return includes(this.mode, "hover");
+          },
           handler(e) {
             if (!isTouch(e) && e.relatedTarget) {
               this.hide();
@@ -7219,7 +7270,9 @@
       events: [
         {
           name: "mouseover focusin",
-          delegate: ({ selNavItem }) => selNavItem,
+          delegate() {
+            return this.selNavItem;
+          },
           handler({ current }) {
             const active2 = this.getActive();
             if (active2 && includes(active2.mode, "hover") && active2.targetEl && !current.contains(active2.targetEl) && !active2.isDelaying) {
@@ -7230,7 +7283,9 @@
         {
           name: "keydown",
           self: true,
-          delegate: ({ selNavItem }) => selNavItem,
+          delegate() {
+            return this.selNavItem;
+          },
           handler(e) {
             var _a;
             const { current, keyCode } = e;
@@ -7244,8 +7299,12 @@
         },
         {
           name: "keydown",
-          el: ({ dropContainer }) => dropContainer,
-          delegate: ({ clsDrop }) => `.${clsDrop}`,
+          el() {
+            return this.dropContainer;
+          },
+          delegate() {
+            return `.${this.clsDrop}`;
+          },
           handler(e) {
             var _a;
             const { current, keyCode } = e;
@@ -7279,8 +7338,12 @@
         },
         {
           name: "mouseleave",
-          el: ({ dropbar }) => dropbar,
-          filter: ({ dropbar }) => dropbar,
+          el() {
+            return this.dropbar;
+          },
+          filter() {
+            return this.dropbar;
+          },
           handler() {
             const active2 = this.getActive();
             if (active2 && includes(active2.mode, "hover") && !this.dropdowns.some((el) => matches(el, ":hover"))) {
@@ -7290,8 +7353,12 @@
         },
         {
           name: "beforeshow",
-          el: ({ dropContainer }) => dropContainer,
-          filter: ({ dropbar }) => dropbar,
+          el() {
+            return this.dropContainer;
+          },
+          filter() {
+            return this.dropbar;
+          },
           handler({ target }) {
             if (!this.isDropbarDrop(target)) {
               return;
@@ -7304,8 +7371,12 @@
         },
         {
           name: "show",
-          el: ({ dropContainer }) => dropContainer,
-          filter: ({ dropbar }) => dropbar,
+          el() {
+            return this.dropContainer;
+          },
+          filter() {
+            return this.dropbar;
+          },
           handler({ target }) {
             if (!this.isDropbarDrop(target)) {
               return;
@@ -7330,8 +7401,12 @@
         },
         {
           name: "beforehide",
-          el: ({ dropContainer }) => dropContainer,
-          filter: ({ dropbar }) => dropbar,
+          el() {
+            return this.dropContainer;
+          },
+          filter() {
+            return this.dropbar;
+          },
           handler(e) {
             const active2 = this.getActive();
             if (matches(this.dropbar, ":hover") && active2.$el === e.target && this.isDropbarDrop(active2.$el) && includes(active2.mode, "hover") && active2.isDelayedHide && !this.items.some((el) => active2.targetEl !== el && matches(el, ":focus"))) {
@@ -7341,8 +7416,12 @@
         },
         {
           name: "hide",
-          el: ({ dropContainer }) => dropContainer,
-          filter: ({ dropbar }) => dropbar,
+          el() {
+            return this.dropContainer;
+          },
+          filter() {
+            return this.dropbar;
+          },
           handler({ target }) {
             var _a;
             if (!this.isDropbarDrop(target)) {
@@ -7473,7 +7552,9 @@
         },
         {
           name: "reset",
-          el: ({ $el }) => $el.closest("form"),
+          el() {
+            return this.$el.closest("form");
+          },
           handler() {
             this.$emit();
           }
@@ -7656,7 +7737,9 @@
       events: {
         // Hidden elements may change height when fonts load
         name: "loadingdone",
-        el: () => document.fonts,
+        el() {
+          return document.fonts;
+        },
         handler() {
           this.$emit("resize");
         }
@@ -8488,7 +8571,9 @@
       events: [
         {
           name: "show",
-          el: ({ dropContainer }) => dropContainer,
+          el() {
+            return this.dropContainer;
+          },
           handler({ target }) {
             if (this.getTransparentMode(target) === "remove" && hasClass(this.navbarContainer, clsNavbarTransparent)) {
               removeClass(this.navbarContainer, clsNavbarTransparent);
@@ -8498,7 +8583,9 @@
         },
         {
           name: "hide",
-          el: ({ dropContainer }) => dropContainer,
+          el() {
+            return this.dropContainer;
+          },
           async handler() {
             await awaitMacroTask();
             if (!this.getActive() && this._transparent) {
@@ -8580,7 +8667,9 @@
           name: "touchmove",
           self: true,
           passive: false,
-          filter: ({ overlay }) => overlay,
+          filter() {
+            return this.overlay;
+          },
           handler(e) {
             e.cancelable && e.preventDefault();
           }
@@ -9000,8 +9089,12 @@
       events: [
         {
           name: "load hashchange popstate",
-          el: () => window,
-          filter: ({ targetOffset }) => targetOffset !== false,
+          el() {
+            return window;
+          },
+          filter() {
+            return this.targetOffset !== false;
+          },
           handler() {
             const { scrollingElement } = document;
             if (!location.hash || scrollingElement.scrollTop === 0) {
@@ -9443,7 +9536,9 @@
       events: [
         {
           name: "click keydown",
-          delegate: ({ toggle }) => toggle,
+          delegate() {
+            return this.toggle;
+          },
           handler(e) {
             if (!matches(e.current, selDisabled) && (e.type === "click" || e.keyCode === keyMap.SPACE)) {
               e.preventDefault();
@@ -9453,7 +9548,9 @@
         },
         {
           name: "keydown",
-          delegate: ({ toggle }) => toggle,
+          delegate() {
+            return this.toggle;
+          },
           handler(e) {
             const { current, keyCode } = e;
             const isVertical = matches(this.$el, this.selVertical);
@@ -9471,8 +9568,12 @@
         },
         {
           name: "click",
-          el: ({ $el, connects, itemNav }) => connects.concat(itemNav ? queryAll(itemNav, $el) : []),
-          delegate: ({ attrItem }) => `[${attrItem}],[data-${attrItem}]`,
+          el() {
+            return this.connects.concat(this.itemNav ? queryAll(this.itemNav, this.$el) : []);
+          },
+          delegate() {
+            return `[${this.attrItem}],[data-${this.attrItem}]`;
+          },
           handler(e) {
             if (e.target.closest("a,button")) {
               e.preventDefault();
@@ -9482,8 +9583,12 @@
         },
         {
           name: "swipeRight swipeLeft",
-          filter: ({ swiping }) => swiping,
-          el: ({ connects }) => connects,
+          filter() {
+            return this.swiping;
+          },
+          el() {
+            return this.connects;
+          },
           handler({ type }) {
             this.show(endsWith(type, "Left") ? "next" : "previous");
           }
@@ -9602,7 +9707,9 @@
       events: [
         {
           name: pointerDown$1,
-          filter: ({ mode }) => includes(mode, "hover"),
+          filter() {
+            return includes(this.mode, "hover");
+          },
           handler(e) {
             this._preventClick = null;
             if (!isTouch(e) || isBoolean(this._showState) || this.$el.disabled) {
@@ -9625,7 +9732,9 @@
           // mouseenter mouseleave are added because of Firefox bug,
           // where pointerleave is triggered immediately after pointerenter on scroll
           name: `mouseenter mouseleave ${pointerEnter} ${pointerLeave} focus blur`,
-          filter: ({ mode }) => includes(mode, "hover"),
+          filter() {
+            return includes(this.mode, "hover");
+          },
           handler(e) {
             if (isTouch(e) || this.$el.disabled) {
               return;
@@ -9647,7 +9756,9 @@
         },
         {
           name: "keydown",
-          filter: ({ $el, mode }) => includes(mode, "click") && !isTag($el, "input"),
+          filter() {
+            return includes(this.mode, "click") && !isTag(this.$el, "input");
+          },
           handler(e) {
             if (e.keyCode === KEY_SPACE) {
               e.preventDefault();
@@ -9657,7 +9768,9 @@
         },
         {
           name: "click",
-          filter: ({ mode }) => ["click", "hover"].some((m) => includes(mode, m)),
+          filter() {
+            return ["click", "hover"].some((mode) => includes(this.mode, mode));
+          },
           handler(e) {
             let link;
             if (this._preventClick || e.target.closest('a[href="#"], a[href=""]') || (link = e.target.closest("a[href]")) && (!this.isToggled(this.target) || link.hash && matches(this.target, link.hash))) {
@@ -9670,8 +9783,12 @@
         },
         {
           name: "mediachange",
-          filter: ({ mode }) => includes(mode, "media"),
-          el: ({ target }) => target,
+          filter() {
+            return includes(this.mode, "media");
+          },
+          el() {
+            return this.target;
+          },
           handler(e, mediaObj) {
             if (mediaObj.matches ^ this.isToggled(this.target)) {
               this.toggle();