@opentiny/vue-renderless 3.10.7 → 3.11.0

package/common/deps/popper.js

@@ -1,10 +1,9 @@
 import {
   __spreadValues
-} from "../../chunk-PKUHTIDK.js";
+} from "../../chunk-G2ADBYYC.js";
 import { on, off } from "./dom";
 import PopupManager from "./popup-manager";
 import { typeOf } from "../type";
-import { xss } from "../xss";
 const positions = ["left", "right", "top", "bottom"];
 const modifiers = ["shift", "offset", "preventOverflow", "keepTogether", "arrow", "flip", "applyStyle"];
 const DEFAULTS = {
@@ -13,16 +12,16 @@ const DEFAULTS = {
   boundariesElement: "viewport",
   boundariesPadding: 5,
   flipBehavior: "flip",
+  // 全局没有修改过它，所以它一直是flip
   forceAbsolute: false,
   gpuAcceleration: true,
+  // 这个用不到了，默认使用tranform3d
   offset: 0,
   placement: "bottom",
   preventOverflowOrder: positions,
-  modifiers,
-  modifiersIgnored: []
+  modifiers
+  // 此处是string数组， 构造函数调用之后转为函数数组
 };
-const getRealWindow = () => window.tinyGetRealWindow ? window.tinyGetRealWindow() : window;
-const getRealElement = (el) => el.jquery ? el[0] : el;
 const setStyle = (el, styles) => {
   const isNumeric = (n) => n !== "" && !isNaN(parseFloat(n)) && isFinite(n);
   Object.keys(styles).forEach((prop) => {
@@ -33,28 +32,6 @@ const setStyle = (el, styles) => {
     el.style[prop] = styles[prop] + unit;
   });
 };
-const getSupportedPropertyName = (property) => {
-  let prefixes = ["", "ms", "webkit", "moz", "o"];
-  let bodyEl = window.document.body;
-  for (let i = 0; i < prefixes.length; i++) {
-    let toCheck = prefixes[i] ? prefixes[i] + property.charAt(0).toUpperCase() + property.slice(1) : property;
-    if (typeof bodyEl.style[toCheck] !== "undefined") {
-      return toCheck;
-    }
-  }
-  return null;
-};
-const addClassNames = (el, classNames) => {
-  classNames.forEach((className) => {
-    el.classList.add(className);
-  });
-};
-const addAttributes = (el, attributes) => {
-  attributes.forEach((attribute) => {
-    const attrs = attribute.split(":");
-    el.setAttribute(attrs[0], attrs[1] || "");
-  });
-};
 const getOffsetParent = (el) => {
   let offsetParent = el.offsetParent;
   return offsetParent === window.document.body || !offsetParent ? window.document.documentElement : offsetParent;
@@ -76,16 +53,14 @@ const isFixed = (el) => {
   return el.parentNode ? isFixed(el.parentNode) : false;
 };
 const getBoundingClientRect = (el) => {
-  let rectObj = el.getBoundingClientRect();
-  let isIE = navigator.userAgent.includes("MSIE");
-  let rectTop = isIE && el.tagName === "HTML" ? -el.scrollTop : rectObj.top;
+  let rect = el.getBoundingClientRect();
   return {
-    left: rectObj.left,
-    top: rectTop,
-    right: rectObj.right,
-    bottom: rectObj.bottom,
-    width: rectObj.right - rectObj.left,
-    height: rectObj.bottom - rectTop
+    left: rect.left,
+    top: rect.top,
+    right: rect.right,
+    bottom: rect.bottom,
+    width: rect.right - rect.left,
+    height: rect.bottom - rect.top
   };
 };
 const isScrollElement = (el) => {
@@ -106,7 +81,7 @@ const getScrollParent = (el) => {
   if (isScrollElement(parent)) {
     return parent;
   }
-  return getScrollParent(el.parentNode);
+  return getScrollParent(parent);
 };
 const getOffsetRectRelativeToCustomParent = (el, parent, fixed) => {
   let { top, left, width, height } = getBoundingClientRect(el);
@@ -161,16 +136,6 @@ const getPopperClientRect = (popperOffsets) => {
   offsets.bottom = offsets.top + offsets.height;
   return offsets;
 };
-const getArrayKeyIndex = (arr, keyToFind) => {
-  let i = 0;
-  for (let value of arr) {
-    if (value === keyToFind) {
-      return i;
-    }
-    i++;
-  }
-  return null;
-};
 const getAllScrollParents = (el, parents = []) => {
   const parent = el.parentNode;
   if (parent) {
@@ -183,446 +148,376 @@ const getAllScrollParents = (el, parents = []) => {
   return parents;
 };
 const getOffsetRect = (el) => {
-  let elementRect = {
+  const elementRect = {
     width: el.offsetWidth,
     height: el.offsetHeight,
     left: el.offsetLeft,
-    top: el.offsetTop
+    top: el.offsetTop,
+    right: 0,
+    bottom: 0
   };
   elementRect.right = elementRect.left + elementRect.width;
   elementRect.bottom = elementRect.top + elementRect.height;
   return elementRect;
 };
-function Popper(reference, popper, options) {
-  this._reference = getRealElement(reference);
-  this.state = {};
-  let isNotDefined = typeof popper === "undefined" || popper === null;
-  let isConfig = popper && Object.prototype.toString.call(popper) === "[object Object]";
-  if (isNotDefined || isConfig) {
-    this._popper = this.parse(isConfig ? popper : {});
-  } else {
-    this._popper = getRealElement(popper);
-  }
-  this._options = __spreadValues(__spreadValues({}, DEFAULTS), options);
-  this._options.modifiers = this._options.modifiers.map((modifier) => {
-    if (~this._options.modifiersIgnored.indexOf(modifier)) {
-      return void 0;
+class Popper {
+  constructor(reference, popper, options) {
+    this.modifiers = {};
+    /** 每次update, 计算popper的大小并缓存 */
+    this.popperOuterSize = null;
+    this._reference = reference;
+    this._popper = popper;
+    this.state = {};
+    this._options = __spreadValues(__spreadValues({}, DEFAULTS), options);
+    this._options.modifierFns = modifiers.map((modifier) => {
+      return this[modifier];
+    });
+    this._popper.setAttribute("x-placement", this._options.placement);
+    this.state.position = this._getPopperPositionByRefernce(this._reference);
+    setStyle(this._popper, { position: this.state.position, top: 0 });
+    this.update();
+    this._setupEventListeners();
+  }
+  destroy() {
+    this._popper.removeAttribute("x-placement");
+    this._popper.style.display = "none";
+    this._removeEventListeners();
+    this._options.removeOnDestroy && this._popper.remove();
+    return this;
+  }
+  onUpdate(callback) {
+    this.state.updateCallback = callback;
+    return this;
+  }
+  update() {
+    let data = { instance: this, styles: {} };
+    this.popperOuterSize = null;
+    data.placement = data._originalPlacement = this._options.placement;
+    data.offsets = this._getRefPopOffsets(this._popper, this._reference, data.placement);
+    data.boundaries = this._getBoundaries(data, this._options.boundariesPadding, this._options.boundariesElement);
+    data = this.runModifiers(data, this._options.modifierFns);
+    typeof this.state.updateCallback === "function" && this.state.updateCallback(data);
+  }
+  /** 按顺序执行Modifiers， 如果传入终点modifier,则执行到指定位置 */
+  runModifiers(data, modifiers2, ends) {
+    let modifiersToRun = modifiers2.slice();
+    const _options = this._options;
+    if (ends !== void 0) {
+      modifiersToRun = this._options.modifierFns.slice(
+        0,
+        _options.modifierFns.findIndex((m) => m == ends)
+      );
     }
-    if (modifier === "applyStyle") {
-      this._popper.setAttribute("x-placement", this._options.placement);
-    }
-    return this.modifiers[modifier] || modifier;
-  });
-  this.state.position = this._getPosition(this._popper, this._reference);
-  setStyle(this._popper, { position: this.state.position, top: 0 });
-  this.update();
-  this._setupEventListeners();
-  this._oldreference = this._reference;
-  this._oldreference._popper = this._popper.style || {};
-  return this;
-}
-Popper.prototype.destroy = function() {
-  this._popper.removeAttribute("x-placement");
-  const popperStyle = this._reference === this._oldreference && this._oldreference._popper || {};
-  this._popper.style.display = "none";
-  this._popper.style.position = "";
-  this._popper.style.top = popperStyle.top || "";
-  this._popper.style.left = popperStyle.left || "";
-  this._popper.style[getSupportedPropertyName("transform")] = "";
-  this._removeEventListeners();
-  this._options.removeOnDestroy && this._popper.remove();
-  return this;
-};
-Popper.prototype.onCreate = function(callback) {
-  callback(this);
-  return this;
-};
-Popper.prototype.onUpdate = function(callback) {
-  this.state.updateCallback = callback;
-  return this;
-};
-Popper.prototype.update = function() {
-  let data = { instance: this, styles: {} };
-  this.popperOuterSize = null;
-  data.placement = data._originalPlacement = this._options.placement;
-  data.offsets = this._getOffsets(this._popper, this._reference, data.placement);
-  data.boundaries = this._getBoundaries(data, this._options.boundariesPadding, this._options.boundariesElement);
-  data = this.runModifiers(data, this._options.modifiers);
-  typeof this.state.updateCallback === "function" && this.state.updateCallback(data);
-};
-Popper.prototype.parse = function(config) {
-  let defaultConfig = {
-    attributes: [],
-    arrowTagName: "div",
-    arrowClassNames: ["popper__arrow"],
-    arrowAttributes: ["x-arrow"],
-    classNames: ["popper"],
-    content: "",
-    contentType: "text",
-    parent: window.document.body,
-    tagName: "div"
-  };
-  config = __spreadValues(__spreadValues({}, defaultConfig), config);
-  const { tagName, classNames, attributes, contentType, content, arrowTagName } = config;
-  let docEl = window.document;
-  let popper = docEl.createElement(tagName);
-  addClassNames(popper, classNames);
-  addAttributes(popper, attributes);
-  if (contentType === "node") {
-    popper.appendChild(getRealElement(content));
-  } else if (contentType === "html") {
-    popper.innerHTML = xss.filterHtml(content);
-  } else {
-    popper.textContent = content;
-  }
-  if (arrowTagName) {
-    let arrow = docEl.createElement(arrowTagName);
-    addClassNames(arrow, config.arrowClassNames);
-    addAttributes(arrow, config.arrowAttributes);
-    popper.appendChild(arrow);
+    modifiersToRun.forEach((modifier) => {
+      if (typeOf(modifier) === "function") {
+        data = modifier.call(this, data);
+      }
+    });
+    return data;
   }
-  let parent = getRealElement(config.parent);
-  if (typeof parent === "string") {
-    parent = docEl.querySelectorAll(config.parent);
-    if (parent && parent.length) {
-      parent = parent[0];
-    } else {
-      throw new Error("ERROR: the given `parent` does not exists!");
+  // 此时才把offsets.popper 赋值给popper dom,  offsets.array赋值给array dom
+  applyStyle(data) {
+    let styles = { position: data.offsets.popper.position };
+    let left = Math.round(data.offsets.popper.left);
+    let top = Math.round(data.offsets.popper.top);
+    styles.transform = `translate3d(${left}px, ${top}px, 0)`;
+    Object.assign(styles, { top: 0, left: 0 });
+    Object.assign(styles, data.styles);
+    setStyle(this._popper, styles);
+    this._popper.setAttribute("x-placement", data.placement);
+    if (data.offsets.arrow) {
+      setStyle(data.arrowElement, data.offsets.arrow);
     }
+    return data;
   }
-  if (parent.length > 1 && parent instanceof Element === false) {
-    parent = parent[0];
+  // 判断 placement是不是2段式的，是则处理一下偏移。 修改data.offsets.popper的值
+  shift(data) {
+    let placement = data.placement;
+    let basePlacement = placement.split("-")[0];
+    let shiftVariation = placement.split("-")[1];
+    if (shiftVariation) {
+      let { top, left, height, width } = data.offsets.reference;
+      let popper = getPopperClientRect(data.offsets.popper);
+      let shiftOffsets = {
+        y: {
+          start: { top },
+          end: { top: top + height - popper.height }
+        },
+        x: {
+          start: { left },
+          end: { left: left + width - popper.width }
+        }
+      };
+      let axis = ~["bottom", "top"].indexOf(basePlacement) ? "x" : "y";
+      data.offsets.popper = Object.assign(popper, shiftOffsets[axis][shiftVariation]);
+    }
+    return data;
   }
-  parent.appendChild(popper);
-  return popper;
-};
-Popper.prototype._getPosition = function(popper, reference) {
-  if (this._options.forceAbsolute) {
-    return "absolute";
+  // 校正popper的位置在boundaries 的内部
+  preventOverflow(data) {
+    let order = this._options.preventOverflowOrder;
+    let popper = getPopperClientRect(data.offsets.popper);
+    let check = {
+      top: () => {
+        let { top } = popper;
+        if (top < data.boundaries.top) {
+          top = Math.max(top, data.boundaries.top);
+        }
+        return { top };
+      },
+      right: () => {
+        let { left } = popper;
+        if (popper.right > data.boundaries.right) {
+          left = Math.min(left, data.boundaries.right - popper.width);
+        }
+        return { left };
+      },
+      bottom: () => {
+        let { top } = popper;
+        if (popper.bottom > data.boundaries.bottom) {
+          top = Math.min(top, data.boundaries.bottom - popper.height);
+        }
+        return { top };
+      },
+      left: () => {
+        let { left } = popper;
+        if (popper.left < data.boundaries.left) {
+          left = Math.max(left, data.boundaries.left);
+        }
+        return { left };
+      }
+    };
+    order.forEach((direction) => {
+      data.offsets.popper = Object.assign(popper, check[direction]());
+    });
+    return data;
   }
-  let isParentFixed = isFixed(reference);
-  return isParentFixed ? "fixed" : "absolute";
-};
-Popper.prototype._getOffsets = function(popper, reference, placement) {
-  placement = placement.split("-")[0];
-  let popperOffsets = {};
-  popperOffsets.position = this.state.position;
-  let isParentFixed = popperOffsets.position === "fixed";
-  let referenceOffsets = getOffsetRectRelativeToCustomParent(reference, getOffsetParent(popper), isParentFixed);
-  let { width, height } = this.popperOuterSize ? this.popperOuterSize : this.popperOuterSize = getOuterSizes(popper);
-  if (~["right", "left"].indexOf(placement)) {
-    popperOffsets.top = referenceOffsets.top + referenceOffsets.height / 2 - height / 2;
-    if (placement === "left") {
-      popperOffsets.left = referenceOffsets.left - width;
-    } else {
-      popperOffsets.left = referenceOffsets.right;
+  // 校正popper的位置在reference的边上。 如果2个分离了，重新调整popper的位置。 可能是担心 modifiers.offset 带来的副作用吧
+  keepTogether(data) {
+    let popper = getPopperClientRect(data.offsets.popper);
+    let reference = data.offsets.reference;
+    if (popper.right < Math.floor(reference.left)) {
+      data.offsets.popper.left = Math.floor(reference.left) - popper.width;
     }
-  } else {
-    popperOffsets.left = referenceOffsets.left + referenceOffsets.width / 2 - width / 2;
-    if (placement === "top") {
-      popperOffsets.top = referenceOffsets.top - height;
-    } else {
-      popperOffsets.top = referenceOffsets.bottom;
+    if (popper.left > Math.floor(reference.right)) {
+      data.offsets.popper.left = Math.floor(reference.right);
     }
-  }
-  popperOffsets.width = width;
-  popperOffsets.height = height;
-  return {
-    popper: popperOffsets,
-    reference: referenceOffsets
-  };
-};
-Popper.prototype._setupEventListeners = function() {
-  this.state.updateBound = this.update.bind(this);
-  on(window, "resize", this.state.updateBound);
-  if (this._options.boundariesElement !== "window") {
-    let target = getScrollParent(this._reference);
-    if (target === window.document.body || target === window.document.documentElement) {
-      target = window;
+    if (popper.bottom < Math.floor(reference.top)) {
+      data.offsets.popper.top = Math.floor(reference.top) - popper.height;
     }
-    this.state.scrollTarget = target;
-    if (this._options.bubbling || PopupManager.globalScroll) {
-      let targets = getAllScrollParents(this._reference);
-      this.state.scrollTargets = targets || [];
-      targets.forEach((target2) => {
-        on(target2, "scroll", this.state.updateBound);
-      });
-    } else {
-      on(target, "scroll", this.state.updateBound);
+    if (popper.top > Math.floor(reference.bottom)) {
+      data.offsets.popper.top = Math.floor(reference.bottom);
     }
+    return data;
   }
-};
-Popper.prototype._removeEventListeners = function() {
-  off(window, "resize", this.state.updateBound);
-  if (this._options.boundariesElement !== "window" && this.state.scrollTarget) {
-    off(this.state.scrollTarget, "scroll", this.state.updateBound);
-    this.state.scrollTarget = null;
-    if (this._options.bubbling || PopupManager.globalScroll) {
-      let targets = this.state.scrollTargets || [];
-      targets.forEach((target) => {
-        off(target, "scroll", this.state.updateBound);
-      });
-      this.state.scrollTargets = null;
+  // 根据flip的策略，计算当前应该显示的位置。 空间不够要计算出flip的位置。 可能是担心preventOverflow 时，造成pop, reference会重叠。 重叠了就要flip一下
+  flip(data) {
+    if (data.flipped && data.placement === data._originalPlacement) {
+      return data;
     }
+    const placements = data.placement.split("-");
+    let placement = placements[0];
+    let placementOpposite = getOppositePlacement(placement);
+    let variation = placements[1] || "";
+    let flipOrderArr = [placement, placementOpposite];
+    flipOrderArr.forEach((step, index) => {
+      if (placement !== step || flipOrderArr.length === index + 1) {
+        return;
+      }
+      placement = data.placement.split("-")[0];
+      placementOpposite = getOppositePlacement(placement);
+      let popperOffsets = getPopperClientRect(data.offsets.popper);
+      let a = ~["right", "bottom"].indexOf(placement);
+      let p = Math.floor(data.offsets.reference[placement]);
+      let po = Math.floor(popperOffsets[placementOpposite]);
+      if (a && p > po || !a && p < po) {
+        data.flipped = true;
+        data.placement = flipOrderArr[index + 1];
+        if (variation) {
+          data.placement += `-${variation}`;
+        }
+        data.offsets.popper = this._getRefPopOffsets(this._popper, this._reference, data.placement).popper;
+        data = this.runModifiers(data, this._options.modifierFns, this.flip);
+      }
+    });
+    return data;
   }
-  this.state.updateBound = null;
-};
-Popper.prototype._getBoundaries = function(data, padding, boundariesElement) {
-  let boundaries = {};
-  if (boundariesElement === "window") {
-    let body = window.document.body;
-    let html = window.document.documentElement;
-    let { width, height } = getMaxWH(body, html);
-    boundaries = { top: 0, right: width, bottom: height, left: 0 };
-  } else if (boundariesElement === "viewport") {
-    let offsetParent = getOffsetParent(this._popper);
-    let scrollParent = getScrollParent(this._popper);
-    let offsetParentRect = getOffsetRect(offsetParent);
-    let isFixed2 = data.offsets.popper.position === "fixed";
-    let scrollTop = isFixed2 ? 0 : getScrollTopValue(scrollParent);
-    let scrollLeft = isFixed2 ? 0 : getScrollLeftValue(scrollParent);
-    const viewportWindow = getRealWindow();
-    boundaries = {
-      top: 0 - (offsetParentRect.top - scrollTop),
-      right: viewportWindow.document.documentElement.clientWidth - (offsetParentRect.left - scrollLeft),
-      bottom: viewportWindow.document.documentElement.clientHeight - (offsetParentRect.top - scrollTop),
-      left: 0 - (offsetParentRect.left - scrollLeft)
-    };
-  } else {
-    if (getOffsetParent(this._popper) === boundariesElement) {
-      const { clientWidth, clientHeight } = boundariesElement;
-      boundaries = {
-        right: clientWidth,
-        bottom: clientHeight,
-        top: 0,
-        left: 0
-      };
-    } else {
-      boundaries = getOffsetRect(boundariesElement);
+  // 根据入参option上的offset, 给data.offset.popper进行校正
+  offset(data) {
+    let offset = this._options.offset;
+    let popper = data.offsets.popper;
+    if (~data.placement.indexOf("left")) {
+      popper.top -= offset;
+    } else if (~data.placement.indexOf("right")) {
+      popper.top += offset;
+    } else if (~data.placement.indexOf("top")) {
+      popper.left -= offset;
+    } else if (~data.placement.indexOf("bottom")) {
+      popper.left += offset;
     }
+    return data;
   }
-  boundaries.right -= padding;
-  boundaries.left += padding;
-  boundaries.bottom = boundaries.bottom - padding;
-  boundaries.top = boundaries.top + padding;
-  return boundaries;
-};
-Popper.prototype.isModifierRequired = function(requesting, requested) {
-  let index = getArrayKeyIndex(this._options.modifiers, requesting);
-  return !!this._options.modifiers.slice(0, index).filter((modifier) => modifier === requested).length;
-};
-Popper.prototype.runModifiers = function(data, modifiers2, ends) {
-  let modifiersToRun = modifiers2.slice();
-  const _options = this._options;
-  if (ends !== void 0) {
-    modifiersToRun = _options.modifiers.slice(0, getArrayKeyIndex(_options.modifiers, ends));
-  }
-  modifiersToRun.forEach((modifier) => {
-    if (typeOf(modifier) === "function") {
-      data = modifier.call(this, data);
+  // 计算arrow的位置,保存在data.offsets.arrow ={top,left}
+  arrow(data) {
+    let arrow = this._options.arrowElement;
+    let arrowOffset = this._options.arrowOffset;
+    if (typeof arrow === "string") {
+      arrow = this._popper.querySelector(arrow);
     }
-  });
-  return data;
-};
-Popper.prototype.modifiers = {};
-Popper.prototype.modifiers.applyStyle = function(data) {
-  let styles = { position: data.offsets.popper.position };
-  let left = Math.round(data.offsets.popper.left);
-  let top = Math.round(data.offsets.popper.top);
-  let prefixedProperty;
-  if (this._options.gpuAcceleration && (prefixedProperty = getSupportedPropertyName("transform"))) {
-    styles[prefixedProperty] = `translate3d(${left}px, ${top}px, 0)`;
-    Object.assign(styles, { top: 0, left: 0 });
-  } else {
-    Object.assign(styles, { top, left });
-  }
-  Object.assign(styles, data.styles);
-  setStyle(this._popper, styles);
-  this._popper.setAttribute("x-placement", data.placement);
-  const modifiers2 = this.modifiers;
-  if (this.isModifierRequired(modifiers2.applyStyle, modifiers2.arrow) && data.offsets.arrow) {
-    setStyle(data.arrowElement, data.offsets.arrow);
-  }
-  return data;
-};
-Popper.prototype.modifiers.shift = function(data) {
-  let placement = data.placement;
-  let basePlacement = placement.split("-")[0];
-  let shiftVariation = placement.split("-")[1];
-  if (shiftVariation) {
-    let { top, left, height, width } = data.offsets.reference;
+    if (!arrow || !this._popper.contains(arrow)) {
+      return data;
+    }
+    let arrowStyle = {};
+    let placement = data.placement.split("-")[0];
     let popper = getPopperClientRect(data.offsets.popper);
-    let shiftOffsets = {
-      y: {
-        start: { top },
-        end: { top: top + height - popper.height }
-      },
-      x: {
-        start: { left },
-        end: { left: left + width - popper.width }
+    let reference = data.offsets.reference;
+    let isVertical = ~["left", "right"].indexOf(placement);
+    let calcProp = isVertical ? "height" : "width";
+    let opSide = isVertical ? "bottom" : "right";
+    let altSide = isVertical ? "left" : "top";
+    let side = isVertical ? "top" : "left";
+    let popperRect = this.popperOuterSize ? this.popperOuterSize : this.popperOuterSize = getOuterSizes(this._popper);
+    let arrowRect = getOuterSizes(arrow);
+    let arrowSize = arrowRect[calcProp];
+    if (reference[opSide] - arrowSize < popper[side]) {
+      data.offsets.popper[side] -= popper[side] - (reference[opSide] - arrowSize);
+    }
+    if (reference[side] + arrowSize > popper[opSide]) {
+      data.offsets.popper[side] += reference[side] + arrowSize - popper[opSide];
+    }
+    let center = reference[side] + (arrowOffset || reference[calcProp] / 2 - arrowSize / 2);
+    let sideValue = center - popper[side];
+    sideValue = Math.max(Math.min(popper[calcProp] - arrowSize - 8, sideValue), 8);
+    arrowStyle[side] = sideValue;
+    arrowStyle[altSide] = "";
+    const params = this._options.placement.split("-");
+    if (this._options.adjustArrow && ~["top", "bottom"].indexOf(params[0]) && side === "left") {
+      if (params[1] === "start") {
+        arrowStyle.left = 8;
+      } else if (!params[1]) {
+        arrowStyle.left = (popperRect.width - arrowRect.width) / 2;
       }
-    };
-    let axis = ~["bottom", "top"].indexOf(basePlacement) ? "x" : "y";
-    data.offsets.popper = Object.assign(popper, shiftOffsets[axis][shiftVariation]);
+    }
+    data.offsets.arrow = arrowStyle;
+    data.arrowElement = arrow;
+    return data;
   }
-  return data;
-};
-Popper.prototype.modifiers.preventOverflow = function(data) {
-  let order = this._options.preventOverflowOrder;
-  let popper = getPopperClientRect(data.offsets.popper);
-  let check = {
-    top: () => {
-      let { top } = popper;
-      if (top < data.boundaries.top) {
-        top = Math.max(top, data.boundaries.top);
+  /** 判断 reference 的 offsetParent 元素是fix还是abs, 这个值会赋值给popper 的dom */
+  _getPopperPositionByRefernce(reference) {
+    if (this._options.forceAbsolute) {
+      return "absolute";
+    }
+    let isParentFixed = isFixed(reference);
+    return isParentFixed ? "fixed" : "absolute";
+  }
+  /** 实时计算一下popper, reference的 位置信息， 用于 */
+  _getRefPopOffsets(popper, reference, placement) {
+    placement = placement.split("-")[0];
+    let popperOffsets = { position: this.state.position };
+    let isParentFixed = popperOffsets.position === "fixed";
+    let referenceOffsets = getOffsetRectRelativeToCustomParent(reference, getOffsetParent(popper), isParentFixed);
+    const { width, height } = this.popperOuterSize ? this.popperOuterSize : this.popperOuterSize = getOuterSizes(popper);
+    if (~["right", "left"].indexOf(placement)) {
+      popperOffsets.top = referenceOffsets.top + referenceOffsets.height / 2 - height / 2;
+      if (placement === "left") {
+        popperOffsets.left = referenceOffsets.left - width;
+      } else {
+        popperOffsets.left = referenceOffsets.right;
       }
-      return { top };
-    },
-    right: () => {
-      let { left } = popper;
-      if (popper.right > data.boundaries.right) {
-        left = Math.min(left, data.boundaries.right - popper.width);
+    } else {
+      popperOffsets.left = referenceOffsets.left + referenceOffsets.width / 2 - width / 2;
+      if (placement === "top") {
+        popperOffsets.top = referenceOffsets.top - height;
+      } else {
+        popperOffsets.top = referenceOffsets.bottom;
       }
-      return { left };
-    },
-    bottom: () => {
-      let { top } = popper;
-      if (popper.bottom > data.boundaries.bottom) {
-        top = Math.min(top, data.boundaries.bottom - popper.height);
+    }
+    popperOffsets.width = width;
+    popperOffsets.height = height;
+    return {
+      popper: popperOffsets,
+      reference: referenceOffsets
+    };
+  }
+  _setupEventListeners() {
+    this.state.updateBoundFn = this.update.bind(this);
+    on(window, "resize", this.state.updateBoundFn);
+    if (this._options.boundariesElement !== "window") {
+      let target = getScrollParent(this._reference);
+      if (target === window.document.body || target === window.document.documentElement) {
+        target = window;
       }
-      return { top };
-    },
-    left: () => {
-      let { left } = popper;
-      if (popper.left < data.boundaries.left) {
-        left = Math.max(left, data.boundaries.left);
+      this.state.scrollTarget = target;
+      if (this._options.bubbling || PopupManager.globalScroll) {
+        let targets = getAllScrollParents(this._reference);
+        this.state.scrollTargets = targets || [];
+        targets.forEach((target2) => {
+          on(target2, "scroll", this.state.updateBoundFn);
+        });
+      } else {
+        on(target, "scroll", this.state.updateBoundFn);
       }
-      return { left };
     }
-  };
-  order.forEach((direction) => {
-    data.offsets.popper = Object.assign(popper, check[direction]());
-  });
-  return data;
-};
-Popper.prototype.modifiers.keepTogether = function(data) {
-  let popper = getPopperClientRect(data.offsets.popper);
-  let reference = data.offsets.reference;
-  if (popper.right < Math.floor(reference.left)) {
-    data.offsets.popper.left = Math.floor(reference.left) - popper.width;
-  }
-  if (popper.left > Math.floor(reference.right)) {
-    data.offsets.popper.left = Math.floor(reference.right);
-  }
-  if (popper.bottom < Math.floor(reference.top)) {
-    data.offsets.popper.top = Math.floor(reference.top) - popper.height;
-  }
-  if (popper.top > Math.floor(reference.bottom)) {
-    data.offsets.popper.top = Math.floor(reference.bottom);
-  }
-  return data;
-};
-Popper.prototype.modifiers.flip = function(data) {
-  if (!this.isModifierRequired(this.modifiers.flip, this.modifiers.preventOverflow)) {
-    return data;
   }
-  if (data.flipped && data.placement === data._originalPlacement) {
-    return data;
-  }
-  const placements = data.placement.split("-");
-  let placement = placements[0];
-  let placementOpposite = getOppositePlacement(placement);
-  let variation = placements[1] || "";
-  let flipOrderArr = [];
-  if (this._options.flipBehavior === "flip") {
-    flipOrderArr = [placement, placementOpposite];
-  } else {
-    flipOrderArr = this._options.flipBehavior;
-  }
-  flipOrderArr.forEach((step, index) => {
-    if (placement !== step || flipOrderArr.length === index + 1) {
-      return;
-    }
-    placement = data.placement.split("-")[0];
-    placementOpposite = getOppositePlacement(placement);
-    let popperOffsets = getPopperClientRect(data.offsets.popper);
-    let a = ~["right", "bottom"].indexOf(placement);
-    let p = Math.floor(data.offsets.reference[placement]);
-    let po = Math.floor(popperOffsets[placementOpposite]);
-    if (a && p > po || !a && p < po) {
-      data.flipped = true;
-      data.placement = flipOrderArr[index + 1];
-      if (variation) {
-        data.placement += `-${variation}`;
+  _removeEventListeners() {
+    off(window, "resize", this.state.updateBoundFn);
+    if (this._options.boundariesElement !== "window" && this.state.scrollTarget) {
+      off(this.state.scrollTarget, "scroll", this.state.updateBoundFn);
+      this.state.scrollTarget = null;
+      if (this._options.bubbling || PopupManager.globalScroll) {
+        let targets = this.state.scrollTargets || [];
+        targets.forEach((target) => {
+          off(target, "scroll", this.state.updateBoundFn);
+        });
+        this.state.scrollTargets = null;
       }
-      data.offsets.popper = this._getOffsets(this._popper, this._reference, data.placement).popper;
-      data = this.runModifiers(data, this._options.modifiers, this._flip);
     }
-  });
-  return data;
-};
-Popper.prototype.modifiers.offset = function(data) {
-  let offset = this._options.offset;
-  let popper = data.offsets.popper;
-  if (~data.placement.indexOf("left")) {
-    popper.top -= offset;
-  } else if (~data.placement.indexOf("right")) {
-    popper.top += offset;
-  } else if (~data.placement.indexOf("top")) {
-    popper.left -= offset;
-  } else if (~data.placement.indexOf("bottom")) {
-    popper.left += offset;
-  }
-  return data;
-};
-Popper.prototype.modifiers.arrow = function(data) {
-  let arrow = this._options.arrowElement;
-  let arrowOffset = this._options.arrowOffset;
-  if (typeof arrow === "string") {
-    arrow = this._popper.querySelector(arrow);
-  }
-  if (!arrow || !this._popper.contains(arrow) || !this.isModifierRequired(this.modifiers.arrow, this.modifiers.keepTogether)) {
-    return data;
-  }
-  let arrowStyle = {};
-  let placement = data.placement.split("-")[0];
-  let popper = getPopperClientRect(data.offsets.popper);
-  let reference = data.offsets.reference;
-  let isVertical = ~["left", "right"].indexOf(placement);
-  let calcProp = isVertical ? "height" : "width";
-  let opSide = isVertical ? "bottom" : "right";
-  let altSide = isVertical ? "left" : "top";
-  let side = isVertical ? "top" : "left";
-  let popperRect = this.popperOuterSize ? this.popperOuterSize : this.popperOuterSize = getOuterSizes(this._popper);
-  let arrowRect = getOuterSizes(arrow);
-  let arrowSize = arrowRect[calcProp];
-  if (reference[opSide] - arrowSize < popper[side]) {
-    data.offsets.popper[side] -= popper[side] - (reference[opSide] - arrowSize);
-  }
-  if (reference[side] + arrowSize > popper[opSide]) {
-    data.offsets.popper[side] += reference[side] + arrowSize - popper[opSide];
-  }
-  let center = reference[side] + (arrowOffset || reference[calcProp] / 2 - arrowSize / 2);
-  let sideValue = center - popper[side];
-  sideValue = Math.max(Math.min(popper[calcProp] - arrowSize - 8, sideValue), 8);
-  arrowStyle[side] = sideValue;
-  arrowStyle[altSide] = "";
-  const popperOptions = this._options;
-  const params = popperOptions.placement.split("-");
-  if (popperOptions.adjustArrow && ~["top", "bottom"].indexOf(params[0]) && side === "left") {
-    if (params[1] === "start") {
-      arrowStyle.left = 8;
-    } else if (!params[1]) {
-      arrowStyle.left = (popperRect.width - arrowRect.width) / 2;
+    this.state.updateBoundFn = null;
+  }
+  /** 实时计算一下Boundary的位置 */
+  _getBoundaries(data, padding, boundariesElement) {
+    let boundaries = { right: 0, left: 0, top: 0, bottom: 0 };
+    if (boundariesElement === "window" || boundariesElement === "body") {
+      let body = window.document.body;
+      let html = window.document.documentElement;
+      let { width, height } = getMaxWH(body, html);
+      boundaries = { top: 0, right: width, bottom: height, left: 0 };
+    } else if (boundariesElement === "viewport") {
+      let offsetParent = getOffsetParent(this._popper);
+      let scrollParent = getScrollParent(this._popper);
+      let offsetParentRect = getOffsetRect(offsetParent);
+      let isFixed2 = data.offsets.popper.position === "fixed";
+      let scrollTop = isFixed2 ? 0 : getScrollTopValue(scrollParent);
+      let scrollLeft = isFixed2 ? 0 : getScrollLeftValue(scrollParent);
+      const viewportWindow = PopupManager.viewportWindow || window;
+      boundaries = {
+        top: 0 - (offsetParentRect.top - scrollTop),
+        right: viewportWindow.document.documentElement.clientWidth - (offsetParentRect.left - scrollLeft),
+        bottom: viewportWindow.document.documentElement.clientHeight - (offsetParentRect.top - scrollTop),
+        left: 0 - (offsetParentRect.left - scrollLeft)
+      };
+    } else {
+      if (getOffsetParent(this._popper) === boundariesElement) {
+        const { clientWidth, clientHeight } = boundariesElement;
+        boundaries = {
+          right: clientWidth,
+          bottom: clientHeight,
+          top: 0,
+          left: 0
+        };
+      } else {
+        boundaries = getOffsetRect(boundariesElement);
+      }
     }
+    boundaries.right -= padding;
+    boundaries.left += padding;
+    boundaries.bottom = boundaries.bottom - padding;
+    boundaries.top = boundaries.top + padding;
+    return boundaries;
   }
-  data.offsets.arrow = arrowStyle;
-  data.arrowElement = arrow;
-  return data;
-};
+}
 var popper_default = Popper;
 export {
   popper_default as default,
-  getAllScrollParents,
   getScrollParent
 };