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

package/dist/js/uikit-core.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() :
@@ -1838,7 +1838,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(
@@ -2171,7 +2171,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__";
@@ -2750,7 +2750,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) {
@@ -2766,7 +2768,9 @@
         {
           name: "shown hidden",
           self: true,
-          delegate: ({ targets }) => targets,
+          delegate() {
+            return this.targets;
+          },
           handler() {
             this.$emit();
           }
@@ -2875,7 +2879,9 @@
       },
       events: {
         name: "click",
-        delegate: ({ selClose }) => selClose,
+        delegate() {
+          return this.selClose;
+        },
         handler(e) {
           e.preventDefault();
           this.close();
@@ -2939,7 +2945,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);
@@ -2950,7 +2958,9 @@
         },
         {
           name: `${pointerLeave} focusout`,
-          filter: ({ autoplay }) => includes(autoplay, "hover"),
+          filter() {
+            return includes(this.autoplay, "hover");
+          },
           handler(e) {
             if (!isTouch(e)) {
               pause(this.$el);
@@ -2988,16 +2998,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;
@@ -3039,6 +3051,9 @@
         }
       }
     }
+    function useObjectFit(el) {
+      return isTag(el, "img", "video");
+    }
 
     var Container = {
       props: {
@@ -3240,7 +3255,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);
@@ -3259,7 +3274,9 @@
       events: [
         {
           name: "click",
-          delegate: () => ".uk-drop-close",
+          delegate() {
+            return ".uk-drop-close";
+          },
           handler(e) {
             e.preventDefault();
             this.hide(false);
@@ -3267,7 +3284,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))) {
@@ -3313,7 +3332,9 @@
         },
         {
           name: `${pointerEnter} focusin`,
-          filter: ({ mode }) => includes(mode, "hover"),
+          filter() {
+            return includes(this.mode, "hover");
+          },
           handler(e) {
             if (!isTouch(e)) {
               this.clearTimers();
@@ -3322,7 +3343,9 @@
         },
         {
           name: `${pointerLeave} focusout`,
-          filter: ({ mode }) => includes(mode, "hover"),
+          filter() {
+            return includes(this.mode, "hover");
+          },
           handler(e) {
             if (!isTouch(e) && e.relatedTarget) {
               this.hide();
@@ -3633,7 +3656,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) {
@@ -3644,7 +3669,9 @@
         {
           name: "keydown",
           self: true,
-          delegate: ({ selNavItem }) => selNavItem,
+          delegate() {
+            return this.selNavItem;
+          },
           handler(e) {
             var _a;
             const { current, keyCode } = e;
@@ -3658,8 +3685,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;
@@ -3693,8 +3724,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"))) {
@@ -3704,8 +3739,12 @@
         },
         {
           name: "beforeshow",
-          el: ({ dropContainer }) => dropContainer,
-          filter: ({ dropbar }) => dropbar,
+          el() {
+            return this.dropContainer;
+          },
+          filter() {
+            return this.dropbar;
+          },
           handler({ target }) {
             if (!this.isDropbarDrop(target)) {
               return;
@@ -3718,8 +3757,12 @@
         },
         {
           name: "show",
-          el: ({ dropContainer }) => dropContainer,
-          filter: ({ dropbar }) => dropbar,
+          el() {
+            return this.dropContainer;
+          },
+          filter() {
+            return this.dropbar;
+          },
           handler({ target }) {
             if (!this.isDropbarDrop(target)) {
               return;
@@ -3744,8 +3787,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"))) {
@@ -3755,8 +3802,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)) {
@@ -3887,7 +3938,9 @@
         },
         {
           name: "reset",
-          el: ({ $el }) => $el.closest("form"),
+          el() {
+            return this.$el.closest("form");
+          },
           handler() {
             this.$emit();
           }
@@ -4166,7 +4219,9 @@
       events: {
         // Hidden elements may change height when fonts load
         name: "loadingdone",
-        el: () => document.fonts,
+        el() {
+          return document.fonts;
+        },
         handler() {
           this.$emit("resize");
         }
@@ -4949,7 +5004,9 @@
       events: [
         {
           name: "click",
-          delegate: ({ selClose }) => `${selClose},a[href*="#"]`,
+          delegate() {
+            return `${this.selClose},a[href*="#"]`;
+          },
           handler(e) {
             const { current, defaultPrevented } = e;
             const { hash } = current;
@@ -5267,7 +5324,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);
@@ -5277,7 +5336,9 @@
         },
         {
           name: "hide",
-          el: ({ dropContainer }) => dropContainer,
+          el() {
+            return this.dropContainer;
+          },
           async handler() {
             await awaitMacroTask();
             if (!this.getActive() && this._transparent) {
@@ -5359,7 +5420,9 @@
           name: "touchmove",
           self: true,
           passive: false,
-          filter: ({ overlay }) => overlay,
+          filter() {
+            return this.overlay;
+          },
           handler(e) {
             e.cancelable && e.preventDefault();
           }
@@ -5779,8 +5842,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) {
@@ -6226,7 +6293,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();
@@ -6236,7 +6305,9 @@
         },
         {
           name: "keydown",
-          delegate: ({ toggle }) => toggle,
+          delegate() {
+            return this.toggle;
+          },
           handler(e) {
             const { current, keyCode } = e;
             const isVertical = matches(this.$el, this.selVertical);
@@ -6254,8 +6325,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();
@@ -6265,8 +6340,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");
           }
@@ -6385,7 +6464,9 @@
       events: [
         {
           name: pointerDown,
-          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) {
@@ -6408,7 +6489,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;
@@ -6430,7 +6513,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();
@@ -6440,7 +6525,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))) {
@@ -6453,8 +6540,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();