bk-vue-cec/lib/message.js

一个为运维业务场景而生，好看易用的Vue2原创组件库，由T-inside Design进行托管社区化运作

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('bk-magic-vue/lib/locale')) :
  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'bk-magic-vue/lib/locale'], factory) :
  (global = global || self, factory(global.library = {}, global.Vue, global.locale));
}(this, function (exports, Vue, locale) { 'use strict';

  Vue = Vue && Vue.hasOwnProperty('default') ? Vue['default'] : Vue;
  locale = locale && locale.hasOwnProperty('default') ? locale['default'] : locale;

  function _typeof(obj) {
    "@babel/helpers - typeof";

    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
      _typeof = function (obj) {
        return typeof obj;
      };
    } else {
      _typeof = function (obj) {
        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
      };
    }

    return _typeof(obj);
  }

  function createCommonjsModule(fn, module) {
  	return module = { exports: {} }, fn(module, module.exports), module.exports;
  }

  var _global = createCommonjsModule(function (module) {
  var global = module.exports = typeof window != 'undefined' && window.Math == Math
    ? window : typeof self != 'undefined' && self.Math == Math ? self
    : Function('return this')();
  if (typeof __g == 'number') __g = global;
  });

  var _core = createCommonjsModule(function (module) {
  var core = module.exports = { version: '2.6.12' };
  if (typeof __e == 'number') __e = core;
  });
  var _core_1 = _core.version;

  var _aFunction = function (it) {
    if (typeof it != 'function') throw TypeError(it + ' is not a function!');
    return it;
  };

  var _ctx = function (fn, that, length) {
    _aFunction(fn);
    if (that === undefined) return fn;
    switch (length) {
      case 1: return function (a) {
        return fn.call(that, a);
      };
      case 2: return function (a, b) {
        return fn.call(that, a, b);
      };
      case 3: return function (a, b, c) {
        return fn.call(that, a, b, c);
      };
    }
    return function () {
      return fn.apply(that, arguments);
    };
  };

  var _isObject = function (it) {
    return typeof it === 'object' ? it !== null : typeof it === 'function';
  };

  var _anObject = function (it) {
    if (!_isObject(it)) throw TypeError(it + ' is not an object!');
    return it;
  };

  var _fails = function (exec) {
    try {
      return !!exec();
    } catch (e) {
      return true;
    }
  };

  var _descriptors = !_fails(function () {
    return Object.defineProperty({}, 'a', { get: function () { return 7; } }).a != 7;
  });

  var document$1 = _global.document;
  var is = _isObject(document$1) && _isObject(document$1.createElement);
  var _domCreate = function (it) {
    return is ? document$1.createElement(it) : {};
  };

  var _ie8DomDefine = !_descriptors && !_fails(function () {
    return Object.defineProperty(_domCreate('div'), 'a', { get: function () { return 7; } }).a != 7;
  });

  var _toPrimitive = function (it, S) {
    if (!_isObject(it)) return it;
    var fn, val;
    if (S && typeof (fn = it.toString) == 'function' && !_isObject(val = fn.call(it))) return val;
    if (typeof (fn = it.valueOf) == 'function' && !_isObject(val = fn.call(it))) return val;
    if (!S && typeof (fn = it.toString) == 'function' && !_isObject(val = fn.call(it))) return val;
    throw TypeError("Can't convert object to primitive value");
  };

  var dP = Object.defineProperty;
  var f = _descriptors ? Object.defineProperty : function defineProperty(O, P, Attributes) {
    _anObject(O);
    P = _toPrimitive(P, true);
    _anObject(Attributes);
    if (_ie8DomDefine) try {
      return dP(O, P, Attributes);
    } catch (e) {  }
    if ('get' in Attributes || 'set' in Attributes) throw TypeError('Accessors not supported!');
    if ('value' in Attributes) O[P] = Attributes.value;
    return O;
  };
  var _objectDp = {
  	f: f
  };

  var _propertyDesc = function (bitmap, value) {
    return {
      enumerable: !(bitmap & 1),
      configurable: !(bitmap & 2),
      writable: !(bitmap & 4),
      value: value
    };
  };

  var _hide = _descriptors ? function (object, key, value) {
    return _objectDp.f(object, key, _propertyDesc(1, value));
  } : function (object, key, value) {
    object[key] = value;
    return object;
  };

  var hasOwnProperty = {}.hasOwnProperty;
  var _has = function (it, key) {
    return hasOwnProperty.call(it, key);
  };

  var PROTOTYPE = 'prototype';
  var $export = function (type, name, source) {
    var IS_FORCED = type & $export.F;
    var IS_GLOBAL = type & $export.G;
    var IS_STATIC = type & $export.S;
    var IS_PROTO = type & $export.P;
    var IS_BIND = type & $export.B;
    var IS_WRAP = type & $export.W;
    var exports = IS_GLOBAL ? _core : _core[name] || (_core[name] = {});
    var expProto = exports[PROTOTYPE];
    var target = IS_GLOBAL ? _global : IS_STATIC ? _global[name] : (_global[name] || {})[PROTOTYPE];
    var key, own, out;
    if (IS_GLOBAL) source = name;
    for (key in source) {
      own = !IS_FORCED && target && target[key] !== undefined;
      if (own && _has(exports, key)) continue;
      out = own ? target[key] : source[key];
      exports[key] = IS_GLOBAL && typeof target[key] != 'function' ? source[key]
      : IS_BIND && own ? _ctx(out, _global)
      : IS_WRAP && target[key] == out ? (function (C) {
        var F = function (a, b, c) {
          if (this instanceof C) {
            switch (arguments.length) {
              case 0: return new C();
              case 1: return new C(a);
              case 2: return new C(a, b);
            } return new C(a, b, c);
          } return C.apply(this, arguments);
        };
        F[PROTOTYPE] = C[PROTOTYPE];
        return F;
      })(out) : IS_PROTO && typeof out == 'function' ? _ctx(Function.call, out) : out;
      if (IS_PROTO) {
        (exports.virtual || (exports.virtual = {}))[key] = out;
        if (type & $export.R && expProto && !expProto[key]) _hide(expProto, key, out);
      }
    }
  };
  $export.F = 1;
  $export.G = 2;
  $export.S = 4;
  $export.P = 8;
  $export.B = 16;
  $export.W = 32;
  $export.U = 64;
  $export.R = 128;
  var _export = $export;

  var _defined = function (it) {
    if (it == undefined) throw TypeError("Can't call method on  " + it);
    return it;
  };

  var _stringWs = '\x09\x0A\x0B\x0C\x0D\x20\xA0\u1680\u180E\u2000\u2001\u2002\u2003' +
    '\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u3000\u2028\u2029\uFEFF';

  var space = '[' + _stringWs + ']';
  var non = '\u200b\u0085';
  var ltrim = RegExp('^' + space + space + '*');
  var rtrim = RegExp(space + space + '*$');
  var exporter = function (KEY, exec, ALIAS) {
    var exp = {};
    var FORCE = _fails(function () {
      return !!_stringWs[KEY]() || non[KEY]() != non;
    });
    var fn = exp[KEY] = FORCE ? exec(trim) : _stringWs[KEY];
    if (ALIAS) exp[ALIAS] = fn;
    _export(_export.P + _export.F * FORCE, 'String', exp);
  };
  var trim = exporter.trim = function (string, TYPE) {
    string = String(_defined(string));
    if (TYPE & 1) string = string.replace(ltrim, '');
    if (TYPE & 2) string = string.replace(rtrim, '');
    return string;
  };
  var _stringTrim = exporter;

  var $parseInt = _global.parseInt;
  var $trim = _stringTrim.trim;
  var hex = /^[-+]?0[xX]/;
  var _parseInt = $parseInt(_stringWs + '08') !== 8 || $parseInt(_stringWs + '0x16') !== 22 ? function parseInt(str, radix) {
    var string = $trim(String(str), 3);
    return $parseInt(string, (radix >>> 0) || (hex.test(string) ? 16 : 10));
  } : $parseInt;

  _export(_export.G + _export.F * (parseInt != _parseInt), { parseInt: _parseInt });

  var _parseInt$1 = _core.parseInt;

  var _parseInt$2 = _parseInt$1;

  _export(_export.S, 'Date', { now: function () { return new Date().getTime(); } });

  var now = _core.Date.now;

  var now$1 = now;

  var $parseFloat = _global.parseFloat;
  var $trim$1 = _stringTrim.trim;
  var _parseFloat = 1 / $parseFloat(_stringWs + '-0') !== -Infinity ? function parseFloat(str) {
    var string = $trim$1(String(str), 3);
    var result = $parseFloat(string);
    return result === 0 && string.charAt(0) == '-' ? -0 : result;
  } : $parseFloat;

  _export(_export.G + _export.F * (parseFloat != _parseFloat), { parseFloat: _parseFloat });

  var _parseFloat$1 = _core.parseFloat;

  var _parseFloat$2 = _parseFloat$1;

  var toString = {}.toString;
  var _cof = function (it) {
    return toString.call(it).slice(8, -1);
  };

  var _isArray = Array.isArray || function isArray(arg) {
    return _cof(arg) == 'Array';
  };

  _export(_export.S, 'Array', { isArray: _isArray });

  var isArray = _core.Array.isArray;

  var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
    window.setTimeout(callback, 1000 / 60);
  };
  var cancelAnimationFrame = window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.oCancelAnimationFrame || window.msCancelAnimationFrame || function (id) {
    window.clearTimeout(id);
  };
  var copyText = function copyText(text) {
    var textarea = document.createElement('textarea');
    document.body.appendChild(textarea);
    textarea.value = text;
    textarea.select();
    if (document.execCommand('copy')) {
      document.execCommand('copy');
    } else {
      console.warn('unsupported this function, please use Google Chrome.');
    }
    document.body.removeChild(textarea);
  };
  function checkOverflow(el) {
    if (!el) return false;
    var createDom = function createDom(el, css) {
      var dom = document.createElement('div');
      var width = _parseFloat$2(css['width']) ? Math.ceil(_parseFloat$2(css['width'])) + 'px' : css['width'];
      dom.style.cssText = "\n        width: ".concat(width, ";\n        line-height: ").concat(css['line-height'], ";\n        font-size: ").concat(css['font-size'], ";\n        word-break: ").concat(css['word-break'], ";\n        padding: ").concat(css['padding'], ";\n    ");
      dom.textContent = el.textContent;
      return dom;
    };
    var isOverflow = false;
    try {
      var css = window.getComputedStyle(el, null);
      var lineClamp = css.webkitLineClamp;
      if (lineClamp !== 'none') {
        var targetHeight = _parseFloat$2(css.height);
        var dom = createDom(el, css);
        document.body.appendChild(dom);
        var domHeight = window.getComputedStyle(dom, null)['height'];
        document.body.removeChild(dom);
        isOverflow = targetHeight < _parseFloat$2(domHeight);
      } else {
        isOverflow = el.clientWidth < el.scrollWidth || el.clientHeight < el.scrollHeight;
      }
    } catch (e) {
      console.warn('There is an error when check element overflow state: ', e);
    }
    return isOverflow;
  }

  var ICONS = {
    primary: 'icon-info-circle-shape',
    error: 'icon-close-circle-shape',
    warning: 'icon-exclamation-circle-shape',
    success: 'icon-check-circle-shape'
  };
  var script = {
    name: 'bk-message',
    mixins: [locale.mixin],
    data: function data() {
      return {
        theme: 'primary',
        message: '',
        delay: 3000,
        icon: '',
        dismissable: true,
        verticalOffset: 0,
        horizonOffset: 0,
        visible: false,
        countID: null,
        onClose: function onClose() {},
        extCls: '',
        copied: false,
        ellipsisCopy: false,
        showCopyText: false
      };
    },
    computed: {
      themeClass: function themeClass() {
        return "bk-message-".concat(this.theme);
      },
      verticalStyle: function verticalStyle() {
        return {
          top: "".concat(this.verticalOffset, "px")
        };
      },
      tipsIcon: function tipsIcon() {
        return this.icon || ICONS[this.theme];
      },
      singleEllipsis: function singleEllipsis() {
        return this.ellipsisLine === 1;
      },
      multiEllipsis: function multiEllipsis() {
        return this.ellipsisLine > 1;
      },
      ellipsisStyle: function ellipsisStyle() {
        return {
          '--line': this.ellipsisLine
        };
      },
      localeCopyText: function localeCopyText() {
        return this.copied ? this.t('bk.message.copied') : this.t('bk.message.copy');
      }
    },
    mounted: function mounted() {
      this.startCountDown();
    },
    methods: {
      destroyEl: function destroyEl() {
        this.$destroy();
        this.$el.parentNode && this.$el.parentNode.removeChild(this.$el);
      },
      startCountDown: function startCountDown() {
        var _this = this;
        if (this.delay > 0) {
          this.countID = setTimeout(function () {
            _this.visible && _this.close();
          }, this.delay);
        }
      },
      stopCountDown: function stopCountDown() {
        clearTimeout(this.countID);
      },
      close: function close() {
        this.visible = false;
        typeof this.onClose === 'function' && this.onClose();
      },
      copyContent: function copyContent() {
        if (!this.$refs.content || this.copied) return;
        var text = this.$refs.content.textContent;
        copyText(text);
        this.copied = true;
      },
      setShowCopyText: function setShowCopyText() {
        this.showCopyText = this.ellipsisCopy && checkOverflow(this.$refs.content);
      }
    }
  };

  function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
  , shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
    if (typeof shadowMode !== 'boolean') {
      createInjectorSSR = createInjector;
      createInjector = shadowMode;
      shadowMode = false;
    }
    var options = typeof script === 'function' ? script.options : script;
    if (template && template.render) {
      options.render = template.render;
      options.staticRenderFns = template.staticRenderFns;
      options._compiled = true;
      if (isFunctionalTemplate) {
        options.functional = true;
      }
    }
    if (scopeId) {
      options._scopeId = scopeId;
    }
    var hook;
    if (moduleIdentifier) {
      hook = function hook(context) {
        context = context ||
        this.$vnode && this.$vnode.ssrContext ||
        this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
        if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
          context = __VUE_SSR_CONTEXT__;
        }
        if (style) {
          style.call(this, createInjectorSSR(context));
        }
        if (context && context._registeredComponents) {
          context._registeredComponents.add(moduleIdentifier);
        }
      };
      options._ssrRegister = hook;
    } else if (style) {
      hook = shadowMode ? function () {
        style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
      } : function (context) {
        style.call(this, createInjector(context));
      };
    }
    if (hook) {
      if (options.functional) {
        var originalRender = options.render;
        options.render = function renderWithStyleInjection(h, context) {
          hook.call(context);
          return originalRender(h, context);
        };
      } else {
        var existing = options.beforeCreate;
        options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
      }
    }
    return script;
  }
  var normalizeComponent_1 = normalizeComponent;

  /* script */
  var __vue_script__ = script;
  /* template */

  var __vue_render__ = function __vue_render__() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('transition', {
      attrs: {
        "name": "vertical-move"
      },
      on: {
        "after-leave": _vm.destroyEl,
        "enter": _vm.setShowCopyText
      }
    }, [_c('div', {
      directives: [{
        name: "show",
        rawName: "v-show",
        value: _vm.visible,
        expression: "visible"
      }],
      class: ['bk-message', _vm.themeClass, _vm.extCls],
      style: _vm.verticalStyle,
      on: {
        "mouseenter": _vm.stopCountDown,
        "mouseleave": _vm.startCountDown
      }
    }, [_c('div', {
      staticClass: "bk-message-icon"
    }, [_c('i', {
      class: ['bk-icon', _vm.tipsIcon]
    })]), _c('div', {
      ref: "content",
      class: ['bk-message-content', {
        'multi-ellipsis': _vm.multiEllipsis,
        'ellipsis': _vm.singleEllipsis
      }],
      style: _vm.ellipsisStyle
    }, [_vm._t("default", [_vm._v(_vm._s(_vm.message))])], 2), _vm.showCopyText ? _c('div', {
      class: ['bk-message-copy', {
        'copied': _vm.copied
      }],
      on: {
        "click": _vm.copyContent
      }
    }, [_vm._v("\n            " + _vm._s(_vm.localeCopyText) + "\n        ")]) : _vm._e(), _vm.dismissable ? _c('div', {
      staticClass: "bk-message-close"
    }, [_c('i', {
      class: ['bk-icon icon-close', _vm.showCopyText ? 'ml10' : 'ml30'],
      on: {
        "click": function click($event) {
          $event.stopPropagation();
          return _vm.close($event);
        }
      }
    })]) : _vm._e()])]);
  };

  var __vue_staticRenderFns__ = [];
  /* style */

  var __vue_inject_styles__ = undefined;
  /* scoped */

  var __vue_scope_id__ = undefined;
  /* module identifier */

  var __vue_module_identifier__ = undefined;
  /* functional template */

  var __vue_is_functional_template__ = false;
  /* style inject */

  /* style inject SSR */

  /* style inject shadow dom */

  var __vue_component__ = /*#__PURE__*/normalizeComponent_1({
    render: __vue_render__,
    staticRenderFns: __vue_staticRenderFns__
  }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);

  var MessageComponent = Vue.extend(__vue_component__);
  var messageList = [];
  var seed = 0;
  var BkMessage = function BkMessage(config) {
    if (config.limit === 0) {
      BkMessage.batchClose();
      return;
    }
    if (config.limit > 0) {
      BkMessage.batchClose(config.limit);
    }
    var instanceId = "messageInstance_".concat(now$1(), "_").concat(seed++);
    var offsetY = _parseInt$2(config.offsetY) || 30;
    var spacing = _parseInt$2(config.spacing) || 10;
    if (config.ellipsisLine === null || config.ellipsisLine === undefined || config.ellipsisLine === '' || isNaN(config.ellipsisLine)) {
      config.ellipsisLine = 1;
    }
    var ellipsisLine = config.ellipsisLine;
    var verticalOffset = offsetY;
    if (typeof config === 'string' || typeof config === 'number') {
      config = {
        message: config
      };
    }
    var configClose = config.onClose;
    config.onClose = function () {
      BkMessage.close(instanceId, configClose);
    };
    var instance = new MessageComponent({
      data: config
    });
    if (config.message !== null && _typeof(config.message) === 'object' && config.message.hasOwnProperty('componentOptions')) {
      instance.$slots.default = [config.message];
      instance.message = null;
    }
    instance.id = instanceId;
    instance.spacing = spacing;
    instance.ellipsisLine = ellipsisLine;
    instance.verticalOffset = 0;
    instance.$mount();
    instance.dom = instance.$el;
    document.body.appendChild(instance.$el);
    messageList.forEach(function (item) {
      verticalOffset += _parseInt$2(item.$el.offsetHeight) + _parseInt$2(spacing);
    });
    instance.verticalOffset = verticalOffset;
    instance.horizonOffset = spacing;
    instance.visible = true;
    messageList.push(instance);
    return instance;
  };
  BkMessage.close = function (id, configClose) {
    var instanceIndex = -1;
    messageList.some(function (item, index) {
      if (item.id === id) {
        instanceIndex = index;
        return true;
      }
    });
    if (instanceIndex > -1) {
      var instance = messageList[instanceIndex];
      if (typeof configClose === 'function') {
        configClose(instance);
      }
      messageList.forEach(function (item, i) {
        if (i > instanceIndex) {
          item.verticalOffset -= instance.dom.offsetHeight + instance.spacing;
        }
      });
      messageList.splice(instanceIndex, 1);
    }
  };
  BkMessage.batchClose = function () {
    var limit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
    var len = messageList.length;
    if (limit <= len) {
      var InstancesShouldClose = messageList.slice(0, len - limit + 1);
      InstancesShouldClose.forEach(function (item) {
        item.close();
      });
    }
  };
  Vue.prototype.$bkMessage = BkMessage;

  exports.default = BkMessage;

  Object.defineProperty(exports, '__esModule', { value: true });

}));