uikit 3.15.24 → 3.15.25-dev.c6f5a4c4e

package/dist/js/uikit.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.15.24 | https://www.getuikit.com | (c) 2014 - 2023 YOOtheme | MIT License */
+/*! UIkit 3.15.25-dev.c6f5a4c4e | https://www.getuikit.com | (c) 2014 - 2023 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -1397,7 +1397,7 @@
 
       cancel() {var _this$unbind;
         (_this$unbind = this.unbind) == null ? void 0 : _this$unbind.call(this);
-        this.interval && clearInterval(this.interval);
+        clearInterval(this.interval);
       },
 
       movesTo(target) {
@@ -2977,7 +2977,7 @@
     UIkit.data = '__uikit__';
     UIkit.prefix = 'uk-';
     UIkit.options = {};
-    UIkit.version = '3.15.24';
+    UIkit.version = '3.15.25-dev.c6f5a4c4e';
 
     globalAPI(UIkit);
     hooksAPI(UIkit);
@@ -3899,70 +3899,25 @@
         self: true,
 
         handler() {
-          once(
-          this.$el,
-          'hide',
-          on(document, 'focusin', (e) => {
-            if (last(active$1) === this && !within(e.target, this.$el)) {
-              this.$el.focus();
-            }
-          }));
-
-
-          if (this.overlay) {
-            once(this.$el, 'hidden', preventBackgroundScroll(this.$el), { self: true });
-          }
-
           if (this.stack) {
             css(this.$el, 'zIndex', toFloat(css(this.$el, 'zIndex')) + active$1.length);
           }
 
-          addClass(document.documentElement, this.clsPage);
-
-          if (this.bgClose) {
-            once(
-            this.$el,
-            'hide',
-            on(document, pointerDown$1, ({ target }) => {
-              if (
-              last(active$1) !== this ||
-              this.overlay && !within(target, this.$el) ||
-              within(target, this.panel))
-              {
-                return;
-              }
-
-              once(
-              document,
-              `${pointerUp$1} ${pointerCancel} scroll`,
-              ({ defaultPrevented, type, target: newTarget }) => {
-                if (
-                !defaultPrevented &&
-                type === pointerUp$1 &&
-                target === newTarget)
-                {
-                  this.hide();
-                }
-              },
-              true);
+          const handlers = [
+          this.overlay && preventBackgroundFocus(this),
+          this.overlay && preventBackgroundScroll(this.$el),
+          this.bgClose && listenForBackgroundClose(this),
+          this.escClose && listenForEscClose$1(this)];
 
-            }),
-            { self: true });
 
-          }
+          once(
+          this.$el,
+          'hidden',
+          () => handlers.forEach((handler) => handler && handler()),
+          { self: true });
 
-          if (this.escClose) {
-            once(
-            this.$el,
-            'hide',
-            on(document, 'keydown', (e) => {
-              if (e.keyCode === 27 && last(active$1) === this) {
-                this.hide();
-              }
-            }),
-            { self: true });
 
-          }
+          addClass(document.documentElement, this.clsPage);
         }
       },
 
@@ -4053,6 +4008,45 @@
       return time ? endsWith(time, 'ms') ? toFloat(time) : toFloat(time) * 1000 : 0;
     }
 
+    function preventBackgroundFocus(modal) {
+      return on(document, 'focusin', (e) => {
+        if (last(active$1) === modal && !within(e.target, modal.$el)) {
+          modal.$el.focus();
+        }
+      });
+    }
+
+    function listenForBackgroundClose(modal) {
+      return on(document, pointerDown$1, ({ target }) => {
+        if (
+        last(active$1) !== modal ||
+        modal.overlay && !within(target, modal.$el) ||
+        within(target, modal.panel))
+        {
+          return;
+        }
+
+        once(
+        document,
+        `${pointerUp$1} ${pointerCancel} scroll`,
+        ({ defaultPrevented, type, target: newTarget }) => {
+          if (!defaultPrevented && type === pointerUp$1 && target === newTarget) {
+            modal.hide();
+          }
+        },
+        true);
+
+      });
+    }
+
+    function listenForEscClose$1(modal) {
+      return on(document, 'keydown', (e) => {
+        if (e.keyCode === 27 && last(active$1) === modal) {
+          modal.hide();
+        }
+      });
+    }
+
     let prevented;
     function preventBackgroundScroll(el) {
       // 'overscroll-behavior: contain' only works consistently if el overflows (Safari)
@@ -4172,12 +4166,7 @@
         addClass(this.$el, this.clsDrop);
 
         if (this.toggle && !this.targetEl) {
-          this.targetEl = this.$create('toggle', query(this.toggle, this.$el), {
-            target: this.$el,
-            mode: this.mode
-          }).$el;
-          attr(this.targetEl, 'aria-haspopup', true);
-          this.lazyload(this.targetEl);
+          this.targetEl = createToggleComponent(this);
         }
 
         this._style = (({ width, height }) => ({ width, height }))(this.$el.style);
@@ -4326,50 +4315,11 @@
 
           this.tracker.init();
 
-          const update = () => this.$emit();
           const handlers = [
-          on(
-          document,
-          pointerDown$1,
-          ({ target }) => !within(target, this.$el) &&
-          once(
-          document,
-          `${pointerUp$1} ${pointerCancel} scroll`,
-          ({ defaultPrevented, type, target: newTarget }) => {
-            if (
-            !defaultPrevented &&
-            type === pointerUp$1 &&
-            target === newTarget &&
-            !(this.targetEl && within(target, this.targetEl)))
-            {
-              this.hide(false);
-            }
-          },
-          true)),
-
-
-
-          on(document, 'keydown', (e) => {
-            if (e.keyCode === 27) {
-              this.hide(false);
-            }
-          }),
-
-          on(window, 'resize', update),
-
-          (() => {
-            const observer = observeResize(
-            overflowParents(this.$el).concat(this.target),
-            update);
-
-            return () => observer.disconnect();
-          })(),
-
-          this.autoUpdate &&
-          on([document, ...overflowParents(this.$el)], 'scroll', update, {
-            passive: true
-          }),
-
+          listenForBackgroundClick(this),
+          listenForEscClose(this),
+          listenForResize(this),
+          this.autoUpdate && listenForScroll(this),
           !this.bgScroll && preventBackgroundScroll(this.$el)];
 
 
@@ -4558,6 +4508,63 @@
       return offsetViewport(overflowParents(target).find((parent) => within(el, parent)));
     }
 
+    function createToggleComponent(drop) {
+      const { $el } = drop.$create('toggle', query(drop.toggle, drop.$el), {
+        target: drop.$el,
+        mode: drop.mode
+      });
+      attr($el, 'aria-haspopup', true);
+      drop.lazyload($el);
+
+      return $el;
+    }
+
+    function listenForResize(drop) {
+      const update = () => drop.$emit();
+      const off = on(window, 'resize', update);
+      const observer = observeResize(overflowParents(drop.$el).concat(drop.target), update);
+      return () => {
+        observer.disconnect();
+        off();
+      };
+    }
+
+    function listenForScroll(drop) {
+      return on([document, ...overflowParents(drop.$el)], 'scroll', () => drop.$emit(), {
+        passive: true
+      });
+    }
+
+    function listenForEscClose(drop) {
+      return on(document, 'keydown', (e) => {
+        if (e.keyCode === 27) {
+          drop.hide(false);
+        }
+      });
+    }
+
+    function listenForBackgroundClick(drop) {
+      return on(document, pointerDown$1, ({ target }) => {
+        if (!within(target, drop.$el)) {
+          once(
+          document,
+          `${pointerUp$1} ${pointerCancel} scroll`,
+          ({ defaultPrevented, type, target: newTarget }) => {
+            if (
+            !defaultPrevented &&
+            type === pointerUp$1 &&
+            target === newTarget &&
+            !(drop.targetEl && within(target, drop.targetEl)))
+            {
+              drop.hide(false);
+            }
+          },
+          true);
+
+        }
+      });
+    }
+
     var formCustom = {
       mixins: [Class],
 
@@ -6121,7 +6128,7 @@
       },
 
       {
-        name: 'beforeshow',
+        name: 'show',
 
         el() {
           return this.dropContainer;
@@ -6141,27 +6148,9 @@
           }
 
           addClass(target, `${this.clsDrop}-dropbar`);
-        }
-      },
-
-      {
-        name: 'show',
-
-        el() {
-          return this.dropContainer;
-        },
-
-        filter() {
-          return this.dropbar;
-        },
-
-        handler({ target }) {
-          if (!this.isDropbarDrop(target)) {
-            return;
-          }
 
           const drop = this.getDropdown(target);
-          this._observer = observeResize([drop.$el, ...drop.target], () => {
+          const adjustHeight = () => {
             const targetOffsets = parents(target, `.${this.clsDrop}`).
             concat(target).
             map((el) => offset(el));
@@ -6173,7 +6162,9 @@
             maxBottom - minTop + toFloat(css(target, 'marginBottom')),
             target);
 
-          });
+          };
+          this._observer = observeResize([drop.$el, ...drop.target], adjustHeight);
+          adjustHeight();
         }
       },
 
@@ -6233,29 +6224,27 @@
           return includes(this.dropdowns, active == null ? void 0 : active.$el) && active;
         },
 
-        transitionTo(newHeight, el) {
+        async transitionTo(newHeight, el) {
           const { dropbar } = this;
           const oldHeight = height(dropbar);
 
           el = oldHeight < newHeight && el;
 
-          css(el, 'clipPath', `polygon(0 0,100% 0,100% ${oldHeight}px,0 ${oldHeight}px)`);
+          await Transition.cancel([el, dropbar]);
 
+          css(el, 'clipPath', `polygon(0 0,100% 0,100% ${oldHeight}px,0 ${oldHeight}px)`);
           height(dropbar, oldHeight);
 
-          Transition.cancel([el, dropbar]);
-          Promise.all([
+          await Promise.all([
           Transition.start(dropbar, { height: newHeight }, this.duration),
           Transition.start(
           el,
           {
             clipPath: `polygon(0 0,100% 0,100% ${newHeight}px,0 ${newHeight}px)`
           },
-          this.duration)]).
-
-
-          catch(noop).
-          then(() => css(el, { clipPath: '' }));
+          this.duration).
+          finally(() => css(el, { clipPath: '' }))]).
+          catch(noop);
         },
 
         getDropdown(el) {
@@ -7919,14 +7908,14 @@
     };
 
     function getTimeSpan(date) {
-      const total = date - Date.now();
+      const total = (date - Date.now()) / 1000;
 
       return {
         total,
-        seconds: total / 1000 % 60,
-        minutes: total / 1000 / 60 % 60,
-        hours: total / 1000 / 60 / 60 % 24,
-        days: total / 1000 / 60 / 60 / 24
+        seconds: total % 60,
+        minutes: total / 60 % 60,
+        hours: total / 60 / 60 % 24,
+        days: total / 60 / 60 / 24
       };
     }
 
@@ -8084,6 +8073,10 @@
       nodes.forEach((el, i) => propsFrom[i] && css(el, propsFrom[i]));
       css(target, targetProps);
 
+      // Trigger update in e.g. parallax component
+      trigger(target, 'scroll');
+      fastdom.flush();
+
       // Start transitions on next frame
       await awaitFrame();
 
@@ -8598,7 +8591,7 @@
         },
 
         stopAutoplay() {
-          this.interval && clearInterval(this.interval);
+          clearInterval(this.interval);
         }
       }
     };
@@ -9316,12 +9309,9 @@
           type === 'image' ||
           src.match(/\.(avif|jpe?g|jfif|a?png|gif|svg|webp)($|\?)/i))
           {
-            try {
-              const { width, height } = await getImage(src, attrs.srcset, attrs.size);
-              this.setItem(item, createEl('img', { src, width, height, alt, ...attrs }));
-            } catch (e) {
-              this.setError(item);
-            }
+            const img = createEl('img', { src, alt, ...attrs });
+            on(img, 'load', () => this.setItem(item, img));
+            on(img, 'error', () => this.setError(item));
 
             // Video
           } else if (type === 'video' || src.match(/\.(mp4|webm|ogv)($|\?)/i)) {
@@ -9330,17 +9320,11 @@
               poster,
               controls: '',
               playsinline: '',
-              'uk-video': `${this.videoAutoplay}`
+              'uk-video': `${this.videoAutoplay}`,
+              ...attrs
             });
 
-            on(video, 'loadedmetadata', () => {
-              attr(video, {
-                width: video.videoWidth,
-                height: video.videoHeight,
-                ...attrs
-              });
-              this.setItem(item, video);
-            });
+            on(video, 'loadedmetadata', () => this.setItem(item, video));
             on(video, 'error', () => this.setError(item));
 
             // Iframe
@@ -9382,9 +9366,7 @@
               `https://vimeo.com/api/oembed.json?maxwidth=1920&url=${encodeURI(
           src)
           }`,
-              {
-                credentials: 'omit'
-              })).
+              { credentials: 'omit' })).
 
               json();
 
@@ -11223,10 +11205,9 @@
       [placeholderRect.top, placeholderRect.bottom]);
 
 
-      const pointerPos = sameRow ? x : y;
-      const lengthProp = sameRow ? 'width' : 'height';
-      const startProp = sameRow ? 'left' : 'top';
-      const endProp = sameRow ? 'right' : 'bottom';
+      const [pointerPos, lengthProp, startProp, endProp] = sameRow ?
+      [x, 'width', 'left', 'right'] :
+      [y, 'height', 'top', 'bottom'];
 
       const diff =
       placeholderRect[lengthProp] < rect[lengthProp] ?
@@ -11372,14 +11353,9 @@
               passive: true
             })];
 
-            once(
-            this.tooltip,
-            'hide',
-            () => handlers.forEach((handler) => handler && handler()),
-            {
+            once(this.tooltip, 'hide', () => handlers.forEach((handler) => handler()), {
               self: true
             });
-
           });
 
           this.toggleElement(this.tooltip, true);
@@ -11583,7 +11559,7 @@
                 responseType: this.type,
                 beforeSend: (env) => {
                   const { xhr } = env;
-                  xhr.upload && on(xhr.upload, 'progress', this.progress);
+                  on(xhr.upload, 'progress', this.progress);
                   for (const type of ['loadStart', 'load', 'loadEnd', 'abort']) {
                     on(xhr, type.toLowerCase(), this[type]);
                   }