uikit 3.14.4-dev.10a07fe5a → 3.14.4-dev.4bd89c5ca

package/dist/js/uikit.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.14.4-dev.10a07fe5a | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.14.4-dev.4bd89c5ca | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -1060,13 +1060,13 @@
     }
 
     function offsetPosition(element) {
-      const offset = [0, 0];
-
       element = toNode(element);
 
-      do {
-        offset[0] += element.offsetTop;
-        offset[1] += element.offsetLeft;
+      const offset = [element.offsetTop, element.offsetLeft];
+
+      while (element = element.offsetParent) {
+        offset[0] += element.offsetTop + toFloat(css(element, "borderTopWidth"));
+        offset[1] += element.offsetLeft + toFloat(css(element, "borderLeftWidth"));
 
         if (css(element, 'position') === 'fixed') {
           const win = toWindow(element);
@@ -1074,7 +1074,7 @@
           offset[1] += win.scrollX;
           return offset;
         }
-      } while (element = element.offsetParent);
+      }
 
       return offset;
     }
@@ -1293,9 +1293,9 @@
     const hasTouch = inBrowser && 'ontouchstart' in window;
     const hasPointerEvents = inBrowser && window.PointerEvent;
 
-    const pointerDown = hasPointerEvents ? 'pointerdown' : hasTouch ? 'touchstart' : 'mousedown';
-    const pointerMove = hasPointerEvents ? 'pointermove' : hasTouch ? 'touchmove' : 'mousemove';
-    const pointerUp = hasPointerEvents ? 'pointerup' : hasTouch ? 'touchend' : 'mouseup';
+    const pointerDown$1 = hasPointerEvents ? 'pointerdown' : hasTouch ? 'touchstart' : 'mousedown';
+    const pointerMove$1 = hasPointerEvents ? 'pointermove' : hasTouch ? 'touchmove' : 'mousemove';
+    const pointerUp$1 = hasPointerEvents ? 'pointerup' : hasTouch ? 'touchend' : 'mouseup';
     const pointerEnter = hasPointerEvents ? 'pointerenter' : hasTouch ? '' : 'mouseenter';
     const pointerLeave = hasPointerEvents ? 'pointerleave' : hasTouch ? '' : 'mouseleave';
     const pointerCancel = hasPointerEvents ? 'pointercancel' : 'touchcancel';
@@ -1795,20 +1795,6 @@
 
     }
 
