uikit 3.13.1-dev.dedbd3fce → 3.13.2-dev.696f00752

package/dist/js/uikit-core.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.13.1-dev.dedbd3fce | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.13.2-dev.696f00752 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -767,21 +767,22 @@
           property = propName(property);
 
           if (isUndefined(value)) {
-            return getStyle(element, property);
-          } else if (!value && !isNumber(value)) {
-            element.style.removeProperty(property);
+            return getComputedStyle(element).getPropertyValue(property);
           } else {
             element.style.setProperty(
             property,
-            isNumeric(value) && !cssNumber[property] ? value + "px" : value,
+            isNumeric(value) && !cssNumber[property] ?
+            value + "px" :
+            value || isNumber(value) ?
+            value :
+            '',
             priority);
 
           }
         } else if (isArray(property)) {
-          const styles = getStyles(element);
           const props = {};
           for (const prop of property) {
-            props[prop] = styles[propName(prop)];
+            props[prop] = css(element, prop);
           }
           return props;
         } else if (isObject(property)) {
@@ -792,19 +793,9 @@
       return elements[0];
     }
 
-    function getStyles(element, pseudoElt) {
-      return toWindow(element).getComputedStyle(element, pseudoElt);
-    }
-
-    function getStyle(element, property, pseudoElt) {
-      return getStyles(element, pseudoElt)[property];
-    }
-
     const propertyRe = /^\s*(["'])?(.*?)\1\s*$/;
-    function getCssVar(name) {
-      return getStyles(document.documentElement).
-      getPropertyValue("--uk-" + name).
-      replace(propertyRe, '$2');
+    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
@@ -813,6 +804,10 @@
     const cssPrefixes = ['webkit', 'moz'];
 
     function vendorPropName(name) {
+      if (name[0] === '-') {
+        return name;
+      }
+
       name = hyphenate(name);
 
       const { style } = document.documentElement;
@@ -1019,8 +1014,8 @@
         const offsetBy = { height: scrollY, width: scrollX };
 
         for (const dir in dirs$1) {
-          for (const i in dirs$1[dir]) {
-            currentOffset[dirs$1[dir][i]] += offsetBy[dir];
+          for (const prop of dirs$1[dir]) {
+            currentOffset[prop] += offsetBy[dir];
           }
         }
       }
@@ -1935,157 +1930,153 @@
       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,
-    elAttach,
-    targetAttach,
-    elOffset,
-    targetOffset,
-    flip,
-    boundary)
-    {
-      elAttach = getPos(elAttach);
-      targetAttach = getPos(targetAttach);
+    function positionAt(element, target, options) {
+      options = {
+        attach: {
+          element: ['left', 'top'],
+          target: ['left', 'top'],
+          ...options.attach },
 
-      const flipped = { element: elAttach, target: targetAttach };
+        offset: [0, 0],
+        ...options };
 
-      if (!element || !target) {
-        return flipped;
-      }
 
-      const dim = offset(element);
-      const targetDim = offset(target);
-      const position = targetDim;
+      const dim = options.flip ?
+      attachToWithFlip(element, target, options) :
+      attachTo(element, target, options);
 
-      moveTo(position, elAttach, dim, -1);
-      moveTo(position, targetAttach, targetDim, 1);
+      offset(element, dim);
+    }
 
-      elOffset = getOffsets(elOffset, dim.width, dim.height);
-      targetOffset = getOffsets(targetOffset, targetDim.width, targetDim.height);
+    function attachTo(element, target, options) {
+      let { attach, offset: offsetBy } = {
+        attach: {
+          element: ['left', 'top'],
+          target: ['left', 'top'],
+          ...options.attach },
 
-      elOffset['x'] += targetOffset['x'];
-      elOffset['y'] += targetOffset['y'];
+        offset: [0, 0],
+        ...options };
 
-      position.left += elOffset['x'];
-      position.top += elOffset['y'];
 
-      if (flip) {
-        let boundaries = scrollParents(element).map(getViewport$1);
+      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 (boundary && !includes(boundaries, boundary)) {
-          boundaries.unshift(boundary);
-        }
+    function attachToWithFlip(element, target, options) {
+      const position = attachTo(element, target, options);
+      const targetDim = offset(target);
+      const viewports = scrollParents(element).map(getViewport$1);
 
-        boundaries = boundaries.map((el) => offset(el));
+      let {
+        flip,
+        attach: { element: elAttach, target: targetAttach },
+        offset: elOffset,
+        boundary,
+        viewport } =
+      options;
 
-        each(dirs, (_ref, prop) => {let [dir, align, alignFlip] = _ref;
-          if (!(flip === true || includes(flip, dir))) {
-            return;
-          }
+      viewports.push(viewport);
 
-          boundaries.some((boundary) => {
-            const elemOffset =
-            elAttach[dir] === align ?
-            -dim[prop] :
-            elAttach[dir] === alignFlip ?
-            dim[prop] :
-            0;
+      for (const i in dirs) {
+        const [prop, dir, start, end] = dirs[i];
 
-            const targetOffset =
-            targetAttach[dir] === align ?
-            targetDim[prop] :
-            targetAttach[dir] === alignFlip ?
-            -targetDim[prop] :
-            0;
+        if (flip !== true && !includes(flip, dir)) {
+          continue;
+        }
 
-            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;
+        const willFlip =
+        !intersectLine(position, targetDim, i) && intersectLine(position, targetDim, 1 - i);
 
-              return (
-                elAttach[dir] === 'center' && (
-                apply(centerOffset, centerTargetOffset) ||
-                apply(-centerOffset, -centerTargetOffset)) ||
-                apply(elemOffset, targetOffset));
+        viewport = getIntersectionArea(...viewports, willFlip ? null : boundary);
+        const isInStartBoundary = position[start] >= viewport[start];
+        const isInEndBoundary = position[end] <= viewport[end];
 
-            }
-
-            function apply(elemOffset, targetOffset) {
-              const newVal = toFloat(
-              (position[align] + elemOffset + targetOffset - elOffset[dir] * 2).toFixed(4));
+        if (isInStartBoundary && isInEndBoundary) {
+          continue;
+        }
 
+        let offsetBy;
 
-              if (newVal >= boundary[align] && newVal + dim[prop] <= boundary[alignFlip]) {
-                position[align] = newVal;
+        // Flip
+        if (willFlip) {
+          if (
+          elAttach[i] === end && isInStartBoundary ||
+          elAttach[i] === start && isInEndBoundary)
+          {
+            continue;
+          }
 
-                for (const el of ['element', 'target']) {
-                  if (elemOffset) {
-                    flipped[el][dir] =
-                    flipped[el][dir] === dirs[prop][1] ?
-                    dirs[prop][2] :
-                    dirs[prop][1];
-                  }
-                }
+          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];
+        }
 
-                return true;
-              }
-            }
-          });
-        });
+        position[start] = position[dir] = position[start] + offsetBy;
+        position[end] += offsetBy;
       }
 
-      offset(element, position);
-
-      return flipped;
+      return position;
     }
 
-    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 moveBy(start, end, dim) {
+      return start === 'center' ? dim / 2 : start === end ? dim : 0;
     }
 
-    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'];
+    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]);
+        }
       }
