uikit 3.14.4-dev.f2e3be255 → 3.14.4-dev.fea9fd466

package/dist/js/uikit.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.14.4-dev.f2e3be255 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.14.4-dev.fea9fd466 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -785,18 +785,11 @@
       return elements[0];
     }
 
-    const propertyRe = /^\s*(["'])?(.*?)\1\s*$/;
-    function getCssVar(name, element) {if (element === void 0) {element = document.documentElement;}
-      return css(element, "--uk-" + name).replace(propertyRe, '$2');
-    }
-
     // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty
     const propName = memoize((name) => vendorPropName(name));
 
-    const cssPrefixes = ['webkit', 'moz'];
-
     function vendorPropName(name) {
-      if (name[0] === '-') {
+      if (startsWith(name, '--')) {
         return name;
       }
 
@@ -808,11 +801,8 @@
         return name;
       }
 
-      let i = cssPrefixes.length,
-      prefixedName;
-
-      while (i--) {
-        prefixedName = "-" + cssPrefixes[i] + "-" + name;
+      for (const prefix of ['webkit', 'moz']) {
+        const prefixedName = "-" + prefix + "-" + name;
         if (prefixedName in style) {
           return prefixedName;
         }
@@ -1899,12 +1889,10 @@
     function offsetViewport(scrollElement) {
       const window = toWindow(scrollElement);
       const {
-        document: { body, documentElement } } =
+        document: { documentElement } } =
       window;
       let viewportElement =
-      scrollElement === scrollingElement(scrollElement) || scrollElement === body ?
-      window :
-      scrollElement;
+      scrollElement === scrollingElement(scrollElement) ? window : scrollElement;
 
       const { visualViewport } = window;
       if (isWindow(viewportElement) && visualViewport) {
@@ -2282,7 +2270,6 @@
         findAll: findAll,
         escape: escape,
         css: css,
-        getCssVar: getCssVar,
         propName: propName,
         isInView: isInView,
         scrollIntoView: scrollIntoView,
@@ -2947,7 +2934,7 @@
     UIkit.data = '__uikit__';
     UIkit.prefix = 'uk-';
     UIkit.options = {};
-    UIkit.version = '3.14.4-dev.f2e3be255';
+    UIkit.version = '3.14.4-dev.fea9fd466';
 
     globalAPI(UIkit);
     hooksAPI(UIkit);
@@ -3245,7 +3232,7 @@
 
         Transition.cancel(el);
 
-        const [scrollElement] = scrollParents(el);
+        const [scrollElement] = scrollParents(el.offsetParent);
         css(scrollElement, 'overflowX', 'hidden');
 
         if (!isToggled(el)) {
@@ -3256,17 +3243,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 });
 
 
@@ -3275,7 +3256,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),
@@ -3284,11 +3265,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),
@@ -3715,7 +3694,7 @@
         getPositionOffset(element) {
           return (
             toPx(
-            this.offset === false ? getCssVar('position-offset', element) : this.offset,
+            this.offset === false ? css(element, '--uk-position-offset') : this.offset,
             this.axis === 'x' ? 'width' : 'height',
             element) * (
             includes(['left', 'top'], this.dir) ? -1 : 1));
@@ -3726,14 +3705,14 @@
           return includes(['center', 'justify', 'stretch'], this.align) ?
           0 :
           toPx(
-          getCssVar('position-shift-offset', element),
+          css(element, '--uk-position-shift-offset'),
           this.axis === 'y' ? 'width' : 'height',
           element) * (
           includes(['left', 'top'], this.align) ? 1 : -1);
         },
 
         getViewportOffset(element) {
-          return toPx(getCssVar('position-viewport-offset', element));
+          return toPx(css(element, '--uk-position-viewport-offset'));
         } } };
 
     const active$1 = [];
@@ -4973,8 +4952,11 @@
           let minHeight = '';
           const box = boxModelAdjust(this.$el, 'height', 'content-box');
 
+          const { body, scrollingElement } = document;
           const [scrollElement] = scrollParents(this.$el, /auto|scroll/);
-          const { height: viewportHeight } = offsetViewport(scrollElement);
+          const { height: viewportHeight } = offsetViewport(
+          scrollElement === body ? scrollingElement : scrollElement);
+
 
           if (this.expand) {
             minHeight = Math.max(
@@ -4984,7 +4966,8 @@
             0);
 
           } else {
-            const isScrollingElement = document.scrollingElement === scrollElement;
+            const isScrollingElement =
+            scrollingElement === scrollElement || body === scrollElement;
 
             // on mobile devices (iOS and Android) window.innerHeight !== 100vh
             minHeight = "calc(" + (isScrollingElement ? '100vh' : viewportHeight + "px");
@@ -5238,6 +5221,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>";
@@ -5270,6 +5259,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,
@@ -5327,6 +5319,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,
 
@@ -5587,7 +5588,7 @@
 
 
       connected() {
-        const media = toMedia(this.media);
+        const media = toMedia(this.media, this.$el);
         this.matchMedia = true;
         if (media) {
           this.mediaObj = window.matchMedia(media);
@@ -5608,11 +5609,10 @@
       } };
 
 
-    function toMedia(value) {
+    function toMedia(value, element) {
       if (isString(value)) {
         if (startsWith(value, '@')) {
-          const name = "breakpoint-" + value.substr(1);
-          value = toFloat(getCssVar(name));
+          value = toFloat(css(element, "--uk-breakpoint-" + value.substr(1)));
         } else if (isNaN(value)) {
           return value;
         }
@@ -5637,7 +5637,7 @@
 
       computed: {
         fill(_ref) {let { fill } = _ref;
-          return fill || getCssVar('leader-fill-content');
+          return fill || css(this.$el, '--uk-leader-fill-content');
         } },
 
 
@@ -7694,10 +7694,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,
@@ -8187,7 +8189,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]);
@@ -8196,15 +8198,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() {