-    function scrollTop(element, top) {
-      if (isWindow(element) || isDocument(element)) {
-        element = scrollingElement(element);
-      } else {
-        element = toNode(element);
-      }
-
-      if (isUndefined(top)) {
-        return element.scrollTop;
-      } else {
-        element.scrollTop = top;
-      }
-    }
-
     function scrollIntoView(element, _temp) {let { offset: offsetBy = 0 } = _temp === void 0 ? {} : _temp;
       const parents = isVisible(element) ? scrollParents(element) : [];
       return parents.reduce(
@@ -1850,7 +1836,7 @@
           (function step() {
             const percent = ease(clamp((Date.now() - start) / duration));
 
-            scrollTop(element, scroll + top * percent);
+            element.scrollTop = scroll + top * percent;
 
             // scroll more if we have not reached our destination
             if (percent === 1) {
@@ -2106,6 +2092,7 @@
                 return newPos;
               }
             }
+            continue;
           }
 
           // Move
@@ -2205,9 +2192,9 @@
         inBrowser: inBrowser,
         isRtl: isRtl,
         hasTouch: hasTouch,
-        pointerDown: pointerDown,
-        pointerMove: pointerMove,
-        pointerUp: pointerUp,
+        pointerDown: pointerDown$1,
+        pointerMove: pointerMove$1,
+        pointerUp: pointerUp$1,
         pointerEnter: pointerEnter,
         pointerLeave: pointerLeave,
         pointerCancel: pointerCancel,
@@ -2298,7 +2285,6 @@
         getCssVar: getCssVar,
         propName: propName,
         isInView: isInView,
-        scrollTop: scrollTop,
         scrollIntoView: scrollIntoView,
         scrolledOver: scrolledOver,
         scrollParents: scrollParents,
@@ -2961,7 +2947,7 @@
     UIkit.data = '__uikit__';
     UIkit.prefix = 'uk-';
     UIkit.options = {};
-    UIkit.version = '3.14.4-dev.10a07fe5a';
+    UIkit.version = '3.14.4-dev.4bd89c5ca';
 
     globalAPI(UIkit);
     hooksAPI(UIkit);
@@ -3259,7 +3245,7 @@
 
         Transition.cancel(el);
 
-        const [scrollElement] = scrollParents(el);
+        const [scrollElement] = scrollParents(el.offsetParent);
         css(scrollElement, 'overflowX', 'hidden');
 
         if (!isToggled(el)) {
@@ -3270,17 +3256,11 @@
         duration = velocity * width + duration;
 
         const percent = visible ? (width + marginLeft * (right ? -1 : 1)) / width * 100 : 0;
-        const offsetEl = offset(el);
-        const useClipPath = right ?
-        offsetEl.right < scrollElement.clientWidth :
-        Math.round(offsetEl.left) > 0;
 
         css(el, {
-          clipPath: useClipPath ?
-          right ? "polygon(0 0," +
+          clipPath: right ? "polygon(0 0," +
           percent + "% 0," + percent + "% 100%,0 100%)" : "polygon(" + (
-          100 - percent) + "% 0,100% 0,100% 100%," + (100 - percent) + "% 100%)" :
-          '',
+          100 - percent) + "% 0,100% 0,100% 100%," + (100 - percent) + "% 100%)",
           marginLeft: (100 - percent) * (right ? 1 : -1) / 100 * width });
 
 
@@ -3289,7 +3269,7 @@
         Transition.start(
         el,
         {
-          clipPath: useClipPath ? "polygon(0 0,100% 0,100% 100%,0 100%)" : '',
+          clipPath: "polygon(0 0,100% 0,100% 100%,0 100%)",
           marginLeft: 0 },
 
         duration * (1 - percent / 100),
@@ -3298,11 +3278,9 @@
         Transition.start(
         el,
         {
-          clipPath: useClipPath ?
-          right ? "polygon(0 0,0 0,0 100%,0 100%)" : "polygon(100% 0,100% 0,100% 100%,100% 100%)" :
+          clipPath: right ? "polygon(0 0,0 0,0 100%,0 100%)" : "polygon(100% 0,100% 0,100% 100%,100% 100%)",
 
 
-          '',
           marginLeft: (right ? 1 : -1) * width },
 
         duration * (percent / 100),
@@ -3698,17 +3676,32 @@
             offset = offset.reverse();
           }
 
+          const [scrollElement] = scrollParents(element, /auto|scroll/);
+          const { scrollTop, scrollLeft } = scrollElement;
+
           // Ensure none positioned element does not generate scrollbars
           const elDim = dimensions$1(element);
           css(element, { top: -elDim.height, left: -elDim.width });
 
-          positionAt(element, target, {
+          const args = [
+          element,
+          target,
+          {
             attach,
             offset,
             boundary,
             flip: this.flip,
-            viewportOffset: this.getViewportOffset(element) });
+            viewportOffset: this.getViewportOffset(element) }];
+
 
+
+          trigger(element, 'beforeposition', args);
+
+          positionAt(...args);
+
+          // Restore scroll position
+          scrollElement.scrollTop = scrollTop;
+          scrollElement.scrollLeft = scrollLeft;
         },
 
         getPositionOffset(element) {
@@ -3837,7 +3830,7 @@
           this.$el,
           'hide',
           on(document, 'focusin', (e) => {
-            if (!within(e.target, this.panel)) {
+            if (last(active$1) === this && !within(e.target, this.$el)) {
               this.$el.focus();
             }
           }));
@@ -3858,7 +3851,7 @@
             once(
             this.$el,
             'hide',
-            on(document, pointerDown, (_ref3) => {let { target } = _ref3;
+            on(document, pointerDown$1, (_ref3) => {let { target } = _ref3;
               if (
               last(active$1) !== this ||
               this.overlay && !within(target, this.$el) ||
@@ -3869,11 +3862,11 @@
 
               once(
               document,
-              pointerUp + " " + pointerCancel + " scroll",
+              pointerUp$1 + " " + pointerCancel + " scroll",
               (_ref4) => {let { defaultPrevented, type, target: newTarget } = _ref4;
                 if (
                 !defaultPrevented &&
-                type === pointerUp &&
+                type === pointerUp$1 &&
                 target === newTarget)
                 {
                   this.hide();
@@ -4265,16 +4258,16 @@
           for (const handler of [
           on(
           document,
-          pointerDown,
+          pointerDown$1,
           (_ref2) => {let { target } = _ref2;return (
               !within(target, this.$el) &&
               once(
               document,
-              pointerUp + " " + pointerCancel + " scroll",
+              pointerUp$1 + " " + pointerCancel + " scroll",
               (_ref3) => {let { defaultPrevented, type, target: newTarget } = _ref3;
                 if (
                 !defaultPrevented &&
-                type === pointerUp &&
+                type === pointerUp$1 &&
                 target === newTarget &&
                 !(this.target && within(target, this.target)))
                 {
@@ -4983,14 +4976,20 @@
             0);
 
           } else {
-            // on mobile devices (iOS and Android) window.innerHeight !== 100vh
-            minHeight = "calc(" + (
-            document.scrollingElement === scrollElement ? '100vh' : viewportHeight + "px");
+            const { body, scrollingElement } = document;
+            const isScrollingElement =
+            scrollingElement === scrollElement || body === scrollElement;
 
+            // on mobile devices (iOS and Android) window.innerHeight !== 100vh
+            minHeight = "calc(" + (isScrollingElement ? '100vh' : viewportHeight + "px");
 
             if (this.offsetTop) {
-              const top = offsetPosition(this.$el)[0] - offsetPosition(scrollElement)[0];
-              minHeight += top > 0 && top < viewportHeight / 2 ? " - " + top + "px" : '';
+              if (isScrollingElement) {
+                const top = offsetPosition(this.$el)[0] - offsetPosition(scrollElement)[0];
+                minHeight += top > 0 && top < viewportHeight / 2 ? " - " + top + "px" : '';
+              } else {
+                minHeight += " - " + css(scrollElement, 'paddingTop');
+              }
             }
 
             if (this.offsetBottom === true) {
@@ -5911,8 +5910,7 @@
             {
               ...this.$props,
               boundary: this.boundary,
-              pos: this.pos,
-              offset: this.dropbar || this.offset });
+              pos: this.pos });
 
 
           },
@@ -6073,8 +6071,8 @@
           return this.dropbar;
         },
 
-        handler(_, _ref9) {let { $el, align } = _ref9;
-          if (!hasClass($el, this.clsDrop) || align === 'stretch') {
+        handler(_ref9) {let { target } = _ref9;
+          if (!this.isDropbarDrop(target)) {
             return;
           }
 
@@ -6082,7 +6080,7 @@
             after(this.dropbarAnchor || this.$el, this.dropbar);
           }
 
-          addClass($el, this.clsDrop + "-dropbar");
+          addClass(target, this.clsDrop + "-dropbar");
         } },
 
 
@@ -6097,22 +6095,47 @@
           return this.dropbar;
         },
 
-        handler(_, _ref10) {let { $el, align } = _ref10;
-          if (!hasClass($el, this.clsDrop) || align === 'stretch') {
+        handler(_ref10) {let { target } = _ref10;
+          if (!this.isDropbarDrop(target)) {
             return;
           }
 
-          this._observer = observeResize($el, () =>
+          this._observer = observeResize(target, () =>
           this.transitionTo(
-          offset($el).bottom -
+          offset(target).bottom -
           offset(this.dropbar).top +
-          toFloat(css($el, 'marginBottom')),
-          $el));
+          toFloat(css(target, 'marginBottom')),
+          target));
 
 
         } },
 
 
+      {
+        name: 'beforeposition',
+
+        el() {
+          return this.dropContainer;
+        },
+
+        filter() {
+          return this.dropbar;
+        },
+
+        handler(e, element, target, options) {
+          if (!this.isDropbarDrop(element)) {
+            return;
+          }
+
+          const dropbarOffset = offset(this.dropbar);
+
+          css(element, 'maxWidth', dropbarOffset.width - options.viewportOffset * 2);
+
+          options.offset[1] = dropbarOffset.top - offset(target).bottom;
+          options.viewportOffset += dropbarOffset.left;
+        } },
+
+
       {
         name: 'beforehide',
 
@@ -6124,12 +6147,12 @@
           return this.dropbar;
         },
 
-        handler(e, _ref11) {let { $el } = _ref11;
+        handler(e) {
           const active = this.getActive();
 
           if (
           matches(this.dropbar, ':hover') &&
-          (active == null ? void 0 : active.$el) === $el &&
+          (active == null ? void 0 : active.$el) === e.target &&
           !this.toggles.some((el) => active.target !== el && matches(el, ':focus')))
           {
             e.preventDefault();
@@ -6148,8 +6171,8 @@
           return this.dropbar;
         },
 
-        handler(_, _ref12) {let { $el, align } = _ref12;
-          if (!hasClass($el, this.clsDrop) || align === 'stretch') {
+        handler(_ref11) {let { target } = _ref11;
+          if (!this.isDropbarDrop(target)) {
             return;
           }
 
@@ -6157,7 +6180,7 @@
 
           const active = this.getActive();
 
-          if (!active || (active == null ? void 0 : active.$el) === $el) {
+          if (!active || (active == null ? void 0 : active.$el) === target) {
             this.transitionTo(0);
           }
         } }],
@@ -6196,6 +6219,11 @@
 
         getDropdown(el) {
           return this.$getComponent(el, 'drop') || this.$getComponent(el, 'dropdown');
+        },
+
+        isDropbarDrop(el) {
+          const drop = this.getDropdown(el);
+          return drop && hasClass(el, this.clsDrop) && drop.align !== 'stretch';
         } } };
 
 
@@ -6259,7 +6287,7 @@
 
         registerEvent(this, {
           el: this.swipeTarget,
-          name: pointerDown,
+          name: pointerDown$1,
           passive: true,
           handler(e) {
             if (!isTouch(e)) {
@@ -6269,7 +6297,7 @@
             // Handle Swipe Gesture
             const pos = getEventPos(e);
             const target = 'tagName' in e.target ? e.target : parent(e.target);
-            once(document, pointerUp + " " + pointerCancel + " scroll", (e) => {
+            once(document, pointerUp$1 + " " + pointerCancel + " scroll", (e) => {
               const { x, y } = getEventPos(e);
 
               // swipe
@@ -6921,7 +6949,9 @@
         },
 
         handler() {
-          if (!location.hash || scrollTop(window) === 0) {
+          const { scrollingElement } = document;
+
+          if (!location.hash || scrollingElement.scrollTop === 0) {
             return;
           }
 
@@ -6930,13 +6960,11 @@
             const elOffset = offset(this.$el);
 
             if (this.isFixed && intersectRect(targetOffset, elOffset)) {
-              scrollTop(
-              window,
+              scrollingElement.scrollTop =
               targetOffset.top -
               elOffset.height -
               toPx(this.targetOffset, 'height', this.placeholder) -
-              toPx(this.offset, 'height', this.placeholder));
-
+              toPx(this.offset, 'height', this.placeholder);
             }
           });
         } }],
@@ -7034,7 +7062,7 @@
 
 
         {let { scroll: prevScroll = 0, dir: prevDir = 'down', overflow, overflowScroll = 0, start, end } = _ref4;
-          const scroll = scrollTop(window);
+          const scroll = document.scrollingElement.scrollTop;
           const dir = prevScroll <= scroll ? 'down' : 'up';
 
           return {
@@ -7443,7 +7471,7 @@
 
       events: [
       {
-        name: pointerDown,
+        name: pointerDown$1,
 
         filter() {
           return includes(this.mode, 'hover');
@@ -7461,7 +7489,7 @@
           trigger(this.$el, 'focus');
           once(
           document,
-          pointerDown,
+          pointerDown$1,
           () => trigger(this.$el, 'blur'),
           true,
           (e) => !within(e.target, this.$el));
@@ -8153,7 +8181,7 @@
 
         },
 
-        setState(state, animate) {if (animate === void 0) {animate = true;}
+        async setState(state, animate) {if (animate === void 0) {animate = true;}
           state = { filter: { '': '' }, sort: [], ...state };
 
           trigger(this.$el, 'beforeFilter', [this, state]);
@@ -8162,15 +8190,17 @@
           toggleClass(el, this.cls, !!matchFilter(el, this.attrItem, state)));
 
 
-          Promise.all(
+          await Promise.all(
           $$(this.target, this.$el).map((target) => {
             const filterFn = () => {
               applyState(state, target, children(target));
               this.$update(this.$el);
             };
             return animate ? this.animate(filterFn, target) : filterFn();
-          })).
-          then(() => trigger(this.$el, 'afterFilter', [this]));
+          }));
+
+
+          trigger(this.$el, 'afterFilter', [this]);
         },
 
         updateState() {
@@ -8460,6 +8490,11 @@
           this.interval && clearInterval(this.interval);
         } } };
 
+    const pointerOptions = { passive: false, capture: true };
+    const pointerDown = 'touchstart mousedown';
+    const pointerMove = 'touchmove mousemove';
+    const pointerUp = 'touchend touchcancel mouseup click input';
+
     var SliderDrag = {
       props: {
         draggable: Boolean },
@@ -8512,7 +8547,17 @@
 
         handler(e) {
           e.preventDefault();
-        } }],
+        } },
+
+
+      {
+        // iOS workaround for slider stopping if swiping fast
+        name: pointerMove + " " + pointerUp,
+        el() {
+          return this.list;
+        },
+        handler: noop,
+        ...pointerOptions }],
 
 
 
@@ -8534,10 +8579,10 @@
             this.prevIndex = this.index;
           }
 
-          on(document, pointerMove, this.move, { passive: false });
+          on(document, pointerMove, this.move, pointerOptions);
 
           // 'input' event is triggered by video controls
-          on(document, pointerUp + " " + pointerCancel + " input", this.end, true);
+          on(document, pointerUp, this.end, pointerOptions);
 
           css(this.list, 'userSelect', 'none');
         },
@@ -8617,8 +8662,8 @@
         },
 
         end() {
-          off(document, pointerMove, this.move, { passive: false });
-          off(document, pointerUp + " " + pointerCancel + " input", this.end, true);
+          off(document, pointerMove, this.move, pointerOptions);
+          off(document, pointerUp, this.end, pointerOptions);
 
           if (this.dragging) {
             this.dragging = null;
@@ -9026,7 +9071,7 @@
 
       events: [
       {
-        name: pointerMove + " " + pointerDown + " keydown",
+        name: pointerMove$1 + " " + pointerDown$1 + " keydown",
 
         handler: 'showControls' },
 
@@ -10681,7 +10726,7 @@
       },
 
       events: {
-        name: pointerDown,
+        name: pointerDown$1,
         passive: false,
         handler: 'init' },
 
@@ -10811,8 +10856,8 @@
           this.placeholder = placeholder;
           this.origin = { target, index: index(placeholder), ...this.pos };
 
-          on(document, pointerMove, this.move);
-          on(document, pointerUp, this.end);
+          on(document, pointerMove$1, this.move);
+          on(document, pointerUp$1, this.end);
 
           if (!this.threshold) {
             this.start(e);
@@ -10848,8 +10893,8 @@
         },
 
         end() {
-          off(document, pointerMove, this.move);
-          off(document, pointerUp, this.end);
+          off(document, pointerMove$1, this.move);
+          off(document, pointerUp$1, this.end);
 
           if (!this.drag) {
             return;
@@ -10918,7 +10963,7 @@
       let last = Date.now();
       trackTimer = setInterval(() => {
         let { x, y } = pos;
-        y += scrollTop(window);
+        y += document.scrollingElement.scrollTop;
 
         const dist = (Date.now() - last) * 0.3;
         last = Date.now();
@@ -10939,7 +10984,7 @@
           }
 
           if (scroll > 0 && scroll < scrollHeight - height) {
-            scrollTop(scrollEl, scroll);
+            scrollEl.scrollTop = scroll;
             return true;
           }
         });
@@ -11084,11 +11129,11 @@
 
           this._unbind = once(
           document, "show keydown " +
-          pointerDown,
+          pointerDown$1,
           this.hide,
           false,
           (e) =>
-          e.type === pointerDown && !within(e.target, this.$el) ||
+          e.type === pointerDown$1 && !within(e.target, this.$el) ||
           e.type === 'keydown' && e.keyCode === 27 ||
           e.type === 'show' && e.detail[0] !== this && e.detail[0].$name === this.$name);
 
@@ -11159,7 +11204,7 @@
 
         // Clicking a button does not give it focus on all browsers and platforms
         // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#clicking_and_focus
-        [pointerDown](e) {
+        [pointerDown$1](e) {
           if (isTouch(e)) {
             this.show();
           }