-
-      return {
-        x: x.test(pos[0]) ? pos[0] : 'center',
-        y: y.test(pos[1]) ? pos[1] : 'center' };
-
+      return intersection;
     }
 
-    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 };
-
+    function intersectLine(dimA, dimB, dir) {
+      const [,, start, end] = dirs[dir];
+      return dimA[end] > dimB[start] && dimB[end] > dimA[start];
     }
 
     var util = /*#__PURE__*/Object.freeze({
@@ -2894,7 +2885,7 @@
     UIkit.data = '__uikit__';
     UIkit.prefix = 'uk-';
     UIkit.options = {};
-    UIkit.version = '3.13.1-dev.dedbd3fce';
+    UIkit.version = '3.13.2-dev.696f00752';
 
     globalAPI(UIkit);
     hooksAPI(UIkit);
@@ -3431,7 +3422,7 @@
 
 
       events: {
-        load() {
+        'load loadedmetadata'() {
           this.$emit('resize');
         } },
 
@@ -3497,15 +3488,13 @@
       props: {
         pos: String,
         offset: null,
-        flip: Boolean,
-        clsPos: String },
+        flip: Boolean },
 
 
       data: {
         pos: "bottom-" + (isRtl ? 'right' : 'left'),
         flip: true,
-        offset: false,
-        clsPos: '' },
+        offset: false },
 
 
       connected() {
@@ -3516,13 +3505,11 @@
 
       methods: {
         positionAt(element, target, boundary) {
-          removeClasses(element, this.clsPos + "-(top|bottom|left|right)(-[a-z]+)?");
-
-          let { offset: offset$1 } = this;
           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 ?
@@ -3530,30 +3517,64 @@
             offset(target)[axis === 'x' ? 'right' : 'bottom'] :
             0;
           }
+          offset$1 += toPx(getCssVar('position-margin-offset', element));
 
-          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;
-
-          toggleClass(element, this.clsPos + "-" + this.dir + "-" + this.align, this.offset === false);
+          positionAt(element, target, {
+            boundary,
+            flip: this.flip,
+            attach: {
+              element: axis === 'x' ? [flipPosition(dir), align] : [align, flipPosition(dir)],
+              target: axis === 'x' ? [dir, align] : [align, dir] },
+
+            offset:
+            axis === 'x' ?
+            [dir === 'left' ? -offset$1 : +offset$1, 0] :
+            [0, dir === 'top' ? -offset$1 : +offset$1] });
+
+
+          [this.dir, this.align] = getAlignment(element, target);
+          console.log(this.dir, this.align);
         },
 
         getAxis() {
-          return this.dir === 'top' || this.dir === 'bottom' ? 'y' : 'x';
+          return includes(['top', 'bottom'], this.dir) ? 'y' : 'x';
         } } };
 
