misp-ui-library-test 0.0.1

package/src/utils/popper/popper.js

@@ -0,0 +1,1132 @@
+/**
+ * @fileoverview Popper.js - 弹出层定位库
+ * @description 用于创建和定位弹出层靠近其参考元素的强大库，支持多种位置、边界检测、自动翻转等功能
+ * @version 1.16.1
+ * @license MIT
+ * @copyright Copyright (c) 2016 Federico Zivolo and contributors
+ * @module utils/popper/popper
+ */
+
+;(function (root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    define(factory)
+  } else if (typeof module === 'object' && module.exports) {
+    module.exports = factory()
+  } else {
+    root.Popper = factory()
+  }
+})(this, function () {
+  'use strict'
+
+  var root = window
+
+  /**
+   * 默认配置选项
+   * @type {Object}
+   * @memberof Popper
+   * @static
+   */
+  var DEFAULTS = {
+    placement: 'bottom',
+    gpuAcceleration: true,
+    offset: 0,
+    boundariesElement: 'viewport',
+    boundariesPadding: 5,
+    preventOverflowOrder: ['left', 'right', 'top', 'bottom'],
+    flipBehavior: 'flip',
+    arrowElement: '[x-arrow]',
+    arrowOffset: 0,
+    modifiers: ['shift', 'offset', 'preventOverflow', 'keepTogether', 'arrow', 'flip', 'applyStyle'],
+    modifiersIgnored: [],
+    forceAbsolute: false,
+  }
+
+  /**
+   * 创建新的 Popper.js 实例
+   * @class Popper
+   * @classdesc 用于管理弹出层定位的核心类
+   * @param {HTMLElement} reference - 用于定位弹出层的参考元素
+   * @param {HTMLElement|Object} popper - 用作弹出层的 HTML 元素，或用于生成弹出层的配置对象
+   * @param {Object} [options] - 配置选项
+   * @param {String} [options.placement='bottom'] - 弹出层位置
+   * @param {HTMLElement|String} [options.arrowElement='[x-arrow]'] - 用作箭头的 DOM 节点或 CSS 选择器
+   * @param {Boolean} [options.gpuAcceleration=true] - 是否使用 GPU 加速渲染
+   * @param {Number} [options.offset=0] - 弹出层偏移像素
+   * @param {String|Element} [options.boundariesElement='viewport'] - 定义弹出层边界的元素
+   * @param {Number} [options.boundariesPadding=5] - 边界内边距
+   * @param {Array} [options.preventOverflowOrder] - 防止溢出的检查顺序
+   * @param {String|Array} [options.flipBehavior='flip'] - 翻转行为配置
+   * @param {Array} [options.modifiers] - 修饰器函数列表
+   * @param {Array} [options.modifiersIgnored=[]] - 要忽略的修饰器
+   * @param {Boolean} [options.removeOnDestroy=false] - 销毁时是否自动移除弹出层
+   */
+  function Popper(reference, popper, options) {
+    this._reference = reference.jquery ? reference[0] : reference
+    this.state = {}
+
+    var isNotDefined = typeof popper === 'undefined' || popper === null
+    var isConfig = popper && Object.prototype.toString.call(popper) === '[object Object]'
+    if (isNotDefined || isConfig) {
+      this._popper = this.parse(isConfig ? popper : {})
+    } else {
+      this._popper = popper.jquery ? popper[0] : popper
+    }
+
+    this._options = Object.assign({}, DEFAULTS, options)
+
+    this._options.modifiers = this._options.modifiers.map(
+      function (modifier) {
+        if (this._options.modifiersIgnored.indexOf(modifier) !== -1) return
+
+        if (modifier === 'applyStyle') {
+          this._popper.setAttribute('x-placement', this._options.placement)
+        }
+
+        return this.modifiers[modifier] || modifier
+      }.bind(this)
+    )
+
+    this.state.position = this._getPosition(this._popper, this._reference)
+    setStyle(this._popper, { position: this.state.position, top: 0 })
+
+    this.update()
+
+    this._setupEventListeners()
+    return this
+  }
+
+  /**
+   * 销毁 Popper 实例
+   * @method
+   * @memberof Popper
+   * @instance
+   * @description 清理样式、移除事件监听器，可选移除 DOM 元素
+   * @returns {Popper} Popper 实例，支持链式调用
+   */
+  Popper.prototype.destroy = function () {
+    this._popper.removeAttribute('x-placement')
+    this._popper.style.left = ''
+    this._popper.style.position = ''
+    this._popper.style.top = ''
+    this._popper.style[getSupportedPropertyName('transform')] = ''
+    this._removeEventListeners()
+
+    if (this._options.removeOnDestroy) {
+      this._popper.remove()
+    }
+    return this
+  }
+
+  /**
+   * 更新弹出层位置
+   * @method
+   * @memberof Popper
+   * @instance
+   * @description 重新计算偏移量并应用新样式
+   * @fires Popper#onUpdate
+   * @returns {void}
+   */
+  Popper.prototype.update = function () {
+    var data = { instance: this, styles: {} }
+
+    data.placement = this._options.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)
+
+    if (typeof this.state.updateCallback === 'function') {
+      this.state.updateCallback(data)
+    }
+  }
+
+  /**
+   * 注册创建完成回调
+   * @method
+   * @memberof Popper
+   * @instance
+   * @description Popper 初始化完成后执行回调函数
+   * @param {Function} callback - 回调函数，接收 Popper 实例作为第一个参数
+   * @returns {Popper} Popper 实例，支持链式调用
+   */
+  Popper.prototype.onCreate = function (callback) {
+    callback(this)
+    return this
+  }
+
+  /**
+   * 注册更新回调
+   * @method
+   * @memberof Popper
+   * @instance
+   * @description 每次 Popper 更新后执行回调函数（首次 update 调用不触发）
+   * @param {Function} callback - 回调函数，接收坐标和样式信息作为参数
+   * @returns {Popper} Popper 实例，支持链式调用
+   */
+  Popper.prototype.onUpdate = function (callback) {
+    this.state.updateCallback = callback
+    return this
+  }
+
+  /**
+   * 从配置对象生成弹出层元素
+   * @method
+   * @memberof Popper
+   * @instance
+   * @param {Object} config - 配置对象
+   * @param {String} [config.tagName='div'] - 弹出层标签名
+   * @param {Array} [config.classNames=['popper']] - 要应用的类名数组
+   * @param {Array} [config.attributes=[]] - 要应用的属性数组
+   * @param {HTMLElement|String} [config.parent=document.body] - 父元素
+   * @param {String} [config.content=''] - 弹出层内容
+   * @param {String} [config.contentType='text'] - 内容类型
+   * @param {String} [config.arrowTagName='div'] - 箭头元素标签名
+   * @param {Array} [config.arrowClassNames=['popper__arrow']] - 箭头元素类名
+   * @param {Array} [config.arrowAttributes=['x-arrow']] - 箭头元素属性
+   * @returns {HTMLElement} 生成的弹出层 DOM 元素
+   * @private
+   */
+  Popper.prototype.parse = function (config) {
+    var defaultConfig = {
+      tagName: 'div',
+      classNames: ['popper'],
+      attributes: [],
+      parent: root.document.body,
+      content: '',
+      contentType: 'text',
+      arrowTagName: 'div',
+      arrowClassNames: ['popper__arrow'],
+      arrowAttributes: ['x-arrow'],
+    }
+    config = Object.assign({}, defaultConfig, config)
+
+    var d = root.document
+
+    var popper = d.createElement(config.tagName)
+    addClassNames(popper, config.classNames)
+    addAttributes(popper, config.attributes)
+    if (config.contentType === 'node') {
+      popper.appendChild(config.content.jquery ? config.content[0] : config.content)
+    } else if (config.contentType === 'html') {
+      popper.innerHTML = config.content
+    } else {
+      popper.textContent = config.content
+    }
+
+    if (config.arrowTagName) {
+      var arrow = d.createElement(config.arrowTagName)
+      addClassNames(arrow, config.arrowClassNames)
+      addAttributes(arrow, config.arrowAttributes)
+      popper.appendChild(arrow)
+    }
+
+    var parent = config.parent.jquery ? config.parent[0] : config.parent
+
+    if (typeof parent === 'string') {
+      parent = d.querySelectorAll(config.parent)
+      if (parent.length > 1) {
+        console.warn('WARNING: the given parent query matched more than one element, the first one will be used')
+      }
+      if (parent.length === 0) {
+        throw "ERROR: the given parent doesn't exists!"
+      }
+      parent = parent[0]
+    }
+    if (parent.length > 1 && parent instanceof Element === false) {
+      console.warn('WARNING: you have passed as parent a list of elements, the first one will be used')
+      parent = parent[0]
+    }
+
+    parent.appendChild(popper)
+
+    return popper
+
+    /**
+     * 为元素添加类名
+     * @function addClassNames
+     * @ignore
+     * @param {HTMLElement} element - 目标元素
+     * @param {Array} classNames - 类名数组
+     * @returns {void}
+     */
+    function addClassNames(element, classNames) {
+      classNames.forEach(function (className) {
+        element.classList.add(className)
+      })
+    }
+
+    /**
+     * 为元素添加属性
+     * @function addAttributes
+     * @ignore
+     * @param {HTMLElement} element - 目标元素
+     * @param {Array} attributes - 属性数组
+     * @returns {void}
+     */
+    function addAttributes(element, attributes) {
+      attributes.forEach(function (attribute) {
+        element.setAttribute(attribute.split(':')[0], attribute.split(':')[1] || '')
+      })
+    }
+  }
+
+  /**
+   * 获取弹出层应使用的定位类型
+   * @method
+   * @memberof Popper
+   * @instance
+   * @private
+   * @param {HTMLElement} popper - 弹出层元素
+   * @param {HTMLElement} reference - 参考元素
+   * @returns {String} 定位类型：'absolute' | 'fixed'
+   */
+  Popper.prototype._getPosition = function (popper, reference) {
+    var container = getOffsetParent(reference)
+
+    if (this._options.forceAbsolute) {
+      return 'absolute'
+    }
+
+    var isParentFixed = isFixed(reference, container)
+    return isParentFixed ? 'fixed' : 'absolute'
+  }
+
+  /**
+   * 计算弹出层偏移量
+   * @method
+   * @memberof Popper
+   * @instance
+   * @private
+   * @param {HTMLElement} popper - 弹出层元素
+   * @param {HTMLElement} reference - 参考元素
+   * @param {String} placement - 放置位置
+   * @returns {Object} 包含 popper 和 reference 偏移量的对象
+   */
+  Popper.prototype._getOffsets = function (popper, reference, placement) {
+    placement = placement.split('-')[0]
+    var popperOffsets = {}
+
+    popperOffsets.position = this.state.position
+    var isParentFixed = popperOffsets.position === 'fixed'
+
+    var referenceOffsets = getOffsetRectRelativeToCustomParent(reference, getOffsetParent(popper), isParentFixed)
+
+    var popperRect = getOuterSizes(popper)
+
+    if (['right', 'left'].indexOf(placement) !== -1) {
+      popperOffsets.top = referenceOffsets.top + referenceOffsets.height / 2 - popperRect.height / 2
+      if (placement === 'left') {
+        popperOffsets.left = referenceOffsets.left - popperRect.width
+      } else {
+        popperOffsets.left = referenceOffsets.right
+      }
+    } else {
+      popperOffsets.left = referenceOffsets.left + referenceOffsets.width / 2 - popperRect.width / 2
+      if (placement === 'top') {
+        popperOffsets.top = referenceOffsets.top - popperRect.height
+      } else {
+        popperOffsets.top = referenceOffsets.bottom
+      }
+    }
+
+    popperOffsets.width = popperRect.width
+    popperOffsets.height = popperRect.height
+
+    return {
+      popper: popperOffsets,
+      reference: referenceOffsets,
+    }
+  }
+
+  /**
+   * 设置事件监听器
+   * @method
+   * @memberof Popper
+   * @instance
+   * @private
+   * @description 监听窗口 resize 和滚动事件，自动更新弹出层位置
+   * @returns {void}
+   */
+  Popper.prototype._setupEventListeners = function () {
+    this.state.updateBound = this.update.bind(this)
+    root.addEventListener('resize', this.state.updateBound)
+    if (this._options.boundariesElement !== 'window') {
+      var target = getScrollParent(this._reference)
+      if (target === root.document.body || target === root.document.documentElement) {
+        target = root
+      }
+      target.addEventListener('scroll', this.state.updateBound)
+      this.state.scrollTarget = target
+    }
+  }
+
+  /**
+   * 移除事件监听器
+   * @method
+   * @memberof Popper
+   * @instance
+   * @private
+   * @description 清理 resize 和滚动事件监听器
+   * @returns {void}
+   */
+  Popper.prototype._removeEventListeners = function () {
+    root.removeEventListener('resize', this.state.updateBound)
+    if (this._options.boundariesElement !== 'window' && this.state.scrollTarget) {
+      this.state.scrollTarget.removeEventListener('scroll', this.state.updateBound)
+      this.state.scrollTarget = null
+    }
+    this.state.updateBound = null
+  }
+
+  /**
+   * 计算边界限制
+   * @method
+   * @memberof Popper
+   * @instance
+   * @private
+   * @param {Object} data - 包含 offsets 属性的数据对象
+   * @param {Number} padding - 边界内边距
+   * @param {Element} boundariesElement - 定义边界的元素
+   * @returns {Object} 边界坐标对象
+   */
+  Popper.prototype._getBoundaries = function (data, padding, boundariesElement) {
+    var boundaries = {}
+    var width, height
+    if (boundariesElement === 'window') {
+      var body = root.document.body,
+        html = root.document.documentElement
+
+      height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight)
+      width = Math.max(body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth)
+
+      boundaries = {
+        top: 0,
+        right: width,
+        bottom: height,
+        left: 0,
+      }
+    } else if (boundariesElement === 'viewport') {
+      var offsetParent = getOffsetParent(this._popper)
+      var scrollParent = getScrollParent(this._popper)
+      var offsetParentRect = getOffsetRect(offsetParent)
+
+      var getScrollTopValue = function (element) {
+        return element == document.body ? Math.max(document.documentElement.scrollTop, document.body.scrollTop) : element.scrollTop
+      }
+      var getScrollLeftValue = function (element) {
+        return element == document.body ? Math.max(document.documentElement.scrollLeft, document.body.scrollLeft) : element.scrollLeft
+      }
+
+      var scrollTop = data.offsets.popper.position === 'fixed' ? 0 : getScrollTopValue(scrollParent)
+      var scrollLeft = data.offsets.popper.position === 'fixed' ? 0 : getScrollLeftValue(scrollParent)
+
+      boundaries = {
+        top: 0 - (offsetParentRect.top - scrollTop),
+        right: root.document.documentElement.clientWidth - (offsetParentRect.left - scrollLeft),
+        bottom: root.document.documentElement.clientHeight - (offsetParentRect.top - scrollTop),
+        left: 0 - (offsetParentRect.left - scrollLeft),
+      }
+    } else {
+      if (getOffsetParent(this._popper) === boundariesElement) {
+        boundaries = {
+          top: 0,
+          left: 0,
+          right: boundariesElement.clientWidth,
+          bottom: boundariesElement.clientHeight,
+        }
+      } else {
+        boundaries = getOffsetRect(boundariesElement)
+      }
+    }
+    boundaries.left += padding
+    boundaries.right -= padding
+    boundaries.top = boundaries.top + padding
+    boundaries.bottom = boundaries.bottom - padding
+    return boundaries
+  }
+
+  /**
+   * 运行修饰器函数
+   * @method
+   * @memberof Popper
+   * @instance
+   * @public
+   * @param {Object} data - 数据对象
+   * @param {Array} modifiers - 修饰器函数数组
+   * @param {Function} [ends] - 结束条件函数
+   * @returns {Object} 处理后的数据对象
+   */
+  Popper.prototype.runModifiers = function (data, modifiers, ends) {
+    var modifiersToRun = modifiers.slice()
+    if (ends !== undefined) {
+      modifiersToRun = this._options.modifiers.slice(0, getArrayKeyIndex(this._options.modifiers, ends))
+    }
+
+    modifiersToRun.forEach(
+      function (modifier) {
+        if (isFunction(modifier)) {
+          data = modifier.call(this, data)
+        }
+      }.bind(this)
+    )
+
+    return data
+  }
+
+  /**
+   * 检查修饰器依赖
+   * @method
+   * @memberof Popper
+   * @instance
+   * @param {String} requesting - 请求的修饰器名称
+   * @param {String} requested - 被请求的修饰器名称
+   * @returns {Boolean} 是否依赖
+   */
+  Popper.prototype.isModifierRequired = function (requesting, requested) {
+    var index = getArrayKeyIndex(this._options.modifiers, requesting)
+    return !!this._options.modifiers.slice(0, index).filter(function (modifier) {
+      return modifier === requested
+    }).length
+  }
+
+  /**
+   * 修饰器列表
+   * @namespace Popper.modifiers
+   * @memberof Popper
+   * @static
+   * @type {Object}
+   */
+  Popper.prototype.modifiers = {}
+
+  /**
+   * 应用样式修饰器
+   * @method
+   * @memberof Popper.modifiers
+   * @static
+   * @param {Object} data - update 方法生成的数据对象
+   * @returns {Object} 相同的数据对象
+   */
+  Popper.prototype.modifiers.applyStyle = function (data) {
+    var styles = {
+      position: data.offsets.popper.position,
+    }
+
+    var left = Math.round(data.offsets.popper.left)
+    var top = Math.round(data.offsets.popper.top)
+
+    var prefixedProperty
+    if (this._options.gpuAcceleration && (prefixedProperty = getSupportedPropertyName('transform'))) {
+      styles[prefixedProperty] = 'translate3d(' + left + 'px, ' + top + 'px, 0)'
+      styles.top = 0
+      styles.left = 0
+    } else {
+      styles.left = left
+      styles.top = top
+    }
+
+    Object.assign(styles, data.styles)
+
+    setStyle(this._popper, styles)
+
+    this._popper.setAttribute('x-placement', data.placement)
+
+    if (this.isModifierRequired(this.modifiers.applyStyle, this.modifiers.arrow) && data.offsets.arrow) {
+      setStyle(data.arrowElement, data.offsets.arrow)
+    }
+
+    return data
+  }
+
+  /**
+   * 偏移修饰器
+   * @method
+   * @memberof Popper.modifiers
+   * @static
+   * @param {Object} data - update 方法生成的数据对象
+   * @returns {Object} 修改后的数据对象
+   */
+  Popper.prototype.modifiers.shift = function (data) {
+    var placement = data.placement
+    var basePlacement = placement.split('-')[0]
+    var shiftVariation = placement.split('-')[1]
+
+    if (shiftVariation) {
+      var reference = data.offsets.reference
+      var popper = getPopperClientRect(data.offsets.popper)
+
+      var shiftOffsets = {
+        y: {
+          start: { top: reference.top },
+          end: { top: reference.top + reference.height - popper.height },
+        },
+        x: {
+          start: { left: reference.left },
+          end: { left: reference.left + reference.width - popper.width },
+        },
+      }
+
+      var axis = ['bottom', 'top'].indexOf(basePlacement) !== -1 ? 'x' : 'y'
+
+      data.offsets.popper = Object.assign(popper, shiftOffsets[axis][shiftVariation])
+    }
+
+    return data
+  }
+
+  /**
+   * 防止溢出修饰器
+   * @method
+   * @memberof Popper.modifiers
+   * @static
+   * @param {Object} data - update 方法生成的数据对象
+   * @returns {Object} 修改后的数据对象
+   */
+  Popper.prototype.modifiers.preventOverflow = function (data) {
+    var order = this._options.preventOverflowOrder
+    var popper = getPopperClientRect(data.offsets.popper)
+
+    var check = {
+      left: function () {
+        var left = popper.left
+        if (popper.left < data.boundaries.left) {
+          left = Math.max(popper.left, data.boundaries.left)
+        }
+        return { left: left }
+      },
+      right: function () {
+        var left = popper.left
+        if (popper.right > data.boundaries.right) {
+          left = Math.min(popper.left, data.boundaries.right - popper.width)
+        }
+        return { left: left }
+      },
+      top: function () {
+        var top = popper.top
+        if (popper.top < data.boundaries.top) {
+          top = Math.max(popper.top, data.boundaries.top)
+        }
+        return { top: top }
+      },
+      bottom: function () {
+        var top = popper.top
+        if (popper.bottom > data.boundaries.bottom) {
+          top = Math.min(popper.top, data.boundaries.bottom - popper.height)
+        }
+        return { top: top }
+      },
+    }
+
+    order.forEach(function (direction) {
+      data.offsets.popper = Object.assign(popper, check[direction]())
+    })
+
+    return data
+  }
+
+  /**
+   * 保持在一起修饰器
+   * @method
+   * @memberof Popper.modifiers
+   * @static
+   * @param {Object} data - update 方法生成的数据对象
+   * @returns {Object} 修改后的数据对象
+   */
+  Popper.prototype.modifiers.keepTogether = function (data) {
+    var popper = getPopperClientRect(data.offsets.popper)
+    var reference = data.offsets.reference
+    var f = Math.floor
+
+    if (popper.right < f(reference.left)) {
+      data.offsets.popper.left = f(reference.left) - popper.width
+    }
+    if (popper.left > f(reference.right)) {
+      data.offsets.popper.left = f(reference.right)
+    }
+    if (popper.bottom < f(reference.top)) {
+      data.offsets.popper.top = f(reference.top) - popper.height
+    }
+    if (popper.top > f(reference.bottom)) {
+      data.offsets.popper.top = f(reference.bottom)
+    }
+
+    return data
+  }
+
+  /**
+   * 翻转修饰器
+   * @method
+   * @memberof Popper.modifiers
+   * @static
+   * @param {Object} data - update 方法生成的数据对象
+   * @returns {Object} 修改后的数据对象
+   * @note 需要 preventOverflow 修饰器在其之前执行才能正常工作
+   */
+  Popper.prototype.modifiers.flip = function (data) {
+    if (!this.isModifierRequired(this.modifiers.flip, this.modifiers.preventOverflow)) {
+      console.warn('WARNING: preventOverflow modifier is required by flip modifier in order to work!')
+      return data
+    }
+
+    if (data.flipped && data.placement === data._originalPlacement) {
+      return data
+    }
+
+    var placement = data.placement.split('-')[0]
+    var placementOpposite = getOppositePlacement(placement)
+    var variation = data.placement.split('-')[1] || ''
+
+    var flipOrder = []
+    if (this._options.flipBehavior === 'flip') {
+      flipOrder = [placement, placementOpposite]
+    } else {
+      flipOrder = this._options.flipBehavior
+    }
+
+    flipOrder.forEach(
+      function (step, index) {
+        if (placement !== step || flipOrder.length === index + 1) {
+          return
+        }
+
+        placement = data.placement.split('-')[0]
+        placementOpposite = getOppositePlacement(placement)
+
+        var popperOffsets = getPopperClientRect(data.offsets.popper)
+
+        var a = ['right', 'bottom'].indexOf(placement) !== -1
+
+        if ((a && Math.floor(data.offsets.reference[placement]) > Math.floor(popperOffsets[placementOpposite])) || (!a && Math.floor(data.offsets.reference[placement]) < Math.floor(popperOffsets[placementOpposite]))) {
+          data.flipped = true
+          data.placement = flipOrder[index + 1]
+          if (variation) {
+            data.placement += '-' + variation
+          }
+          data.offsets.popper = this._getOffsets(this._popper, this._reference, data.placement).popper
+
+          data = this.runModifiers(data, this._options.modifiers, this._flip)
+        }
+      }.bind(this)
+    )
+    return data
+  }
+
+  /**
+   * 偏移量修饰器
+   * @method
+   * @memberof Popper.modifiers
+   * @static
+   * @param {Object} data - update 方法生成的数据对象
+   * @returns {Object} 修改后的数据对象
+   */
+  Popper.prototype.modifiers.offset = function (data) {
+    var offset = this._options.offset
+    var popper = data.offsets.popper
+
+    if (data.placement.indexOf('left') !== -1) {
+      popper.top -= offset
+    } else if (data.placement.indexOf('right') !== -1) {
+      popper.top += offset
+    } else if (data.placement.indexOf('top') !== -1) {
+      popper.left -= offset
+    } else if (data.placement.indexOf('bottom') !== -1) {
+      popper.left += offset
+    }
+    return data
+  }
+
+  /**
+   * 箭头修饰器
+   * @method
+   * @memberof Popper.modifiers
+   * @static
+   * @param {Object} data - update 方法生成的数据对象
+   * @returns {Object} 修改后的数据对象
+   * @note 需要 keepTogether 修饰器在其之前执行才能正常工作
+   */
+  Popper.prototype.modifiers.arrow = function (data) {
+    var arrow = this._options.arrowElement
+    var arrowOffset = this._options.arrowOffset
+
+    if (typeof arrow === 'string') {
+      arrow = this._popper.querySelector(arrow)
+    }
+
+    if (!arrow) {
+      return data
+    }
+
+    if (!this._popper.contains(arrow)) {
+      console.warn('WARNING: arrowElement must be child of its popper element!')
+      return data
+    }
+
+    if (!this.isModifierRequired(this.modifiers.arrow, this.modifiers.keepTogether)) {
+      console.warn('WARNING: keepTogether modifier is required by arrow modifier in order to work!')
+      return data
+    }
+
+    var arrowStyle = {}
+    var placement = data.placement.split('-')[0]
+    var popper = getPopperClientRect(data.offsets.popper)
+    var reference = data.offsets.reference
+    var isVertical = ['left', 'right'].indexOf(placement) !== -1
+
+    var len = isVertical ? 'height' : 'width'
+    var side = isVertical ? 'top' : 'left'
+    var altSide = isVertical ? 'left' : 'top'
+    var opSide = isVertical ? 'bottom' : 'right'
+    var arrowSize = getOuterSizes(arrow)[len]
+
+    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]
+    }
+
+    var center = reference[side] + (arrowOffset || reference[len] / 2 - arrowSize / 2)
+
+    var sideValue = center - popper[side]
+
+    sideValue = Math.max(Math.min(popper[len] - arrowSize - 8, sideValue), 8)
+    arrowStyle[side] = sideValue
+    arrowStyle[altSide] = ''
+
+    data.offsets.arrow = arrowStyle
+    data.arrowElement = arrow
+
+    return data
+  }
+
+  /**
+   * 获取元素的外部尺寸
+   * @function getOuterSizes
+   * @ignore
+   * @param {HTMLElement} element - 目标元素
+   * @returns {Object} 包含 width 和 height 属性的对象
+   * @private
+   */
+  function getOuterSizes(element) {
+    var _display = element.style.display,
+      _visibility = element.style.visibility
+    element.style.display = 'block'
+    element.style.visibility = 'hidden'
+    var calcWidthToForceRepaint = element.offsetWidth
+
+    var styles = root.getComputedStyle(element)
+    var x = parseFloat(styles.marginTop) + parseFloat(styles.marginBottom)
+    var y = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight)
+    var result = { width: element.offsetWidth + y, height: element.offsetHeight + x }
+
+    element.style.display = _display
+    element.style.visibility = _visibility
+    return result
+  }
+
+  /**
+   * 获取相反的放置位置
+   * @function getOppositePlacement
+   * @ignore
+   * @param {String} placement - 原始位置
+   * @returns {String} 翻转后的位置
+   * @private
+   */
+  function getOppositePlacement(placement) {
+    var hash = { left: 'right', right: 'left', bottom: 'top', top: 'bottom' }
+    return placement.replace(/left|right|bottom|top/g, function (matched) {
+      return hash[matched]
+    })
+  }
+
+  /**
+   * 根据弹出层偏移量生成类似 getBoundingClientRect 的输出
+   * @function getPopperClientRect
+   * @ignore
+   * @param {Object} popperOffsets - 弹出层偏移量对象
+   * @returns {Object} 类似 ClientRect 的输出对象
+   * @private
+   */
+  function getPopperClientRect(popperOffsets) {
+    var offsets = Object.assign({}, popperOffsets)
+    offsets.right = offsets.left + offsets.width
+    offsets.bottom = offsets.top + offsets.height
+    return offsets
+  }
+
+  /**
+   * 获取数组中指定键的索引
+   * @function getArrayKeyIndex
+   * @ignore
+   * @param {Array} arr - 目标数组
+   * @param {*} keyToFind - 要查找的键
+   * @returns {Number|null} 索引值
+   * @private
+   */
+  function getArrayKeyIndex(arr, keyToFind) {
+    var i = 0,
+      key
+    for (key in arr) {
+      if (arr[key] === keyToFind) {
+        return i
+      }
+      i++
+    }
+    return null
+  }
+
+  /**
+   * 获取元素的 CSS 计算属性
+   * @function getStyleComputedProperty
+   * @ignore
+   * @param {HTMLElement} element - 目标元素
+   * @param {String} property - 属性名
+   * @returns {String} CSS 属性值
+   * @private
+   */
+  function getStyleComputedProperty(element, property) {
+    var css = root.getComputedStyle(element, null)
+    return css[property]
+  }
+
+  /**
+   * 获取元素的偏移父元素
+   * @function getOffsetParent
+   * @ignore
+   * @param {HTMLElement} element - 目标元素
+   * @returns {HTMLElement} 偏移父元素
+   * @private
+   */
+  function getOffsetParent(element) {
+    var offsetParent = element.offsetParent
+    return offsetParent === root.document.body || !offsetParent ? root.document.documentElement : offsetParent
+  }
+
+  /**
+   * 获取元素的滚动父元素
+   * @function getScrollParent
+   * @ignore
+   * @param {HTMLElement} element - 目标元素
+   * @returns {HTMLElement} 滚动父元素
+   * @private
+   */
+  function getScrollParent(element) {
+    var parent = element.parentNode
+
+    if (!parent) {
+      return element
+    }
+
+    if (parent === root.document) {
+      if (root.document.body.scrollTop || root.document.body.scrollLeft) {
+        return root.document.body
+      } else {
+        return root.document.documentElement
+      }
+    }
+
+    if (
+      ['scroll', 'auto'].indexOf(getStyleComputedProperty(parent, 'overflow')) !== -1 ||
+      ['scroll', 'auto'].indexOf(getStyleComputedProperty(parent, 'overflow-x')) !== -1 ||
+      ['scroll', 'auto'].indexOf(getStyleComputedProperty(parent, 'overflow-y')) !== -1
+    ) {
+      return parent
+    }
+    return getScrollParent(element.parentNode)
+  }
+
+  /**
+   * 检查元素是否为固定定位
+   * @function isFixed
+   * @ignore
+   * @param {HTMLElement} element - 目标元素
+   * @returns {Boolean} 是否为固定定位
+   * @private
+   */
+  function isFixed(element) {
+    if (element === root.document.body) {
+      return false
+    }
+    if (getStyleComputedProperty(element, 'position') === 'fixed') {
+      return true
+    }
+    return element.parentNode ? isFixed(element.parentNode) : element
+  }
+
+  /**
+   * 为元素设置样式
+   * @function setStyle
+   * @ignore
+   * @param {HTMLElement} element - 目标元素
+   * @param {Object} styles - 样式对象
+   * @returns {void}
+   * @private
+   */
+  function setStyle(element, styles) {
+    function is_numeric(n) {
+      return n !== '' && !isNaN(parseFloat(n)) && isFinite(n)
+    }
+    Object.keys(styles).forEach(function (prop) {
+      var unit = ''
+      if (['width', 'height', 'top', 'right', 'bottom', 'left'].indexOf(prop) !== -1 && is_numeric(styles[prop])) {
+        unit = 'px'
+      }
+      element.style[prop] = styles[prop] + unit
+    })
+  }
+
+  /**
+   * 检查变量是否为函数
+   * @function isFunction
+   * @ignore
+   * @param {*} functionToCheck - 要检查的变量
+   * @returns {Boolean} 是否为函数
+   * @private
+   */
+  function isFunction(functionToCheck) {
+    var getType = {}
+    return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]'
+  }
+
+  /**
+   * 获取元素相对于其偏移父元素的位置
+   * @function getOffsetRect
+   * @ignore
+   * @param {HTMLElement} element - 目标元素
+   * @returns {Object} 位置对象
+   * @private
+   */
+  function getOffsetRect(element) {
+    var elementRect = {
+      width: element.offsetWidth,
+      height: element.offsetHeight,
+      left: element.offsetLeft,
+      top: element.offsetTop,
+    }
+
+    elementRect.right = elementRect.left + elementRect.width
+    elementRect.bottom = elementRect.top + elementRect.height
+
+    return elementRect
+  }
+
+  /**
+   * 获取元素的边界客户端矩形
+   * @function getBoundingClientRect
+   * @ignore
+   * @param {HTMLElement} element - 目标元素
+   * @returns {Object} 客户端矩形对象
+   * @private
+   */
+  function getBoundingClientRect(element) {
+    var rect = element.getBoundingClientRect()
+
+    var isIE = navigator.userAgent.indexOf('MSIE') != -1
+
+    var rectTop = isIE && element.tagName === 'HTML' ? -element.scrollTop : rect.top
+
+    return {
+      left: rect.left,
+      top: rectTop,
+      right: rect.right,
+      bottom: rect.bottom,
+      width: rect.right - rect.left,
+      height: rect.bottom - rectTop,
+    }
+  }
+
+  /**
+   * 获取元素相对于其父元素的偏移量
+   * @function getOffsetRectRelativeToCustomParent
+   * @ignore
+   * @param {HTMLElement} element - 目标元素
+   * @param {HTMLElement} parent - 父元素
+   * @param {Boolean} fixed - 是否为固定定位
+   * @returns {Object} 矩形对象
+   * @private
+   */
+  function getOffsetRectRelativeToCustomParent(element, parent, fixed) {
+    var elementRect = getBoundingClientRect(element)
+    var parentRect = getBoundingClientRect(parent)
+
+    if (fixed) {
+      var scrollParent = getScrollParent(parent)
+      parentRect.top += scrollParent.scrollTop
+      parentRect.bottom += scrollParent.scrollTop
+      parentRect.left += scrollParent.scrollLeft
+      parentRect.right += scrollParent.scrollLeft
+    }
+
+    var rect = {
+      top: elementRect.top - parentRect.top,
+      left: elementRect.left - parentRect.left,
+      bottom: elementRect.top - parentRect.top + elementRect.height,
+      right: elementRect.left - parentRect.left + elementRect.width,
+      width: elementRect.width,
+      height: elementRect.height,
+    }
+    return rect
+  }
+
+  /**
+   * 获取带浏览器前缀的 CSS 属性名
+   * @function getSupportedPropertyName
+   * @ignore
+   * @param {String} property - 属性名
+   * @returns {String|null} 带前缀的属性名
+   * @private
+   */
+  function getSupportedPropertyName(property) {
+    var prefixes = ['', 'ms', 'webkit', 'moz', 'o']
+
+    for (var i = 0; i < prefixes.length; i++) {
+      var toCheck = prefixes[i] ? prefixes[i] + property.charAt(0).toUpperCase() + property.slice(1) : property
+      if (typeof root.document.body.style[toCheck] !== 'undefined') {
+        return toCheck
+      }
+    }
+    return null
+  }
+
+  /**
+   * Object.assign() 方法的 Polyfill
+   * @function Object.assign
+   * @ignore
+   * @see {@link https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign}
+   */
+  if (!Object.assign) {
+    Object.defineProperty(Object, 'assign', {
+      enumerable: false,
+      configurable: true,
+      writable: true,
+      value: function (target) {
+        if (target === undefined || target === null) {
+          throw new TypeError('Cannot convert first argument to object')
+        }
+
+        var to = Object(target)
+        for (var i = 1; i < arguments.length; i++) {
+          var nextSource = arguments[i]
+          if (nextSource === undefined || nextSource === null) {
+            continue
+          }
+          nextSource = Object(nextSource)
+
+          var keysArray = Object.keys(nextSource)
+          for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
+            var nextKey = keysArray[nextIndex]
+            var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey)
+            if (desc !== undefined && desc.enumerable) {
+              to[nextKey] = nextSource[nextKey]
+            }
+          }
+        }
+        return to
+      },
+    })
+  }
+
+  return Popper
+})