@cw-devops/bk-magic-vue/lib/virtual-render.js

基于蓝鲸 Magicbox 和 Vue 的前端组件库

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (global = global || self, factory(global.library = {}));
}(this, function (exports) { 'use strict';

  function _defineProperty(obj, key, value) {
    key = _toPropertyKey(key);
    if (key in obj) {
      Object.defineProperty(obj, key, {
        value: value,
        enumerable: true,
        configurable: true,
        writable: true
      });
    } else {
      obj[key] = value;
    }
    return obj;
  }
  function _extends() {
    _extends = Object.assign ? Object.assign.bind() : function (target) {
      for (var i = 1; i < arguments.length; i++) {
        var source = arguments[i];
        for (var key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
          }
        }
      }
      return target;
    };
    return _extends.apply(this, arguments);
  }
  function _objectSpread(target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i] != null ? Object(arguments[i]) : {};
      var ownKeys = Object.keys(source);
      if (typeof Object.getOwnPropertySymbols === 'function') {
        ownKeys.push.apply(ownKeys, Object.getOwnPropertySymbols(source).filter(function (sym) {
          return Object.getOwnPropertyDescriptor(source, sym).enumerable;
        }));
      }
      ownKeys.forEach(function (key) {
        _defineProperty(target, key, source[key]);
      });
    }
    return target;
  }
  function _toPrimitive(input, hint) {
    if (typeof input !== "object" || input === null) return input;
    var prim = input[Symbol.toPrimitive];
    if (prim !== undefined) {
      var res = prim.call(input, hint || "default");
      if (typeof res !== "object") return res;
      throw new TypeError("@@toPrimitive must return a primitive value.");
    }
    return (hint === "string" ? String : Number)(input);
  }
  function _toPropertyKey(arg) {
    var key = _toPrimitive(arg, "string");
    return typeof key === "symbol" ? key : String(key);
  }

  function throttle (delay, noTrailing, callback, debounceMode) {
    var timeoutID;
    var cancelled = false;
    var lastExec = 0;
    function clearExistingTimeout() {
      if (timeoutID) {
        clearTimeout(timeoutID);
      }
    }
    function cancel() {
      clearExistingTimeout();
      cancelled = true;
    }
    if (typeof noTrailing !== 'boolean') {
      debounceMode = callback;
      callback = noTrailing;
      noTrailing = undefined;
    }
    function wrapper() {
      var self = this;
      var elapsed = Date.now() - lastExec;
      var args = arguments;
      if (cancelled) {
        return;
      }
      function exec() {
        lastExec = Date.now();
        callback.apply(self, args);
      }
      function clear() {
        timeoutID = undefined;
      }
      if (debounceMode && !timeoutID) {
        exec();
      }
      clearExistingTimeout();
      if (debounceMode === undefined && elapsed > delay) {
        exec();
      } else if (noTrailing !== true) {
        timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === undefined ? delay - elapsed : delay);
      }
    }
    wrapper.cancel = cancel;
    return wrapper;
  }

  function visibleRender(e, wrapper, binding) {
    var _binding$value = binding.value,
      _binding$value$lineHe = _binding$value.lineHeight,
      lineHeight = _binding$value$lineHe === void 0 ? 30 : _binding$value$lineHe,
      callback = _binding$value.callback;
    var scrollTop = wrapper.scrollTop,
      offsetHeight = wrapper.offsetHeight,
      startIndex = wrapper.startIndex,
      endIndex = wrapper.endIndex;
    var targetStartIndex = Math.floor(scrollTop / lineHeight);
    var targetEndIndex = Math.ceil(offsetHeight / lineHeight) + targetStartIndex;
    if (startIndex !== targetStartIndex || endIndex !== targetEndIndex) {
      typeof callback === 'function' && callback(e, targetStartIndex, targetEndIndex, scrollTop);
    }
  }
  var throttledRender = throttle(60, function (e, wrapper, binding) {
    return visibleRender(e, wrapper, binding);
  });
  var virtualRender = {
    inserted: function inserted(el, binding) {
      var wrapper = el.parentNode;
      wrapper.addEventListener('scroll', function (e) {
        return throttledRender(e, wrapper, binding);
      });
    },
    componentUpdated: function componentUpdated(el, binding) {
      var wrapper = el.parentNode;
      throttledRender(null, wrapper, binding);
    },
    unbind: function unbind(el) {
      if (el) {
        var wrapper = el.parentNode;
        wrapper && wrapper.removeEventListener('scroll', throttledRender);
      }
    }
  };

  var Component = {
    name: 'bk-virtual-render',
    directives: {
      virtualRender: virtualRender
    },
    props: {
      className: {
        type: String,
        default: ''
      },
      scrollXName: {
        type: String,
        default: 'bk-scroll-x'
      },
      scrollYName: {
        type: String,
        default: 'bk-scroll-y'
      },
      list: {
        type: Array,
        default: function _default() {
          return [];
        }
      },
      lineHeight: {
        type: Number,
        default: 30
      },
      minHeight: {
        type: Number,
        default: 30
      },
      height: {
        type: [Number, String],
        default: '100%'
      },
      width: {
        type: [Number, String],
        default: '100%'
      },
      groupItemCount: {
        type: Number,
        default: 1
      },
      preloadItemCount: {
        type: Number,
        default: 1
      },
      renderAs: {
        type: String,
        default: 'div'
      },
      contentAs: {
        type: String,
        default: 'div'
      },
      scrollPosition: {
        type: String,
        default: 'content'
      },
      abosuteHeight: {
        type: [Number, String],
        default: 'auto'
      }
    },
    data: function data() {
      return {
        startIndex: 0,
        endIndex: 0,
        scrollTop: 1,
        translateY: 0
      };
    },
    computed: {
      listLength: function listLength() {
        return Math.ceil((this.localList || []).length / this.groupItemCount);
      },
      calcList: function calcList() {
        return this.localList.slice(this.startIndex * this.groupItemCount, (this.endIndex + this.preloadItemCount) * this.groupItemCount);
      },
      wrapperStyle: function wrapperStyle() {
        return {
          height: typeof this.height === 'number' ? "".concat(this.height, "px") : this.height,
          width: typeof this.width === 'number' ? "".concat(this.width, "px") : this.width,
          display: 'inline-block'
        };
      },
      innerHeight: function innerHeight() {
        return this.abosuteHeight === 'auto' ? this.lineHeight * this.listLength : "".concat(this.abosuteHeight, "px");
      },
      innerContentStyle: function innerContentStyle() {
        return {
          top: "".concat(this.scrollTop, "px"),
          transform: "translateY(-".concat(this.translateY, "px)")
        };
      },
      innerStyle: function innerStyle() {
        return {
          height: "".concat(this.innerHeight < this.minHeight ? this.minHeight : this.innerHeight, "px"),
          display: this.abosuteHeight === 0 ? 'none' : 'block'
        };
      },
      localList: function localList() {
        return (this.list || []).map(function (item, index) {
          return _extends(item, {
            $index: index
          });
        });
      }
    },
    watch: {
      list: function list(val) {
        var _this = this;
        this.$nextTick(function () {
          return _this.scrollToIndex(0);
        });
      }
    },
    methods: {
      handleScrollCallback: function handleScrollCallback(event, startIndex, endIndex, scrollTop) {
        this.startIndex = startIndex;
        this.endIndex = endIndex;
        this.scrollTop = scrollTop;
        this.$emit('content-scroll', event);
        this.translateY = scrollTop % this.lineHeight;
      },
      scrollToIndex: function scrollToIndex(index) {
        if (index >= 0) {
          var scrollTop = this.lineHeight * index;
          this.$el && this.$el.scrollTo({
            top: scrollTop,
            behavior: 'smooth'
          });
        }
      }
    },
    render: function render(h) {
      return h(this.renderAs || 'div', {
        class: ['bk-virtual-render', this.scrollXName, this.scrollYName, this.className, this.scrollPosition === 'container' ? 'bk-virtual-content' : ''],
        style: _objectSpread({}, this.wrapperStyle, this.scrollPosition === 'container' ? this.innerContentStyle : {})
      }, [this.$slots.beforeContent, h(this.contentAs || 'div', {
        class: [this.scrollPosition === 'content' ? 'bk-virtual-content' : ''],
        style: this.scrollPosition === 'content' ? this.innerContentStyle : {},
        directives: [{
          name: 'virtual-render',
          value: {
            callback: this.handleScrollCallback,
            listLength: this.listLength,
            lineHeight: this.lineHeight,
            startIndex: this.startIndex,
            endIndex: this.endIndex
          }
        }]
      }, [this.$scopedSlots.default({
        data: this.calcList
      })]), this.$slots.afterContent, h('div', {
        class: ['bk-virtual-section'],
        style: this.innerStyle
      })]);
    }
  };

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

  var _toObject = function (it) {
    return Object(_defined(it));
  };

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

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

  var _iobject = Object('z').propertyIsEnumerable(0) ? Object : function (it) {
    return _cof(it) == 'String' ? it.split('') : Object(it);
  };

  var _toIobject = function (it) {
    return _iobject(_defined(it));
  };

  var ceil = Math.ceil;
  var floor = Math.floor;
  var _toInteger = function (it) {
    return isNaN(it = +it) ? 0 : (it > 0 ? floor : ceil)(it);
  };

  var min = Math.min;
  var _toLength = function (it) {
    return it > 0 ? min(_toInteger(it), 0x1fffffffffffff) : 0;
  };

  var max = Math.max;
  var min$1 = Math.min;
  var _toAbsoluteIndex = function (index, length) {
    index = _toInteger(index);
    return index < 0 ? max(index + length, 0) : min$1(index, length);
  };

  var _arrayIncludes = function (IS_INCLUDES) {
    return function ($this, el, fromIndex) {
      var O = _toIobject($this);
      var length = _toLength(O.length);
      var index = _toAbsoluteIndex(fromIndex, length);
      var value;
      if (IS_INCLUDES && el != el) while (length > index) {
        value = O[index++];
        if (value != value) return true;
      } else for (;length > index; index++) if (IS_INCLUDES || index in O) {
        if (O[index] === el) return IS_INCLUDES || index || 0;
      } return !IS_INCLUDES && -1;
    };
  };

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

  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 _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 _shared = createCommonjsModule(function (module) {
  var SHARED = '__core-js_shared__';
  var store = _global[SHARED] || (_global[SHARED] = {});
  (module.exports = function (key, value) {
    return store[key] || (store[key] = value !== undefined ? value : {});
  })('versions', []).push({
    version: _core.version,
    mode:  'pure' ,
    copyright: '© 2020 Denis Pushkarev (zloirock.ru)'
  });
  });

  var id = 0;
  var px = Math.random();
  var _uid = function (key) {
    return 'Symbol('.concat(key === undefined ? '' : key, ')_', (++id + px).toString(36));
  };

  var shared = _shared('keys');
  var _sharedKey = function (key) {
    return shared[key] || (shared[key] = _uid(key));
  };

  var arrayIndexOf = _arrayIncludes(false);
  var IE_PROTO = _sharedKey('IE_PROTO');
  var _objectKeysInternal = function (object, names) {
    var O = _toIobject(object);
    var i = 0;
    var result = [];
    var key;
    for (key in O) if (key != IE_PROTO) _has(O, key) && result.push(key);
    while (names.length > i) if (_has(O, key = names[i++])) {
      ~arrayIndexOf(result, key) || result.push(key);
    }
    return result;
  };

  var _enumBugKeys = (
    'constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf'
  ).split(',');

  var _objectKeys = Object.keys || function keys(O) {
    return _objectKeysInternal(O, _enumBugKeys);
  };

  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 = _global.document;
  var is = _isObject(document) && _isObject(document.createElement);
  var _domCreate = function (it) {
    return is ? document.createElement(it) : {};
  };

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

  var _toPrimitive$1 = 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$1(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 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 _objectSap = function (KEY, exec) {
    var fn = (_core.Object || {})[KEY] || Object[KEY];
    var exp = {};
    exp[KEY] = exec(fn);
    _export(_export.S + _export.F * _fails(function () { fn(1); }), 'Object', exp);
  };

  _objectSap('keys', function () {
    return function keys(it) {
      return _objectKeys(_toObject(it));
    };
  });

  var keys = _core.Object.keys;

  var keys$1 = keys;

  function setInstaller (component, afterInstall) {
    component.install = function (Vue) {
      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
      var props = component.props || {};
      keys$1(options).forEach(function (key) {
        if (props.hasOwnProperty(key)) {
          if (typeof props[key] === 'function' || props[key] instanceof Array) {
            props[key] = {
              type: props[key],
              default: options[key]
            };
          } else {
            props[key].default = options[key];
          }
        }
      });
      component.name = options.namespace ? component.name.replace('bk', options.namespace) : component.name;
      Vue.component(component.name, component);
      typeof afterInstall === 'function' && afterInstall(Vue, options);
    };
  }

  setInstaller(Component);

  exports.default = Component;

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

}));