+
+
+    function getAlignment(el, target) {
+      const elOffset = offset(el);
+      const targetOffset = offset(target);
+      const properties = [
+      ['left', 'right'],
+      ['top', 'bottom']];
+
+
+      let dir;
+      for (const props of properties) {
+        if (elOffset[props[0]] > targetOffset[props[1]]) {
+          dir = props[1];
+          break;
+        }
+        if (elOffset[props[1]] < targetOffset[props[0]]) {
+          dir = props[0];
+          break;
+        }
+      }
+
+      let align;
+      const props = includes(properties[0], dir) ? properties[1] : properties[0];
+      if (elOffset[props[0]] === targetOffset[props[0]]) {
+        align = props[0];
+      } else if (elOffset[props[1]] === targetOffset[props[1]]) {
+        align = props[1];
+      } else {
+        align = 'center';
+      }
+
+      return [dir, align];
+    }
+
     let active$1;
 
     var drop = {
@@ -3589,7 +3610,7 @@
       },
 
       connected() {
-        this.clsPos = this.clsDrop = this.$props.clsDrop || "uk-" + this.$options.name;
+        this.clsDrop = this.$props.clsDrop || "uk-" + this.$options.name;
         addClass(this.$el, this.clsDrop);
 
         if (this.toggle && !this.target) {
@@ -3655,7 +3676,7 @@
           if (this.isToggled()) {
             this.hide(false);
           } else {
-            this.show(toggle.$el, false);
+            this.show(toggle == null ? void 0 : toggle.$el, false);
           }
         } },
 
@@ -3667,7 +3688,7 @@
 
         handler(e, toggle) {
           e.preventDefault();
-          this.show(toggle.$el);
+          this.show(toggle == null ? void 0 : toggle.$el);
         } },
 
 
@@ -3878,23 +3899,20 @@
         },
 
         position() {
-          const boundary = this.boundary === true ? window : query(this.boundary, this.$el);
+          const boundary = query(this.boundary, this.$el) || window;
           removeClass(this.$el, this.clsDrop + "-stack");
           toggleClass(this.$el, this.clsDrop + "-boundary", this.boundaryAlign);
 
           const boundaryOffset = offset(boundary);
-          const alignTo = this.boundaryAlign ? boundaryOffset : offset(this.target);
+          const targetOffset = offset(this.target);
+          const alignTo = this.boundaryAlign ? boundaryOffset : targetOffset;
 
           if (this.align === 'justify') {
             const prop = this.getAxis() === 'y' ? 'width' : 'height';
             css(this.$el, prop, alignTo[prop]);
           } else if (
-          boundary &&
           this.$el.offsetWidth >
-          Math.max(
-          boundaryOffset.right - alignTo.left,
-          alignTo.right - boundaryOffset.left))
-
+          Math.max(boundaryOffset.right - alignTo.left, alignTo.right - boundaryOffset.left))
           {
             addClass(this.$el, this.clsDrop + "-stack");
           }
