@bic-fe/mds-ui/dist/_mixin/popper.js

A set of enterprise-class Vue UI components.

'use strict';

exports.__esModule = true;

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _assign = require('babel-runtime/core-js/object/assign');

var _assign2 = _interopRequireDefault(_assign);

var _create = require('babel-runtime/core-js/object/create');

var _create2 = _interopRequireDefault(_create);

var _keys = require('babel-runtime/core-js/object/keys');

var _keys2 = _interopRequireDefault(_keys);

var _popper = require('popper.js');

var _popper2 = _interopRequireDefault(_popper);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/**
 * 实际使用的位置和popper.js的位置映射表
 */
var placementMap = {
  top: 'top',
  left: 'left',
  right: 'right',
  bottom: 'bottom',
  topLeft: 'top-start',
  topRight: 'top-end',
  bottomLeft: 'bottom-start',
  bottomRight: 'bottom-end',
  leftTop: 'left-start',
  leftBottom: 'left-end',
  rightTop: 'right-start',
  rightBottom: 'right-end'
};
var popperMap = {
  'top': 'top',
  'left': 'left',
  'right': 'right',
  'bottom': 'bottom',
  'top-start': 'topLeft',
  'top-end': 'topRight',
  'bottom-start': 'bottomLeft',
  'bottom-end': 'bottomRight',
  'left-start': 'leftTop',
  'left-end': 'leftBottom',
  'right-start': 'rightTop',
  'right-end': 'rightBottom'
};

exports.default = {
  props: {
    placement: {
      type: String,
      default: 'bottom'
    },
    popperOptions: {
      type: Object,
      default: function _default() {}
    }
  },
  data: function data() {
    return {
      placementMap: placementMap,
      popperMap: popperMap,
      popper: null,
      reference: null,
      visible: false,
      visibleArrow: false,
      currentPalcement: '',
      popperModifiers: {}
    };
  },

  watch: {
    visible: function visible(val) {
      var _this = this;

      if (val) {
        this.$nextTick(function () {
          _this.updatePopper();
        });
      } else {
        this.destroyPopper();
      }
    }
  },
  computed: {
    placementCls: function placementCls() {
      return [this.prefixCls + '-placement-' + this.popperMap[this.currentPalcement]];
    }
  },
  created: function created() {
    this.currentPalcement = this.placementMap[this.placement];
  },

  methods: {
    createPopper: function createPopper() {
      var _this2 = this;

      if ((0, _keys2.default)(this.placementMap).indexOf(this.placement) === -1) return;
      this.popper = this.popper || this.$refs.popper;
      if (this.popperVM && this.popperVM.$el) {
        this.popper = this.popperVM.$el;
      }
      var options = (0, _create2.default)(null);
      if (!this.popper || !this.reference) return;
      if (this.visibleArrow) this.appendArrow(this.popper);
      document.body.appendChild(this.popper);
      if (this.popperJS && this.popperJS.destroy) {
        this.popperJS.destroy();
      }
      options.placement = this.currentPalcement;
      var defaultModifiers = {
        computeStyle: {
          gpuAcceleration: false
        }
      };
      options.modifiers = (0, _assign2.default)({}, defaultModifiers, this.popperModifiers);
      options.onCreate = function () {
        _this2.currentPalcement = _this2.popper.getAttribute('x-placement');
        _this2.resetTransformOrigin();
        _this2.$nextTick(_this2.updatePopper);
      };
      options.onUpdate = function () {
        _this2.currentPalcement = _this2.popper.getAttribute('x-placement');
      };
      this.popperJS = new _popper2.default(this.reference, this.popper, (0, _extends3.default)({}, options, this.popperOptions));
    },
    updatePopper: function updatePopper() {
      if (this.popperJS) {
        this.popperJS.update();
      } else {
        this.createPopper();
        this.reference && this.reference.__vue__ && this.reference.__vue__.initWidth && this.reference.__vue__.initWidth();
      }
    },
    doDestroy: function doDestroy() {
      if (this.visible || !this.popperJS) return;
      this.popperJS.destroy();
      this.popperJS = null;
    },
    destroyPopper: function destroyPopper() {
      if (this.popperJS) {
        this.resetTransformOrigin();
      }
    },
    resetTransformOrigin: function resetTransformOrigin() {
      var tfPlacementMap = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' };
      var placement = this.currentPalcement.split('-')[0];
      var origin = tfPlacementMap[placement];
      this.popper.style.transformOrigin = ['top', 'bottom'].indexOf(placement) > -1 ? 'center ' + origin : origin + ' center';
    },
    appendArrow: function appendArrow(element) {
      var hash = void 0;
      if (this.appended) {
        return;
      }

      this.appended = true;

      (0, _keys2.default)(element.attributes).some(function (item) {
        if (/^_v-/.test(element.attributes[item].name)) {
          hash = element.attributes[item].name;
          return true;
        }
        return false;
      });

      var arrow = document.createElement('div');

      if (hash) {
        arrow.setAttribute(hash, '');
      }
      arrow.className = this.prefixCls + '-arrow';
      element.querySelector('.' + this.prefixCls + '-content').appendChild(arrow);
    }
  },
  beforeDestroy: function beforeDestroy() {
    this.doDestroy();
    if (this.popper && this.popper.parentNode === document.body) {
      document.body.removeChild(this.popper);
    }
  }
};