uikit 3.13.8-dev.f030a8b39 → 3.13.9

package/dist/js/uikit-core.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.13.8-dev.f030a8b39 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.13.9 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -1740,11 +1740,11 @@
       }
     }
 
-    const stateKey$1 = '_ukPlayer';
+    const stateKey = '_ukPlayer';
     let counter = 0;
     function enableApi(el) {
-      if (el[stateKey$1]) {
-        return el[stateKey$1];
+      if (el[stateKey]) {
+        return el[stateKey];
       }
 
       const youtube = isYoutube(el);
@@ -1753,7 +1753,7 @@
       const id = ++counter;
       let poller;
 
-      return el[stateKey$1] = new Promise((resolve) => {
+      return el[stateKey] = new Promise((resolve) => {
         youtube &&
         once(el, 'load', () => {
           const listener = () => post(el, { event: 'listening', id });
@@ -1933,156 +1933,157 @@
       return document.scrollingElement || document.documentElement;
     }
 
-    const dirs = [
-    ['width', 'x', 'left', 'right'],
-    ['height', 'y', 'top', 'bottom']];
+    const dirs = {
+      width: ['x', 'left', 'right'],
+      height: ['y', 'top', 'bottom'] };
 
 
-    function positionAt(element, target, options) {
-      options = {
-        attach: {
-          element: ['left', 'top'],
-          target: ['left', 'top'],
-          ...options.attach },
+    function positionAt(
+    element,
+    target,
+    elAttach,
+    targetAttach,
+    elOffset,
+    targetOffset,
+    flip,
+    boundary)
+    {
+      elAttach = getPos(elAttach);
+      targetAttach = getPos(targetAttach);
 
-        offset: [0, 0],
-        ...options };
+      const flipped = { element: elAttach, target: targetAttach };
 
+      if (!element || !target) {
+        return flipped;
+      }
 
-      const dim = options.flip ?
-      attachToWithFlip(element, target, options) :
-      attachTo(element, target, options);
+      const dim = offset(element);
+      const targetDim = offset(target);
+      const position = targetDim;
 
-      offset(element, dim);
-    }
+      moveTo(position, elAttach, dim, -1);
+      moveTo(position, targetAttach, targetDim, 1);
 
-    function attachTo(element, target, options) {
-      let { attach, offset: offsetBy } = {
-        attach: {
-          element: ['left', 'top'],
-          target: ['left', 'top'],
-          ...options.attach },
+      elOffset = getOffsets(elOffset, dim.width, dim.height);
+      targetOffset = getOffsets(targetOffset, targetDim.width, targetDim.height);
 
-        offset: [0, 0],
-        ...options };
+      elOffset['x'] += targetOffset['x'];
+      elOffset['y'] += targetOffset['y'];
 
+      position.left += elOffset['x'];
+      position.top += elOffset['y'];
 
-      const position = offset(element);
-      const targetOffset = offset(target);
-      for (const i in dirs) {
-        const [prop, dir, start, end] = dirs[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;
-    }
+      if (flip) {
+        let boundaries = scrollParents(element).map(getViewport$1);
 
-    function attachToWithFlip(element, target, options) {
-      const position = attachTo(element, target, options);
-      const targetDim = offset(target);
-      const viewports = scrollParents(element).map(getViewport$1);
+        if (boundary && !includes(boundaries, boundary)) {
+          boundaries.unshift(boundary);
+        }
 
-      let {
-        flip,
-        attach: { element: elAttach, target: targetAttach },
-        offset: elOffset,
-        boundary,
-        viewport } =
-      options;
+        boundaries = boundaries.map((el) => offset(el));
 
-      viewports.push(viewport);
+        each(dirs, (_ref, prop) => {let [dir, align, alignFlip] = _ref;
+          if (!(flip === true || includes(flip, dir))) {
+            return;
+          }
 
-      for (const i in dirs) {
-        const [prop, dir, start, end] = dirs[i];
+          boundaries.some((boundary) => {
+            const elemOffset =
+            elAttach[dir] === align ?
+            -dim[prop] :
+            elAttach[dir] === alignFlip ?
+            dim[prop] :
+            0;
 
-        if (flip !== true && !includes(flip, dir)) {
-          continue;
-        }
+            const targetOffset =
+            targetAttach[dir] === align ?
+            targetDim[prop] :
+            targetAttach[dir] === alignFlip ?
+            -targetDim[prop] :
+            0;
 
-        const willFlip =
-        !intersectLine(position, targetDim, i) && intersectLine(position, targetDim, 1 - i);
+            if (
+            position[align] < boundary[align] ||
+            position[align] + dim[prop] > boundary[alignFlip])
+            {
+              const centerOffset = dim[prop] / 2;
+              const centerTargetOffset =
+              targetAttach[dir] === 'center' ? -targetDim[prop] / 2 : 0;
 
-        viewport = getIntersectionArea(
-        ...viewports,
-        willFlip || position[prop] > offset(boundary)[prop] ? null : boundary);
+              return (
+                elAttach[dir] === 'center' && (
+                apply(centerOffset, centerTargetOffset) ||
+                apply(-centerOffset, -centerTargetOffset)) ||
+                apply(elemOffset, targetOffset));
 
-        const isInStartBoundary = position[start] >= viewport[start];
-        const isInEndBoundary = position[end] <= viewport[end];
+            }
 
-        if (isInStartBoundary && isInEndBoundary) {
-          continue;
-        }
+            function apply(elemOffset, targetOffset) {
+              const newVal = toFloat(
+              (position[align] + elemOffset + targetOffset - elOffset[dir] * 2).toFixed(4));
 
-        let offsetBy;
 
-        // Flip
-        if (willFlip) {
-          if (
-          elAttach[i] === end && isInStartBoundary ||
-          elAttach[i] === start && isInEndBoundary)
-          {
-            continue;
-          }
+              if (newVal >= boundary[align] && newVal + dim[prop] <= boundary[alignFlip]) {
+                position[align] = newVal;
 
-          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;
-
-          // Move
-        } else {
-          offsetBy =
-          clamp(
-          clamp(position[start], viewport[start], viewport[end] - position[prop]),
-          targetDim[start] - position[prop] + elOffset[i],
-          targetDim[end] - elOffset[i]) -
-          position[start];
-        }
+                for (const el of ['element', 'target']) {
+                  if (elemOffset) {
+                    flipped[el][dir] =
+                    flipped[el][dir] === dirs[prop][1] ?
+                    dirs[prop][2] :
+                    dirs[prop][1];
+                  }
+                }
 
-        position[start] = position[dir] = position[start] + offsetBy;
-        position[end] += offsetBy;
+                return true;
+              }
+            }
+          });
+        });
       }
 
-      return position;
-    }
+      offset(element, position);
 
-    function moveBy(start, end, dim) {
-      return start === 'center' ? dim / 2 : start === end ? dim : 0;
+      return flipped;
     }
 
-    function getIntersectionArea() {
-      let intersection;for (var _len = arguments.length, elements = new Array(_len), _key = 0; _key < _len; _key++) {elements[_key] = arguments[_key];}
-      for (const el of elements.filter(Boolean)) {
-        const rect = offset(el);
-        if (!intersection) {
-          intersection = rect;
-          continue;
-        }
-        for (const prop of ['left', 'top']) {
-          intersection[prop] = Math.max(rect[prop], intersection[prop]);
-        }
-        for (const prop of ['right', 'bottom']) {
-          intersection[prop] = Math.min(rect[prop], intersection[prop]);
+    function moveTo(position, attach, dim, factor) {
+      each(dirs, (_ref2, prop) => {let [dir, align, alignFlip] = _ref2;
+        if (attach[dir] === alignFlip) {
+          position[align] += dim[prop] * factor;
+        } else if (attach[dir] === 'center') {
+          position[align] += dim[prop] * factor / 2;
         }
+      });
+    }
+
+    function getPos(pos) {
+      const x = /left|center|right/;
+      const y = /top|center|bottom/;
+
+      pos = (pos || '').split(' ');
+
+      if (pos.length === 1) {
+        pos = x.test(pos[0]) ?
+        pos.concat('center') :
+        y.test(pos[0]) ?
+        ['center'].concat(pos) :
+        ['center', 'center'];
       }
-      return intersection;
+
+      return {
+        x: x.test(pos[0]) ? pos[0] : 'center',
+        y: y.test(pos[1]) ? pos[1] : 'center' };
+
     }
 
-    function intersectLine(dimA, dimB, dir) {
-      const [,, start, end] = dirs[dir];
-      return dimA[end] > dimB[start] && dimB[end] > dimA[start];
+    function getOffsets(offsets, width, height) {
+      const [x, y] = (offsets || '').split(' ');
+
+      return {
+        x: x ? toFloat(x) * (endsWith(x, '%') ? width / 100 : 1) : 0,
+        y: y ? toFloat(y) * (endsWith(y, '%') ? height / 100 : 1) : 0 };
+
     }
 
     var util = /*#__PURE__*/Object.freeze({
@@ -2411,7 +2412,7 @@
         const {
           $options: { computed } } =
         this;
-        const values = { ...this._computed };
+        const values = { ...(initial ? {} : this._computed) };
         this._computed = {};
 
         for (const key in computed) {
@@ -2891,7 +2892,7 @@
     UIkit.data = '__uikit__';
     UIkit.prefix = 'uk-';
     UIkit.options = {};
-    UIkit.version = '3.13.8-dev.f030a8b39';
+    UIkit.version = '3.13.9';
 
     globalAPI(UIkit);
     hooksAPI(UIkit);
@@ -3218,7 +3219,7 @@
       computed: {
         items: {
           get(_ref, $el) {let { targets } = _ref;
-            return $$(targets, $el);
+            return $$(targets, $el).filter((el) => $(this.content, el));
           },
 
           watch(items, prev) {
@@ -3505,42 +3506,45 @@
 
       connected() {
         this.pos = this.$props.pos.split('-').concat('center').slice(0, 2);
-        this.axis = includes(['top', 'bottom'], this.pos[0]) ? 'y' : 'x';
+        this.dir = this.pos[0];
+        this.align = this.pos[1];
       },
 
       methods: {
         positionAt(element, target, boundary) {
-          const [dir, align] = this.pos;
+          const axis = this.getAxis();
+          const dir = this.pos[0];
+          const align = this.pos[1];
 
           let { offset: offset$1 } = this;
           if (!isNumeric(offset$1)) {
             const node = $(offset$1);
             offset$1 = node ?
-            offset(node)[this.axis === 'x' ? 'left' : 'top'] -
-            offset(target)[this.axis === 'x' ? 'right' : 'bottom'] :
+            offset(node)[axis === 'x' ? 'left' : 'top'] -
+            offset(target)[axis === 'x' ? 'right' : 'bottom'] :
             0;
           }
           offset$1 = toPx(offset$1) + toPx(getCssVar('position-offset', element));
-          offset$1 = [includes(['left', 'top'], dir) ? -offset$1 : +offset$1, 0];
-
-          const attach = {
-            element: [flipPosition(dir), align],
-            target: [dir, align] };
-
 
-          if (this.axis === 'y') {
-            for (const prop in attach) {
-              attach[prop] = attach[prop].reverse();
-            }
-            offset$1 = offset$1.reverse();
-          }
-
-          positionAt(element, target, {
-            attach,
-            offset: offset$1,
-            boundary,
-            flip: this.flip });
+          const { x, y } = positionAt(
+          element,
+          target,
+          axis === 'x' ? flipPosition(dir) + " " + align : align + " " + flipPosition(dir),
+          axis === 'x' ? dir + " " + align : align + " " + dir,
+          axis === 'x' ? "" + (
+          dir === 'left' ? -offset$1 : offset$1) : " " + (
+          dir === 'top' ? -offset$1 : offset$1),
+          null,
+          this.flip,
+          boundary).
+          target;
+
+          this.dir = axis === 'x' ? x : y;
+          this.align = axis === 'x' ? y : x;
+        },
 
+        getAxis() {
+          return this.dir === 'top' || this.dir === 'bottom' ? 'y' : 'x';
         } } };
 
     let active$1;
@@ -3757,7 +3761,13 @@
               this.hide(false);
             }
           }),
-          on(window, 'resize', () => this.$emit('resize'))])
+          on(window, 'resize', () => this.$emit()),
+          on(
+          document,
+          'scroll',
+          (_ref4) => {let { target } = _ref4;return target.contains(this.$el) && this.$emit();},
+          true)])
+
           {
             once(this.$el, 'hide', handler, { self: true });
           }
@@ -3777,7 +3787,7 @@
       {
         name: 'hide',
 
-        handler(_ref4) {let { target } = _ref4;
+        handler(_ref5) {let { target } = _ref5;
           if (this.$el !== target) {
             active$1 =
             active$1 === null && within(target, this.$el) && this.isToggled() ?
@@ -3797,9 +3807,7 @@
           if (this.isToggled() && !hasClass(this.$el, this.clsEnter)) {
             this.position();
           }
-        },
-
-        events: ['resize'] },
+        } },
 
 
       methods: {
@@ -3877,18 +3885,17 @@
           const boundaryOffset = offset(boundary);
           const targetOffset = offset(this.target);
           const alignTo = this.boundaryAlign ? boundaryOffset : targetOffset;
-          const prop = this.axis === 'y' ? 'width' : 'height';
-
-          css(this.$el, "max-" + prop, '');
 
           if (this.pos[1] === 'justify') {
+            const prop = this.getAxis() === 'y' ? 'width' : 'height';
             css(this.$el, prop, alignTo[prop]);
-          } else if (this.$el.offsetWidth > boundaryOffset.width) {
+          } else if (
+          this.$el.offsetWidth >
+          Math.max(boundaryOffset.right - alignTo.left, alignTo.right - boundaryOffset.left))
+          {
             addClass(this.$el, this.clsDrop + "-stack");
           }
 
-          css(this.$el, "max-" + prop, boundaryOffset[prop]);
-
           this.positionAt(this.$el, this.boundaryAlign ? boundary : this.target, boundary);
         } } };
 
@@ -3987,7 +3994,7 @@
 
 
       resizeTargets() {
-        return this.$el.children;
+        return [this.$el, this.$el.children];
       },
 
       connected() {
@@ -4288,8 +4295,7 @@
 
       data: {
         target: '> *',
-        row: true,
-        forceHeight: true },
+        row: true },
 
 
       computed: {
@@ -4305,7 +4311,7 @@
 
 
       resizeTargets() {
-        return this.elements;
+        return [this.$el, this.elements];
       },
 
       update: {
@@ -4330,22 +4336,14 @@
         return { heights: [''], elements };
       }
 
+      css(elements, 'minHeight', '');
       let heights = elements.map(getHeight);
-      let max = Math.max(...heights);
-      const hasMinHeight = elements.some((el) => el.style.minHeight);
-      const hasShrunk = elements.some((el, i) => !el.style.minHeight && heights[i] < max);
-
-      if (hasMinHeight && hasShrunk) {
-        css(elements, 'minHeight', '');
-        heights = elements.map(getHeight);
-        max = Math.max(...heights);
-      }
-
-      heights = elements.map((el, i) =>
-      heights[i] === max && toFloat(el.style.minHeight).toFixed(2) !== max.toFixed(2) ? '' : max);
+      const max = Math.max(...heights);
 
+      return {
+        heights: elements.map((el, i) => heights[i].toFixed(2) === max.toFixed(2) ? '' : max),
+        elements };
 
-      return { heights, elements };
     }
 
     function getHeight(element) {
@@ -5512,8 +5510,6 @@
         dropbar: false,
         dropbarAnchor: false,
         duration: 200,
-        forceHeight: true,
-        selMinHeight: navItem,
         container: false },
 
 
@@ -5750,7 +5746,7 @@
           return this.dropbar;
         },
 
-        handler(_, _ref10) {let { $el, pos: [dir] = [] } = _ref10;
+        handler(_, _ref10) {let { $el, dir } = _ref10;
           if (!hasClass($el, this.clsDrop)) {
             return;
           }
@@ -6295,7 +6291,6 @@
       return document.getElementById(decodeURIComponent(el.hash).substring(1));
     }
 
-    const stateKey = '_ukScrollspy';
     var scrollspy = {
       mixins: [Scroll],
 
@@ -6328,43 +6323,64 @@
             return target ? $$(target, $el) : [$el];
           },
 
-          watch(elements) {
+          watch(elements, prev) {
             if (this.hidden) {
               css(filter(elements, ":not(." + this.inViewClass + ")"), 'visibility', 'hidden');
             }
+
+            if (prev) {
+              this.$reset();
+            }
           },
 
           immediate: true } },
 
 
 
-      disconnected() {
-        for (const el of this.elements) {var _el$stateKey;
-          removeClass(el, this.inViewClass, ((_el$stateKey = el[stateKey]) == null ? void 0 : _el$stateKey.cls) || '');
-          delete el[stateKey];
-        }
-      },
+      connected() {
+        this._data.elements = new Map();
+        this.registerObserver(
+        observeIntersection(
+        this.elements,
+        (records) => {
+          const elements = this._data.elements;
+          for (const { target: el, isIntersecting } of records) {
+            if (!elements.has(el)) {
+              elements.set(el, {
+                cls: data(el, 'uk-scrollspy-class') || this.cls });
 
-      update: [
-      {
-        read() {
-          for (const el of this.elements) {
-            if (!el[stateKey]) {
-              el[stateKey] = { cls: data(el, 'uk-scrollspy-class') || this.cls };
             }
 
-            if (!this.repeat && el[stateKey].show) {
+            const state = elements.get(el);
+            if (!this.repeat && state.show) {
               continue;
             }
 
-            el[stateKey].show = isInView(el, this.offsetTop, this.offsetLeft);
+            state.show = isIntersecting;
           }
+
+          this.$emit();
         },
+        {
+          rootMargin: toPx(this.offsetTop, 'height') - 1 + "px " + (
+          toPx(this.offsetLeft, 'width') - 1) + "px" },
+
+
+        false));
 
-        write(data) {
-          for (const el of this.elements) {
-            const state = el[stateKey];
 
+      },
+
+      disconnected() {
+        for (const [el, state] of this._data.elements.entries()) {
+          removeClass(el, this.inViewClass, (state == null ? void 0 : state.cls) || '');
+        }
+      },
+
+      update: [
+      {
+        write(data) {
+          for (const [el, state] of data.elements.entries()) {
             if (state.show && !state.inview && !state.queued) {
               state.queued = true;
 
@@ -6381,15 +6397,13 @@
               this.toggle(el, false);
             }
           }
-        },
-
-        events: ['scroll', 'resize'] }],
+        } }],
 
 
 
       methods: {
         toggle(el, inview) {
-          const state = el[stateKey];
+          const state = this._data.elements.get(el);
 
           state.off == null ? void 0 : state.off();
 
@@ -6612,13 +6626,13 @@
             return false;
           }
 
-          const hide = this.isActive && types.has('resize');
+          const hide = this.active && types.has('resize');
           if (hide) {
             css(this.selTarget, 'transition', '0s');
             this.hide();
           }
 
-          if (!this.isActive) {
+          if (!this.active) {
             height$1 = offset(this.$el).height;
             margin = css(this.$el, 'margin');
           }
@@ -7140,7 +7154,7 @@
           }
 
           // Skip if state does not change e.g. hover + focus received
-          if (this._showState && show === (expanded !== this._showState)) {
+          if (this._showState && show && expanded !== this._showState) {
             // Ensure reset if state has changed through click
             if (!show) {
               this._showState = null;