uikit 3.14.4-dev.5e7e87ba7 → 3.14.4-dev.6002e7046

package/dist/js/uikit.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.14.4-dev.5e7e87ba7 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.14.4-dev.6002e7046 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -814,7 +814,9 @@
     }
 
     function removeClasses(element, cls) {
-      attr(element, 'class', (value) => (value || '').replace(new RegExp("\\b" + cls + "\\b", 'g'), ''));
+      attr(element, 'class', (value) =>
+      (value || '').replace(new RegExp("\\b" + cls + "\\b\\s?", 'g'), ''));
+
     }
 
     function replaceClass(element) {
@@ -950,7 +952,8 @@
 
     }
 
-    const inProgress = new RegExp(animationPrefix + "(enter|leave)");
+    const inProgressRe = new RegExp(animationPrefix + "(enter|leave)");
+
     const Animation = {
       in: animate$2,
 
@@ -959,7 +962,7 @@
       },
 
       inProgress(element) {
-        return inProgress.test(attr(element, 'class'));
+        return inProgressRe.test(attr(element, 'class'));
       },
 
       cancel(element) {
@@ -1933,6 +1936,7 @@
           ...options.attach },
 
         offset: [0, 0],
+        placement: [],
         ...options };
 
 
@@ -1943,57 +1947,21 @@
       offset(element, getPosition(element, target, options));
     }
 
-    function attachTo(element, target, options) {
-      let { attach, offset: offsetBy } = {
-        attach: {
-          element: ['left', 'top'],
-          target: ['left', 'top'],
-          ...options.attach },
-
-        offset: [0, 0],
-        ...options };
-
-
-      const position = offset(element);
-
-      for (const [i, [prop, dir, start, end]] of Object.entries(dirs)) {
-        const targetOffset =
-        attach.target[i] === attach.element[i] ? offsetViewport(target[i]) : offset(target[i]);
-
-        position[start] = position[dir] =
-        targetOffset[start] +
-        moveBy(attach.target[i], end, targetOffset[prop]) -
-        moveBy(attach.element[i], end, position[prop]) +
-        +offsetBy[i];
-        position[end] = position[start] + position[prop];
-      }
-      return position;
-    }
-
-    function moveBy(start, end, dim) {
-      return start === 'center' ? dim / 2 : start === end ? dim : 0;
-    }
-
     function getPosition(element, target, options) {
       const position = attachTo(element, target, options);
 
       let {
-        flip,
-        shift,
         attach: { element: elAttach, target: targetAttach },
         offset: elOffset,
         boundary,
-        viewportOffset } =
+        viewportOffset,
+        placement } =
       options;
 