@@ -5556,7 +5574,6 @@
         delayShow: Number,
         delayHide: Number,
         dropbar: Boolean,
-        dropbarMode: String,
         dropbarAnchor: Boolean,
         duration: Number },
 
@@ -5573,7 +5590,6 @@
         flip: 'x',
         boundary: true,
         dropbar: false,
-        dropbarMode: 'slide',
         dropbarAnchor: false,
         duration: 200,
         forceHeight: true,
@@ -5582,8 +5598,8 @@
 
 
       computed: {
-        boundary(_ref, $el) {let { boundary, boundaryAlign } = _ref;
-          return boundary === true || boundaryAlign ? $el : boundary;
+        boundary(_ref, $el) {let { boundary } = _ref;
+          return boundary === true ? $el : boundary;
         },
 
         dropbarAnchor(_ref2, $el) {let { dropbarAnchor } = _ref2;
@@ -5790,10 +5806,16 @@
           return this.dropbar;
         },
 
-        handler() {
+        handler(_, _ref9) {let { $el } = _ref9;
+          if (!hasClass($el, this.clsDrop)) {
+            return;
+          }
+
           if (!parent(this.dropbar)) {
             after(this.dropbarAnchor || this.$el, this.dropbar);
           }
+
+          addClass($el, this.clsDrop + "-dropbar");
         } },
 
 
@@ -5808,21 +5830,15 @@
           return this.dropbar;
         },
 
-        handler(_, _ref9) {let { $el, dir } = _ref9;
+        handler(_, _ref10) {let { $el, dir } = _ref10;
           if (!hasClass($el, this.clsDrop)) {
             return;
           }
 
-          if (this.dropbarMode === 'slide') {
-            addClass(this.dropbar, 'uk-navbar-dropbar-slide');
-          }
-
-          this.clsDrop && addClass($el, this.clsDrop + "-dropbar");
-
           if (dir === 'bottom') {
             this.transitionTo(
-            $el.offsetHeight +
-            toFloat(css($el, 'marginTop')) +
+            offset($el).bottom -
+            offset(this.dropbar).top +
             toFloat(css($el, 'marginBottom')),
             $el);
 
@@ -5841,7 +5857,7 @@
           return this.dropbar;
         },
 
-        handler(e, _ref10) {let { $el } = _ref10;
+        handler(e, _ref11) {let { $el } = _ref11;
           const active = this.getActive();
 
           if (
@@ -5865,7 +5881,7 @@
           return this.dropbar;
         },
 
-        handler(_, _ref11) {let { $el } = _ref11;
+        handler(_, _ref12) {let { $el } = _ref12;
           if (!hasClass($el, this.clsDrop)) {
             return;
           }
@@ -6289,7 +6305,7 @@
         events: ['resize'] } };
 
     var responsive = {
-      mixin: [Resize],
+      mixins: [Resize],
 
       props: ['width', 'height'],
 
@@ -7057,27 +7073,21 @@
 
         show(item) {
           const prev = this.index();
-          const next = getIndex(
-          this.children[getIndex(item, this.toggles, prev)],
-          children(this.$el));
-
-
-          if (prev === next) {
-            return;
-          }
-
+          const next = getIndex(item, this.toggles, prev);
+          const active = getIndex(this.children[next], children(this.$el));
           children(this.$el).forEach((child, i) => {
-            toggleClass(child, this.cls, next === i);
-            attr(this.toggles[i], 'aria-expanded', next === i);
+            toggleClass(child, this.cls, active === i);
+            attr(this.toggles[i], 'aria-expanded', active === i);
           });
 
+          const animate = prev >= 0 && prev !== next;
           this.connects.forEach(async (_ref4) => {let { children } = _ref4;
             await this.toggleElement(
             toNodes(children).filter((child) => hasClass(child, this.cls)),
             false,
-            prev >= 0);
+            animate);
 
-            await this.toggleElement(children[next], true, prev >= 0);
+            await this.toggleElement(children[active], true, animate);
           });
         } } };