bk-magic-vue/lib/resize-layout.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 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 $parseFloat = _global.parseFloat;
	var $trim = _stringTrim.trim;
	var _parseFloat = 1 / $parseFloat(_stringWs + '-0') !== -Infinity ? function parseFloat(str) {
	  var string = $trim(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 id = 0;
	var px = Math.random();
	var _uid = function (key) {
	  return 'Symbol('.concat(key === undefined ? '' : key, ')_', (++id + px).toString(36));
	};

	var _meta = createCommonjsModule(function (module) {
	var META = _uid('meta');
	var setDesc = _objectDp.f;
	var id = 0;
	var isExtensible = Object.isExtensible || function () {
	  return true;
	};
	var FREEZE = !_fails(function () {
	  return isExtensible(Object.preventExtensions({}));
	});
	var setMeta = function (it) {
	  setDesc(it, META, { value: {
	    i: 'O' + ++id,
	    w: {}
	  } });
	};
	var fastKey = function (it, create) {
	  if (!_isObject(it)) return typeof it == 'symbol' ? it : (typeof it == 'string' ? 'S' : 'P') + it;
	  if (!_has(it, META)) {
	    if (!isExtensible(it)) return 'F';
	    if (!create) return 'E';
	    setMeta(it);
	  } return it[META].i;
	};
	var getWeak = function (it, create) {
	  if (!_has(it, META)) {
	    if (!isExtensible(it)) return true;
	    if (!create) return false;
	    setMeta(it);
	  } return it[META].w;
	};
	var onFreeze = function (it) {
	  if (FREEZE && meta.NEED && isExtensible(it) && !_has(it, META)) setMeta(it);
	  return it;
	};
	var meta = module.exports = {
	  KEY: META,
	  NEED: false,
	  fastKey: fastKey,
	  getWeak: getWeak,
	  onFreeze: onFreeze
	};
	});
	var _meta_1 = _meta.KEY;
	var _meta_2 = _meta.NEED;
	var _meta_3 = _meta.fastKey;
	var _meta_4 = _meta.getWeak;
	var _meta_5 = _meta.onFreeze;

	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);
	};

	var meta = _meta.onFreeze;
	_objectSap('freeze', function ($freeze) {
	  return function freeze(it) {
	    return $freeze && _isObject(it) ? $freeze(meta(it)) : it;
	  };
	});

	var freeze = _core.Object.freeze;

	var freeze$1 = freeze;

	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 _toPrimitive$1(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$1(arg, "string");
	  return typeof key === "symbol" ? key : String(key);
	}

	var requestFrame = function () {
	  var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || function (fn) {
	    return window.setTimeout(fn, 20);
	  };
	  return function (fn) {
	    return raf(fn);
	  };
	}();
	var cancelFrame = function () {
	  var cancel = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame || window.clearTimeout;
	  return function (id) {
	    return cancel(id);
	  };
	}();
	var resetTrigger = function resetTrigger(element) {
	  var trigger = element.__resizeTrigger__;
	  var expand = trigger.firstElementChild;
	  var contract = trigger.lastElementChild;
	  var expandChild = expand.firstElementChild;
	  contract.scrollLeft = contract.scrollWidth;
	  contract.scrollTop = contract.scrollHeight;
	  expandChild.style.width = expand.offsetWidth + 1 + 'px';
	  expandChild.style.height = expand.offsetHeight + 1 + 'px';
	  expand.scrollLeft = expand.scrollWidth;
	  expand.scrollTop = expand.scrollHeight;
	};
	var checkTriggers = function checkTriggers(element) {
	  return element.offsetWidth !== element.__resizeLast__.width || element.offsetHeight !== element.__resizeLast__.height;
	};
	var scrollListener = function scrollListener(event) {
	  var _this = this;
	  resetTrigger(this);
	  if (this.__resizeRAF__) cancelFrame(this.__resizeRAF__);
	  this.__resizeRAF__ = requestFrame(function () {
	    if (checkTriggers(_this)) {
	      _this.__resizeLast__.width = _this.offsetWidth;
	      _this.__resizeLast__.height = _this.offsetHeight;
	      _this.__resizeListeners__.forEach(function (fn) {
	        fn.call(_this, event);
	      });
	    }
	  });
	};
	var attachEvent = document.attachEvent;
	var DOM_PREFIXES = 'Webkit Moz O ms'.split(' ');
	var START_EVENTS = 'webkitAnimationStart animationstart oAnimationStart MSAnimationStart'.split(' ');
	var RESIZE_ANIMATION_NAME = 'resizeanim';
	var animation = false;
	var keyFramePrefix = '';
	var animationStartEvent = 'animationstart';
	if (!attachEvent) {
	  var testElement = document.createElement('fakeelement');
	  if (testElement.style.animationName !== undefined) {
	    animation = true;
	  }
	  if (animation === false) {
	    var prefix = '';
	    for (var i = 0; i < DOM_PREFIXES.length; i++) {
	      if (testElement.style[DOM_PREFIXES[i] + 'AnimationName'] !== undefined) {
	        prefix = DOM_PREFIXES[i];
	        keyFramePrefix = '-' + prefix.toLowerCase() + '-';
	        animationStartEvent = START_EVENTS[i];
	        animation = true;
	        break;
	      }
	    }
	  }
	}
	var stylesCreated = false;
	var createStyles = function createStyles() {
	  if (!stylesCreated) {
	    var animationKeyframes = "@".concat(keyFramePrefix, "keyframes ").concat(RESIZE_ANIMATION_NAME, " { from { opacity: 0; } to { opacity: 0; } } ");
	    var animationStyle = "".concat(keyFramePrefix, "animation: 1ms ").concat(RESIZE_ANIMATION_NAME, ";");
	    var css = "".concat(animationKeyframes, "\n      .resize-triggers { ").concat(animationStyle, " visibility: hidden; opacity: 0; }\n      .resize-triggers, .resize-triggers > div, .contract-trigger:before { content: \" \"; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1 }\n      .resize-triggers > div { background: #eee; overflow: auto; }\n      .contract-trigger:before { width: 200%; height: 200%; }");
	    var head = document.head || document.getElementsByTagName('head')[0];
	    var style = document.createElement('style');
	    style.type = 'text/css';
	    if (style.styleSheet) {
	      style.styleSheet.cssText = css;
	    } else {
	      style.appendChild(document.createTextNode(css));
	    }
	    head.appendChild(style);
	    stylesCreated = true;
	  }
	};
	var addResizeListener = function addResizeListener(element, fn) {
	  var useCapture = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
	  if (attachEvent) {
	    element.attachEvent('onresize', fn);
	  } else {
	    if (!element.__resizeTrigger__) {
	      if (getComputedStyle(element).position === 'static') {
	        element.style.position = 'relative';
	      }
	      createStyles();
	      element.__resizeLast__ = {};
	      element.__resizeListeners__ = [];
	      var resizeTrigger = element.__resizeTrigger__ = document.createElement('div');
	      resizeTrigger.className = 'resize-triggers';
	      resizeTrigger.innerHTML = '<div class="expand-trigger"><div></div></div><div class="contract-trigger"></div>';
	      element.appendChild(resizeTrigger);
	      resetTrigger(element);
	      element.addEventListener('scroll', scrollListener, useCapture);
	      if (animationStartEvent) {
	        resizeTrigger.addEventListener(animationStartEvent, function (event) {
	          if (event.animationName === RESIZE_ANIMATION_NAME) {
	            resetTrigger(element);
	          }
	        });
	      }
	    }
	    element.__resizeListeners__.push(fn);
	  }
	};
	var removeResizeListener = function removeResizeListener(element, fn) {
	  if (!element || !element.__resizeListeners__) return;
	  if (attachEvent) {
	    element.detachEvent('onresize', fn);
	  } else {
	    element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
	    if (!element.__resizeListeners__.length) {
	      element.removeEventListener('scroll', scrollListener);
	      element.__resizeTrigger__ = !element.removeChild(element.__resizeTrigger__);
	    }
	  }
	};

	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;
	}

	var script = {
	  name: 'bk-resize-layout',
	  props: {
	    placement: {
	      default: function _default() {
	        return 'left';
	      },
	      validator: function validator(val) {
	        var placements = ['top', 'right', 'bottom', 'left'];
	        return placements.includes(val);
	      }
	    },
	    min: {
	      type: Number,
	      default: 3,
	      validator: function validator(min) {
	        return min >= 3;
	      }
	    },
	    max: {
	      type: Number,
	      default: Infinity
	    },
	    triggerWidth: {
	      type: Number,
	      default: 5
	    },
	    triggerOffset: {
	      type: Number,
	      default: 3
	    },
	    initialDivide: {
	      type: [String, Number],
	      default: '20%'
	    },
	    immediate: Boolean,
	    disabled: Boolean,
	    collapsible: Boolean,
	    autoMinimize: {
	      type: [Boolean, Number],
	      default: false
	    },
	    border: {
	      type: Boolean,
	      default: true
	    },
	    extCls: String
	  },
	  data: function data() {
	    return {
	      collapsed: false,
	      asideContentVisible: true,
	      minimized: false,
	      limitMax: null,
	      asideStyleValue: null,
	      state: {}
	    };
	  },
	  computed: {
	    vertical: function vertical() {
	      return ['left', 'right'].includes(this.placement);
	    },
	    computedStyleKey: function computedStyleKey() {
	      return this.vertical ? 'width' : 'height';
	    },
	    computedAsideStyle: function computedAsideStyle() {
	      var asideStyleValue = '';
	      if (typeof this.asideStyleValue !== 'number' && isNaN(this.asideStyleValue)) {
	        asideStyleValue = this.asideStyleValue;
	      } else {
	        asideStyleValue = "".concat(this.asideStyleValue, "px");
	      }
	      return _defineProperty({}, this.computedStyleKey, asideStyleValue);
	    },
	    computedTriggerStyle: function computedTriggerStyle() {
	      var _style;
	      var style = (_style = {}, _defineProperty(_style, "margin-".concat(this.placement), "".concat(this.triggerOffset - this.triggerWidth, "px")), _defineProperty(_style, this.computedStyleKey, "".concat(this.triggerWidth, "px")), _style);
	      return style;
	    },
	    computedAutoMinimize: function computedAutoMinimize() {
	      if (this.autoMinimize) {
	        return typeof this.autoMinimize === 'boolean' ? 50 : this.autoMinimize;
	      }
	      return 0;
	    }
	  },
	  watch: {
	    initialDivide: {
	      handler: function handler(newValue, _oldValue) {
	        this.asideStyleValue = newValue;
	      },
	      immediate: true
	    }
	  },
	  created: function created() {
	    this.asideStyleValue = this.initialDivide;
	  },
	  mounted: function mounted() {
	    this.setupLimit();
	    addResizeListener(this.$el, this.setupLimit);
	  },
	  beforeDestroy: function beforeDestroy() {
	    removeResizeListener(this.$el, this.setupLimit);
	  },
	  methods: {
	    setupLimit: function setupLimit() {
	      var rect = this.$el.getBoundingClientRect();
	      this.limitMax = this.vertical ? rect.width : rect.height;
	    },
	    updateResizeProxyStyle: function updateResizeProxyStyle() {
	      var placement = this.placement;
	      var resizeProxy = this.$refs.resizeProxy;
	      resizeProxy.style.visibility = 'visible';
	      switch (placement) {
	        case 'left':
	          resizeProxy.style.inset = "0 auto auto ".concat(this.state.aside.width, "px");
	          break;
	        case 'right':
	          resizeProxy.style.inset = "0  ".concat(this.state.aside.width, "px auto auto");
	          break;
	        case 'top':
	          resizeProxy.style.inset = "".concat(this.state.aside.height, "px auto auto 0");
	          break;
	        case 'bottom':
	          resizeProxy.style.inset = "auto auto ".concat(this.state.aside.height, "px 0");
	          break;
	      }
	    },
	    updateResizeMaskStyle: function updateResizeMaskStyle() {
	      var resizeMask = this.$refs.resizeMask;
	      resizeMask.style.display = 'block';
	      resizeMask.style.cursor = this.vertical ? 'col-resize' : 'row-resize';
	    },
	    getRealValue: function getRealValue(current) {
	      return Math.min(this.max, Math.max(this.min, current), this.limitMax - this.triggerWidth);
	    },
	    handleMousedown: function handleMousedown(event) {
	      var _this = this;
	      this.$emit('before-resize', event);
	      var placement = this.placement;
	      var aside = this.$refs.aside;
	      var asideRect = aside.getBoundingClientRect();
	      var resizeProxy = this.$refs.resizeProxy;
	      var resizeMask = this.$refs.resizeMask;
	      this.state = freeze$1({
	        mouse: {
	          clientX: event.clientX,
	          clientY: event.clientY
	        },
	        aside: {
	          width: asideRect.width,
	          height: asideRect.height
	        }
	      });
	      this.updateResizeMaskStyle();
	      if (!this.immediate) {
	        this.updateResizeProxyStyle();
	      }
	      document.onselectstart = function () {
	        return false;
	      };
	      document.ondragstart = function () {
	        return false;
	      };
	      var resizingCallback = throttle(100, function (value) {
	        return _this.$emit('resizing', value);
	      });
	      var handleMouseMove = function handleMouseMove(event) {
	        if (!_this.disabled) {
	          var delta;
	          switch (placement) {
	            case 'top':
	              delta = event.clientY - _this.state.mouse.clientY;
	              break;
	            case 'right':
	              delta = _this.state.mouse.clientX - event.clientX;
	              break;
	            case 'bottom':
	              delta = _this.state.mouse.clientY - event.clientY;
	              break;
	            case 'left':
	              delta = event.clientX - _this.state.mouse.clientX;
	          }
	          var current = _this.state.aside[_this.computedStyleKey] + delta;
	          var realValue = _this.getRealValue(current) + _this.triggerOffset;
	          var pixel = "".concat(realValue, "px");
	          _this.asideStyleValue = pixel;
	          if (_this.immediate) {
	            aside.style[_this.computedStyleKey] = pixel;
	          } else {
	            resizeProxy.style[placement] = pixel;
	          }
	          resizingCallback(realValue);
	        }
	      };
	      var handleMouseUp = function handleMouseUp(event) {
	        resizingCallback.cancel();
	        resizeProxy.style.visibility = 'hidden';
	        resizeMask.style.display = 'none';
	        document.removeEventListener('mousemove', handleMouseMove);
	        document.removeEventListener('mouseup', handleMouseUp);
	        document.onselectstart = null;
	        document.ondragstart = null;
	        _this.asideStyleValue = resizeProxy.style[placement];
	        _this.$nextTick(function () {
	          _this.setupAutoMinimize();
	          _this.$emit('after-resize', _parseFloat$2(resizeProxy.style[placement], 10));
	        });
	        if (_this.immediate) {
	          return false;
	        }
	        aside.style[_this.computedStyleKey] = resizeProxy.style[placement];
	      };
	      document.addEventListener('mousemove', handleMouseMove);
	      document.addEventListener('mouseup', handleMouseUp);
	    },
	    setupAutoMinimize: function setupAutoMinimize() {
	      var _this2 = this;
	      if (!this.autoMinimize) {
	        return false;
	      }
	      var aside = this.$refs.aside;
	      var asideRect = aside.getBoundingClientRect();
	      this.minimized = this.collapsed = asideRect[this.computedStyleKey] <= this.computedAutoMinimize;
	      if (!this.minimized) {
	        this.asideContentVisible = true;
	        return false;
	      }
	      var prevDataWidthAttr = aside.getAttribute("data-".concat(this.computedStyleKey));
	      var prevDataWidth = prevDataWidthAttr && "".concat(_parseFloat$2(prevDataWidthAttr), "px") || this.initialDivide;
	      this.setupAsideAnimation();
	      this.$nextTick(function () {
	        aside.setAttribute("data-".concat(_this2.computedStyleKey), prevDataWidth);
	      });
	    },
	    setCollapse: function setCollapse(collapsed) {
	      this.collapsed = typeof collapsed === 'boolean' ? collapsed : !this.collapsed;
	      this.setupAsideAnimation();
	      this.$emit('collapse-change', this.collapsed);
	    },
	    setupAsideAnimation: function setupAsideAnimation() {
	      var aside = this.$refs.aside;
	      var previewStyleValue = aside.style[this.computedStyleKey];
	      this.setupAsideListener(!this.collapsed);
	      if (this.collapsed) {
	        aside.setAttribute("data-".concat(this.computedStyleKey), previewStyleValue);
	        this.asideStyleValue = this.collapsible ? '0' : '5px';
	      } else {
	        this.asideContentVisible = true;
	        this.asideStyleValue = aside.getAttribute("data-".concat(this.computedStyleKey));
	      }
	    },
	    setupAsideListener: function setupAsideListener(asideContentVisible) {
	      var _this3 = this;
	      var aside = this.$refs.aside;
	      var removeClass = function removeClass() {
	        _this3.asideContentVisible = asideContentVisible;
	        aside.style.transition = '';
	        aside.removeEventListener('transitionend', removeClass);
	      };
	      aside.addEventListener('transitionend', removeClass);
	      aside.style.transition = "".concat(this.computedStyleKey, " cubic-bezier(0.4, 0, 0.2, 1) .3s");
	    }
	  }
	};

	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('div', {
	    class: [_vm.extCls, 'bk-resize-layout', "bk-resize-layout-" + _vm.placement, {
	      'bk-resize-layout-collapsible': _vm.collapsible,
	      'bk-resize-layout-collapsed': _vm.collapsed,
	      'bk-resize-layout-border': _vm.border
	    }]
	  }, [_c('aside', {
	    ref: "aside",
	    staticClass: "bk-resize-layout-aside",
	    style: _vm.computedAsideStyle
	  }, [_c('div', {
	    directives: [{
	      name: "show",
	      rawName: "v-show",
	      value: _vm.asideContentVisible,
	      expression: "asideContentVisible"
	    }],
	    staticClass: "bk-resize-layout-aside-content"
	  }, [_vm._t("aside")], 2), _c('i', {
	    directives: [{
	      name: "show",
	      rawName: "v-show",
	      value: !_vm.disabled && (!_vm.collapsed || _vm.autoMinimize),
	      expression: "!disabled && (!collapsed || autoMinimize)"
	    }],
	    staticClass: "bk-resize-trigger",
	    style: _vm.computedTriggerStyle,
	    on: {
	      "mousedown": function mousedown($event) {
	        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "left", 37, $event.key, ["Left", "ArrowLeft"])) {
	          return null;
	        }
	        if ('button' in $event && $event.button !== 0) {
	          return null;
	        }
	        return _vm.handleMousedown($event);
	      }
	    }
	  }), _c('i', {
	    directives: [{
	      name: "show",
	      rawName: "v-show",
	      value: !_vm.collapsed || _vm.autoMinimize,
	      expression: "!collapsed || autoMinimize"
	    }],
	    ref: "resizeProxy",
	    class: ['bk-resize-proxy', _vm.placement]
	  }), _vm.collapsible ? _vm._t("collapse-trigger", function () {
	    return [_c('i', {
	      staticClass: "bk-resize-collapse bk-icon icon-angle-left",
	      on: {
	        "click": _vm.setCollapse
	      }
	    })];
	  }) : _vm._e()], 2), _c('main', {
	    staticClass: "bk-resize-layout-main"
	  }, [_vm._t("main")], 2), _c('div', {
	    ref: "resizeMask",
	    staticClass: "bk-resize-mask"
	  })]);
	};
	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 _toObject = function (it) {
	  return Object(_defined(it));
	};

	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;
	  };
	};

	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 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);
	};

	_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(__vue_component__);

	exports.default = __vue_component__;

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

}));