-      if (!flip && !shift) {
-        return position;
-      }
-
-      const offsetPosition = { ...position };
-      for (const [i, [prop, dir, start, end]] of Object.entries(dirs)) {
+      let offsetPosition = position;
+      for (const [i, [prop,, start, end]] of Object.entries(dirs)) {
         let viewports = scrollParents(target[i]);
-        const [scrollElement] = viewports;
+        const scrollArea = getScrollArea(viewports[0], viewportOffset, i);
 
         let viewport = getIntersectionArea(...viewports.map(offsetViewport));
 
@@ -2003,54 +1971,28 @@
         }
 
         if (boundary) {
-          viewport = getIntersectionArea(viewport, offsetViewport(boundary));
+          viewport = getIntersectionArea(viewport, offset(boundary));
         }
 
-        const isInStartViewport = position[start] >= viewport[start];
-        const isInEndViewport = position[end] <= viewport[end];
-
-        if (isInStartViewport && isInEndViewport) {
+        if (isWithin(position, viewport, i)) {
           continue;
         }
 
         let offsetBy = 0;
-        const targetDim = offset(target[i]);
 
         // Flip
-        if (!intersectLine(position, targetDim, i) && intersectLine(position, targetDim, 1 - i)) {
+        if (placement[i] === 'flip') {
           if (
-          !flip ||
-          elAttach[i] === end && isInStartViewport ||
-          elAttach[i] === start && isInEndViewport)
+          targetAttach[i] === end && position[end] <= viewport[end] ||
+          targetAttach[i] === start && position[start] >= viewport[start])
           {
             continue;
           }
 
-          offsetBy =
-          (elAttach[i] === start ?
-          -position[prop] :
-          elAttach[i] === end ?
-          position[prop] :
-          0) + (
-          targetAttach[i] === start ?
-          targetDim[prop] :
-          targetAttach[i] === end ?
-          -targetDim[prop] :
-          0) -
-          elOffset[i] * 2;
+          offsetBy = flip(element, target, options, i)[start] - position[start];
 
-          if (
-          !isInScrollArea(
-          {
-            ...position,
-            [start]: position[start] + offsetBy,
-            [end]: position[end] + offsetBy },
-
-          scrollElement,
-          i))
-
-          {
-            if (isInScrollArea(position, scrollElement, i)) {
+          if (!isWithin(applyOffset(position, offsetBy, i), scrollArea, i)) {
+            if (isWithin(position, scrollArea, i)) {
               continue;
             }
 
@@ -2061,14 +2003,15 @@
             const newPos = getPosition(element, target, {
               ...options,
               attach: {
-                element: elAttach.map(flipDir).reverse(),
-                target: targetAttach.map(flipDir).reverse() },
+                element: elAttach.map(flipAxis).reverse(),
+                target: targetAttach.map(flipAxis).reverse() },
 
               offset: elOffset.reverse(),
+              placement: placement.reverse(),
               recursion: true });
 
 
-            if (newPos && isInScrollArea(newPos, scrollElement, 1 - i)) {
+            if (newPos && isWithin(newPos, scrollArea, 1 - i)) {
               return newPos;
             }
 
@@ -2076,7 +2019,8 @@
           }
 
           // Shift
-        } else if (shift) {
+        } else if (placement[i] === 'shift') {
+          const targetDim = offset(target[i]);
           offsetBy =
           clamp(
           clamp(position[start], viewport[start], viewport[end] - position[prop]),
@@ -2085,13 +2029,54 @@
           position[start];
         }
 
-        offsetPosition[start] = position[dir] = position[start] + offsetBy;
-        offsetPosition[end] += offsetBy;
+        offsetPosition = applyOffset(offsetPosition, offsetBy, i);
       }
 
       return offsetPosition;
     }
 
+    function attachTo(element, target, options) {
+      let { attach, offset: offsetBy } = {
+        attach: {
+          element: ['left', 'top'],
+          target: ['left', 'top'],
+          ...options.attach },
+
+        offset: [0, 0],
+        ...options };
+
+
+      let elOffset = offset(element);
+
+      for (const [i, [prop,, start, end]] of Object.entries(dirs)) {
+        const targetOffset =
+        attach.target[i] === attach.element[i] ? offsetViewport(target[i]) : offset(target[i]);
+
+        elOffset = applyOffset(
+        elOffset,
+        targetOffset[start] -
+        elOffset[start] +
+        moveBy(attach.target[i], end, targetOffset[prop]) -
+        moveBy(attach.element[i], end, elOffset[prop]) +
+        +offsetBy[i],
+        i);
+
+      }
+      return elOffset;
+    }
+
+    function applyOffset(position, offset, i) {
+      const [, dir, start, end] = dirs[i];
+      const newPos = { ...position };
+      newPos[start] = position[dir] = position[start] + offset;
+      newPos[end] += offset;
+      return newPos;
+    }
+
+    function moveBy(attach, end, dim) {
+      return attach === 'center' ? dim / 2 : attach === end ? dim : 0;
+    }
+
     function getIntersectionArea() {
       let area = {};for (var _len = arguments.length, rects = new Array(_len), _key = 0; _key < _len; _key++) {rects[_key] = arguments[_key];}
       for (const rect of rects) {
@@ -2103,21 +2088,45 @@
       return area;
     }
 
-    function isInScrollArea(position, scrollElement, dir) {
+    function getScrollArea(scrollElement, viewportOffset, i) {
+      const [prop,, start, end] = dirs[i];
       const viewport = offsetViewport(scrollElement);
-      const [prop,, start, end] = dirs[dir];
-      viewport[start] -= scrollElement["scroll" + ucfirst(start)];
-      viewport[end] = viewport[start] + scrollElement["scroll" + ucfirst(prop)];
+      viewport[start] -= scrollElement["scroll" + ucfirst(start)] - viewportOffset;
+      viewport[end] = viewport[start] + scrollElement["scroll" + ucfirst(prop)] - viewportOffset;
+      return viewport;
+    }
 
-      return position[start] >= viewport[start] && position[end] <= viewport[end];
+    function isWithin(positionA, positionB, i) {
+      const [,, start, end] = dirs[i];
+      return positionA[start] >= positionB[start] && positionA[end] <= positionB[end];
     }
 
-    function intersectLine(dimA, dimB, dir) {
-      const [,, start, end] = dirs[dir];
-      return dimA[end] > dimB[start] && dimB[end] > dimA[start];
+    function flip(element, target, _ref, i) {let { offset, attach } = _ref;
+      return attachTo(element, target, {
+        attach: {
+          element: flipAttach(attach.element, i),
+          target: flipAttach(attach.target, i) },
+
+        offset: flipOffset(offset, i) });
+
+    }
+
+    function flipAttach(attach, i) {
+      const newAttach = [...attach];
+      const index = dirs[i].indexOf(attach[i]);
+      if (~index) {
+        newAttach[i] = dirs[i][1 - index % 2 + 2];
+      }
+      return newAttach;
+    }
+
+    function flipOffset(offset, i) {
+      offset = [...offset];
+      offset[i] *= -1;
+      return offset;
     }
 
-    function flipDir(prop) {
+    function flipAxis(prop) {
       for (let i = 0; i < dirs.length; i++) {
         const index = dirs[i].indexOf(prop);
         if (~index) {
@@ -2130,9 +2139,7 @@
         __proto__: null,
         ajax: ajax,
         getImage: getImage,
-        transition: transition,
         Transition: Transition,
-        animate: animate$2,
         Animation: Animation,
         attr: attr,
         hasAttr: hasAttr,
@@ -2437,7 +2444,11 @@
           }
 
           if (write && result !== false) {
-            fastdom.write(() => write.call(this, this._data, types));
+            fastdom.write(() => {
+              if (this._connected) {
+                write.call(this, this._data, types);
+              }
+            });
           }
         }
       }
@@ -2597,7 +2608,7 @@
 
       for (const key in options) {
         const prop = camelize(key);
-        if (props[prop] !== undefined) {
+        if (!isUndefined(props[prop])) {
           data$1[prop] = coerce$1(props[prop], options[key]);
         }
       }
@@ -2926,7 +2937,7 @@
     UIkit.data = '__uikit__';
     UIkit.prefix = 'uk-';
     UIkit.options = {};
-    UIkit.version = '3.14.4-dev.5e7e87ba7';
+    UIkit.version = '3.14.4-dev.6002e7046';
 
     globalAPI(UIkit);
     hooksAPI(UIkit);
@@ -3160,9 +3171,16 @@
         }
 
         const prevProps = Object.fromEntries(
-        ['padding', 'border', 'width', 'height', 'overflow', marginProp, marginStartProp].map(
-        (key) => [key, el.style[key]]));
-
+        [
+        'padding',
+        'border',
+        'width',
+        'height',
+        'overflowY',
+        'overflowX',
+        marginProp,
+        marginStartProp].
+        map((key) => [key, el.style[key]]));
 
 
         const dim = dimensions$1(el);
@@ -3180,6 +3198,7 @@
           height: dim.height,
           width: dim.width,
           ...css(el, [
+          'overflow',
           'padding',
           'borderTop',
           'borderRight',
@@ -3616,6 +3635,7 @@
       methods: {
         positionAt(element, target, boundary) {
           let offset = [this.getPositionOffset(element), this.getShiftOffset(element)];
+          const placement = [this.flip && 'flip', this.shift && 'shift'];
 
           const attach = {
             element: [this.inset ? this.dir : flipPosition(this.dir), this.align],
@@ -3624,9 +3644,10 @@
 
           if (this.axis === 'y') {
             for (const prop in attach) {
-              attach[prop] = attach[prop].reverse();
+              attach[prop].reverse();
             }
-            offset = offset.reverse();
+            offset.reverse();
+            placement.reverse();
           }
 
           const [scrollElement] = scrollParents(element, /auto|scroll/);
@@ -3640,8 +3661,7 @@
             attach,
             offset,
             boundary,
-            flip: this.flip,
-            shift: this.shift,
+            placement,
             viewportOffset: this.getViewportOffset(element) });
 
 
@@ -3676,6 +3696,15 @@
           return toPx(css(element, '--uk-position-viewport-offset'));
         } } };
 
+    var Style = {
+      beforeConnect() {
+        this._style = attr(this.$el, 'style');
+      },
+
+      disconnected() {
+        attr(this.$el, 'style', this._style);
+      } };
+
     const active$1 = [];
 
     var Modal = {
@@ -3785,8 +3814,8 @@
 
 
           if (this.overlay) {
-            once(this.$el, 'hide', preventOverscroll(this.$el));
-            once(this.$el, 'hide', preventBackgroundScroll());
+            once(this.$el, 'hidden', preventOverscroll(this.$el), { self: true });
+            once(this.$el, 'hidden', preventBackgroundScroll(), { self: true });
           }
 
           if (this.stack) {
@@ -3868,10 +3897,6 @@
             active$1.splice(active$1.indexOf(this), 1);
           }
 
-          if (!active$1.length) {
-            css(document.body, 'overflowY', '');
-          }
-
           css(this.$el, 'zIndex', '');
 
           if (!active$1.some((modal) => modal.clsPage === this.clsPage)) {
@@ -3988,16 +4013,22 @@
       return () => events.forEach((fn) => fn());
     }
 
+    let prevented;
     function preventBackgroundScroll() {
-      const { body, documentElement } = document;
-      css(body, {
-        overflowY: width(window) > documentElement.clientWidth ? 'scroll' : '',
-        touchAction: 'none' });
+      if (prevented) {
+        return noop;
+      }
+      prevented = true;
+
+      const { scrollingElement } = document;
+      css(scrollingElement, {
+        overflowY: 'hidden',
+        touchAction: 'none',
+        paddingRight: width(window) - scrollingElement.clientWidth });
 
-      css(documentElement, 'overflowY', 'hidden');
       return () => {
-        css(documentElement, 'overflowY', '');
-        css(body, { overflowY: '', touchAction: '' });
+        prevented = false;
+        css(scrollingElement, { overflowY: '', touchAction: '', paddingRight: '' });
       };
     }
 
@@ -4014,7 +4045,7 @@
     let active;
 
     var drop = {
-      mixins: [Container, Lazyload, Position, Togglable],
+      mixins: [Container, Lazyload, Position, Style, Togglable],
 
       args: 'pos',
 
@@ -4028,7 +4059,7 @@
         stretch: Boolean,
         delayShow: Number,
         delayHide: Number,
-        display: String,
+        autoUpdate: Boolean,
         clsDrop: String,
         animateOut: Boolean,
         bgScroll: Boolean },
@@ -4044,7 +4075,7 @@
         stretch: false,
         delayShow: 0,
         delayHide: 800,
-        display: null,
+        autoUpdate: true,
         clsDrop: false,
         animateOut: false,
         bgScroll: true,
@@ -4088,6 +4119,7 @@
 
       disconnected() {
         if (this.isActive()) {
+          this.hide(false);
           active = null;
         }
       },
@@ -4221,7 +4253,8 @@
 
           this.tracker.init();
 
-          for (const handler of [
+          const update = () => this.$emit();
+          const handlers = [
           on(
           document,
           pointerDown$1,
@@ -4250,29 +4283,28 @@
             }
           }),
 
+          on(window, 'resize', update),
+
+          (() => {
+            const observer = observeResize(
+            scrollParents(this.$el).concat(this.targetEl),
+            update);
+
+            return () => observer.disconnect();
+          })(),
+
+          ...(this.autoUpdate ?
+          [on([document, scrollParents(this.$el)], 'scroll', update)] :
+          []),
+
           ...(this.bgScroll ?
           [] :
-          [preventOverscroll(this.$el), preventBackgroundScroll()]),
+          [preventOverscroll(this.$el), preventBackgroundScroll()])];
+
+
+          once(this.$el, 'hide', () => handlers.forEach((handler) => handler()), {
+            self: true });
 
-          ...(this.display === 'static' ?
-          [] :
-          (() => {
-            const handler = () => this.$emit();
-            return [
-            on(window, 'resize', handler),
-            on([document, scrollParents(this.$el)], 'scroll', handler),
-            (() => {
-              const observer = observeResize(
-              scrollParents(this.$el),
-              handler);
-
-              return () => observer.disconnect();
-            })()];
-
-          })())])
-          {
-            once(this.$el, 'hide', handler, { self: true });
-          }
         } },
 
 
@@ -4381,13 +4413,13 @@
 
         position() {
           removeClass(this.$el, this.clsDrop + "-stack");
-          css(this.$el, { maxWidth: '', top: '', left: '' });
+          attr(this.$el, 'style', this._style);
 
           // Ensure none positioned element does not generate scrollbars
           this.$el.hidden = true;
 
           const boundary = query(this.boundary, this.$el);
-          const boundaryOffset = offsetViewport(boundary || window);
+          const boundaryOffset = offset(boundary || window);
           const viewports = this.target.map((target) => offsetViewport(scrollParents(target)[0]));
           const viewportOffset = this.getViewportOffset(this.$el);
 
@@ -4397,12 +4429,9 @@
 
 
           for (const [i, [axis, prop]] of dirs) {
-            if (includes([axis, true], this.stretch)) {
+            if (this.axis !== axis && includes([axis, true], this.stretch)) {
               css(this.$el, {
-                [prop]:
-                this.axis === axis ?
-                '' // Reset prop in main axis before positioning to not cause the drop to flip prematurely
-                : Math.min(
+                [prop]: Math.min(
                 boundaryOffset[prop],
                 viewports[i][prop] - 2 * viewportOffset),
 
@@ -5218,7 +5247,7 @@
 
     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\"><style>.uk-navbar-toggle svg > [class*='line-'] {\n        transition: 0.2s ease-in-out;\n        transition-property: transform, opacity,;\n        transform-origin: center;\n        opacity: 1;\n    }\n\n    .uk-navbar-toggle[aria-expanded=\"true\"] svg > .line-2 { transform: rotate(45deg); }\n    .uk-navbar-toggle[aria-expanded=\"true\"] svg > .line-3 { transform: rotate(-45deg); }\n\n    .uk-navbar-toggle[aria-expanded=\"true\"] svg > .line-1,\n    .uk-navbar-toggle[aria-expanded=\"true\"] svg > .line-4 { opacity: 0; }\n    .uk-navbar-toggle[aria-expanded=\"true\"] svg > .line-1 { transform: translateY(6px) scaleX(0); }\n    .uk-navbar-toggle[aria-expanded=\"true\"] svg > .line-4 { transform: translateY(-6px) scaleX(0); }</style><rect class=\"line-1\" y=\"3\" width=\"20\" height=\"2\"/><rect class=\"line-2\" y=\"9\" width=\"20\" height=\"2\"/><rect class=\"line-3\" y=\"9\" width=\"20\" height=\"2\"/><rect class=\"line-4\" y=\"15\" width=\"20\" height=\"2\"/></svg>";
+    var navbarToggleIcon = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><style>.uk-navbar-toggle-animate svg > [class*='line-'] {\n            transition: 0.2s ease-in-out;\n            transition-property: transform, opacity,;\n            transform-origin: center;\n            opacity: 1;\n        }\n\n        .uk-navbar-toggle svg > .line-3 { opacity: 0; }\n        .uk-navbar-toggle-animate[aria-expanded=\"true\"] svg > .line-3 { opacity: 1; }\n\n        .uk-navbar-toggle-animate[aria-expanded=\"true\"] svg > .line-2 { transform: rotate(45deg); }\n        .uk-navbar-toggle-animate[aria-expanded=\"true\"] svg > .line-3 { transform: rotate(-45deg); }\n\n        .uk-navbar-toggle-animate[aria-expanded=\"true\"] svg > .line-1,\n        .uk-navbar-toggle-animate[aria-expanded=\"true\"] svg > .line-4 { opacity: 0; }\n        .uk-navbar-toggle-animate[aria-expanded=\"true\"] svg > .line-1 { transform: translateY(6px) scaleX(0); }\n        .uk-navbar-toggle-animate[aria-expanded=\"true\"] svg > .line-4 { transform: translateY(-6px) scaleX(0); }</style><rect class=\"line-1\" y=\"3\" width=\"20\" height=\"2\"/><rect class=\"line-2\" y=\"9\" width=\"20\" height=\"2\"/><rect class=\"line-3\" y=\"9\" width=\"20\" height=\"2\"/><rect class=\"line-4\" 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>";
 
@@ -5821,6 +5850,8 @@
         offset: Number,
         boundary: Boolean,
         target: Boolean,
+        targetX: Boolean,
+        targetY: Boolean,
         clsDrop: String,
         delayShow: Number,
         delayHide: Number,
@@ -6169,7 +6200,7 @@
 
       methods: {
         getActive() {
-          return active && within(active.targetEl, this.$el) && active;
+          return includes(this.dropdowns, active == null ? void 0 : active.$el) && active;
         },
 
         transitionTo(newHeight, el) {
@@ -6409,9 +6440,12 @@
             addClass(parent(this.panel), this.clsMode);
           }
 
-          addClass(document.body, this.clsContainer, this.clsFlip);
-          css(document.body, 'touch-action', 'pan-y pinch-zoom');
+          const { body, scrollingElement } = document;
+
+          addClass(body, this.clsContainer, this.clsFlip);
+          css(body, 'touch-action', 'pan-y pinch-zoom');
           css(this.$el, 'display', 'block');
+          css(this.panel, 'maxWidth', scrollingElement.clientWidth);
           addClass(this.$el, this.clsOverlay);
           addClass(
           this.panel,
@@ -6419,8 +6453,8 @@
           this.mode === 'reveal' ? '' : this.clsMode);
 
 
-          height(document.body); // force reflow
-          addClass(document.body, this.clsContainerAnimation);
+          height(body); // force reflow
+          addClass(body, this.clsContainerAnimation);
 
           this.clsContainerAnimation && suppressUserScale();
         } },
@@ -6452,6 +6486,7 @@
           removeClass(this.panel, this.clsSidebarAnimation, this.clsMode);
           removeClass(this.$el, this.clsOverlay);
           css(this.$el, 'display', '');
+          css(this.panel, 'maxWidth', '');
           removeClass(document.body, this.clsContainer, this.clsFlip);
         } },
 
@@ -7588,7 +7623,7 @@
 
 
       {
-        name: 'toggled',
+        name: 'hide show',
 
         self: true,
 
@@ -7596,10 +7631,8 @@
           return this.target;
         },
 
-        handler(e, toggled) {
-          if (e.target === this.target[0]) {
-            this.updateAria(toggled);
-          }
+        handler(_ref2) {let { type } = _ref2;
+          this.updateAria(type === 'show');
         } },
 
 
@@ -9480,7 +9513,9 @@
         this.$mount(
         append(
         container, "<div class=\"" +
-        this.clsMsg + (this.status ? " " + this.clsMsg + "-" + this.status : '') + "\"> <a href class=\"" +
+        this.clsMsg + (
+        this.status ? " " + this.clsMsg + "-" + this.status : '') + "\" role=\"alert\"> <a href class=\"" +
+
         this.clsClose + "\" data-uk-close></a> <div>" +
         this.message + "</div> </div>"));