uikit 3.14.4-dev.17d2f2727 → 3.14.4-dev.2dc50ec60

package/dist/js/uikit-core.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.14.4-dev.17d2f2727 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.14.4-dev.2dc50ec60 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -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
@@ -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.17d2f2727';
+    UIkit.version = '3.14.4-dev.2dc50ec60';
 
     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(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) {
@@ -4983,7 +4976,9 @@
             0);
 
           } else {
-            const isScrollingElement = document.scrollingElement === scrollElement;
+            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");
@@ -5237,6 +5232,12 @@
 
     var marker = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"9\" y=\"4\" width=\"1\" height=\"11\"/><rect x=\"4\" y=\"9\" width=\"11\" height=\"1\"/></svg>";
 
+    var navParentIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" points=\"1 3.5 6 8.5 11 3.5\"/></svg>";
+
+    var navParentIconLarge = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" points=\"1 4 7 10 13 4\"/></svg>";
+
+    var navbarParentIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" points=\"1 3.5 6 8.5 11 3.5\"/></svg>";
+
     var navbarToggleIcon = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><rect y=\"9\" width=\"20\" height=\"2\"/><rect y=\"3\" width=\"20\" height=\"2\"/><rect y=\"15\" width=\"20\" height=\"2\"/></svg>";
 
     var overlayIcon = "<svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"19\" y=\"0\" width=\"1\" height=\"40\"/><rect x=\"0\" y=\"19\" width=\"40\" height=\"1\"/></svg>";
@@ -5269,6 +5270,9 @@
       marker,
       'close-icon': closeIcon,
       'close-large': closeLarge,
+      'nav-parent-icon': navParentIcon,
+      'nav-parent-icon-large': navParentIconLarge,
+      'navbar-parent-icon': navbarParentIcon,
       'navbar-toggle-icon': navbarToggleIcon,
       'overlay-icon': overlayIcon,
       'pagination-next': paginationNext,
@@ -5326,6 +5330,15 @@
       } };
 
 
+    const NavParentIcon = {
+      extends: IconComponent,
+
+      beforeConnect() {
+        const icon = this.$props.icon;
+        this.icon = closest(this.$el, '.uk-nav-primary') ? icon + "-large" : icon;
+      } };
+
+
     const Slidenav = {
       extends: IconComponent,
 
@@ -5915,8 +5928,7 @@
             {
               ...this.$props,
               boundary: this.boundary,
-              pos: this.pos,
-              offset: this.dropbar || this.offset });
+              pos: this.pos });
 
 
           },
@@ -6077,8 +6089,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;
           }
 
@@ -6086,7 +6098,7 @@
             after(this.dropbarAnchor || this.$el, this.dropbar);
           }
 
-          addClass($el, this.clsDrop + "-dropbar");
+          addClass(target, this.clsDrop + "-dropbar");
         } },
 
 
@@ -6101,19 +6113,44 @@
           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;
         } },
 
 
@@ -6128,12 +6165,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();
@@ -6152,8 +6189,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;
           }
 
@@ -6161,7 +6198,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);
           }
         } }],
@@ -6200,6 +6237,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';
         } } };
 
 
@@ -6925,7 +6967,9 @@
         },
 
         handler() {
-          if (!location.hash || scrollTop(window) === 0) {
+          const { scrollingElement } = document;
+
+          if (!location.hash || scrollingElement.scrollTop === 0) {
             return;
           }
 
@@ -6934,13 +6978,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);
             }
           });
         } }],
@@ -7038,7 +7080,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 {
@@ -7664,10 +7706,12 @@
         Video: Video,
         Close: Close,
         Spinner: Spinner,
+        NavParentIcon: NavParentIcon,
         SlidenavNext: Slidenav,
         SlidenavPrevious: Slidenav,
         SearchIcon: Search,
         Marker: IconComponent,
+        NavbarParentIcon: IconComponent,
         NavbarToggleIcon: IconComponent,
         OverlayIcon: IconComponent,
         PaginationNext: IconComponent,