eoss 0.1.0-alpha.20 → 0.1.0-alpha.21

package/lib/color-picker.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 125);
+/******/ 	return __webpack_require__(__webpack_require__.s = 127);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -127,46 +127,295 @@ function _broadcast(componentName, eventName, params) {
 
 /***/ }),
 
-/***/ 125:
+/***/ 12:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _src_color_picker__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(68);
+/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4);
+/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(vue__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var eoss_src_utils_popup__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(23);
 
 
-/* istanbul ignore next */
-_src_color_picker__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"].install = function (Vue) {
-  Vue.component(_src_color_picker__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"].name, _src_color_picker__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"]);
+
+var PopperJS = vue__WEBPACK_IMPORTED_MODULE_0___default.a.prototype.$isServer ? function () {} : __webpack_require__(41);
+var stopPropagation = function stopPropagation(e) {
+  return e.stopPropagation();
 };
 
-/* harmony default export */ __webpack_exports__["default"] = (_src_color_picker__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"]);
+/**
+ * @param {HTMLElement} [reference=$refs.reference] - The reference element used to position the popper.
+ * @param {HTMLElement} [popper=$refs.popper] - The HTML element used as popper, or a configuration used to generate the popper.
+ * @param {String} [placement=button] - Placement of the popper accepted values: top(-start, -end), right(-start, -end), bottom(-start, -end), left(-start, -end)
+ * @param {Number} [offset=0] - Amount of pixels the popper will be shifted (can be negative).
+ * @param {Boolean} [visible=false] Visibility of the popup element.
+ * @param {Boolean} [visible-arrow=false] Visibility of the arrow, no style.
+ */
+/* harmony default export */ __webpack_exports__["a"] = ({
+  props: {
+    transformOrigin: {
+      type: [Boolean, String],
+      default: true
+    },
+    placement: {
+      type: String,
+      default: 'bottom'
+    },
+    boundariesPadding: {
+      type: Number,
+      default: 5
+    },
+    reference: { type: Object },
+    popper: { type: Object },
+    offset: {
+      type: Number,
+      default: 0
+    },
+    value: { type: Boolean },
+    visibleArrow: { type: Boolean },
+    arrowOffset: {
+      type: Number,
+      default: 35
+    },
+    appendToBody: {
+      type: Boolean,
+      default: true
+    },
+    popperOptions: {
+      type: Object,
+      default: function _default() {
+        return {
+          gpuAcceleration: false
+        };
+      }
+    },
+    queryParent: { type: Boolean }
+  },
 
-/***/ }),
+  data: function data() {
+    return {
+      showPopper: false,
+      currentPlacement: ''
+    };
+  },
 
-/***/ 18:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-"use strict";
-/* harmony default export */ __webpack_exports__["a"] = (function (target) {
-  for (var i = 1, j = arguments.length; i < j; i++) {
-    var source = arguments[i] || {};
-    for (var prop in source) {
-      if (source.hasOwnProperty(prop)) {
-        var value = source[prop];
-        if (value !== undefined) {
-          target[prop] = value;
+  watch: {
+    value: {
+      immediate: true,
+      handler: function handler(val) {
+        this.showPopper = val;
+        this.$emit('input', val);
+      }
+    },
+
+    showPopper: function showPopper(val) {
+      if (this.disabled) return;
+      val ? this.updatePopper() : this.destroyPopper();
+      this.$emit('input', val);
+    }
+  },
+
+  methods: {
+    getBoundingClientRect: function getBoundingClientRect(element) {
+      var rect = element.getBoundingClientRect();
+
+      // whether the IE version is lower than 11
+      var isIE = /MSIE|Trident/.test(navigator.userAgent);
+
+      // fix ie document bounding top always 0 bug
+      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
+      };
+    },
+    createPopper: function createPopper() {
+      var _this = this;
+
+      if (this.$isServer) return;
+      this.currentPlacement = this.currentPlacement || this.placement;
+
+      // Validate placement format
+      if (!/^(top|bottom|left|right)(-start|-end)?$/g.test(this.currentPlacement)) {
+        return;
+      }
+
+      var options = this.popperOptions;
+      var popper = this.popperElm = this.popperElm || this.popper || this.$refs.popper;
+      var reference = this.referenceElm = this.referenceElm || this.reference || this.$refs.reference;
+
+      // Find reference element in different ways
+      if (!reference && this.$slots.reference && this.$slots.reference[0]) {
+        reference = this.referenceElm = this.$slots.reference[0].elm;
+      }
+      if (!reference && this.queryParent) {
+        reference = this.referenceElm = this.$parent.$el;
+      }
+
+      // Ensure both elements exist
+      if (!popper || !reference) return;
+
+      // Append arrow if needed
+      if (this.visibleArrow) this.appendArrow(popper);
+
+      // Append to body if required
+      if (this.appendToBody) {
+        document.body.appendChild(this.popperElm);
+
+        // Handle height limitation
+        if (this.popperElm.offsetHeight > document.body.offsetHeight) {
+          var _getBoundingClientRec = this.getBoundingClientRect(reference),
+              top = _getBoundingClientRec.top;
+
+          this.popperElm.style.height = document.body.offsetHeight - top + 'px';
         }
       }
+
+      // Clean up previous instance if exists
+      if (this.popperJS && typeof this.popperJS.destroy === 'function') {
+        this.popperJS.destroy();
+      }
+
+      // Configure and create new popper instance
+      options.placement = this.currentPlacement;
+      options.offset = this.offset;
+      options.arrowOffset = this.arrowOffset;
+
+      this.popperJS = new PopperJS(reference, popper, options);
+
+      // Set up callbacks
+      this.popperJS.onCreate(function () {
+        _this.$emit('created', _this);
+        _this.resetTransformOrigin();
+        _this.$nextTick(_this.updatePopper);
+      });
+
+      if (typeof options.onUpdate === 'function') {
+        this.popperJS.onUpdate(options.onUpdate);
+      }
+
+      // Set z-index and prevent click propagation
+      this.popperJS._popper.style.zIndex = eoss_src_utils_popup__WEBPACK_IMPORTED_MODULE_1__[/* PopupManager */ "a"].nextZIndex();
+      this.popperElm.addEventListener('click', stopPropagation);
+    },
+    updatePopper: function updatePopper() {
+      if (this.popperJS) {
+        this.popperJS.update();
+        if (this.popperJS._popper) {
+          this.popperJS._popper.style.zIndex = eoss_src_utils_popup__WEBPACK_IMPORTED_MODULE_1__[/* PopupManager */ "a"].nextZIndex();
+        }
+      } else {
+        this.createPopper();
+      }
+    },
+    doDestroy: function doDestroy() {
+      var forceDestroy = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+
+      /* istanbul ignore if */
+      if (!this.popperJS || this.showPopper && !forceDestroy) return;
+
+      this.popperJS.destroy();
+      this.popperJS = null;
+    },
+    destroyPopper: function destroyPopper() {
+      if (this.popperJS) {
+        this.resetTransformOrigin();
+      }
+    },
+    resetTransformOrigin: function resetTransformOrigin() {
+      if (!this.transformOrigin || !this.popperJS || !this.popperJS._popper) return;
+
+      var placementMap = {
+        top: 'bottom',
+        bottom: 'top',
+        left: 'right',
+        right: 'left'
+      };
+
+      var placementAttr = this.popperJS._popper.getAttribute('x-placement');
+      if (!placementAttr) return;
+
+      var placement = placementAttr.split('-')[0];
+      var origin = placementMap[placement];
+
+      this.popperJS._popper.style.transformOrigin = typeof this.transformOrigin === 'string' ? this.transformOrigin : ['top', 'bottom'].indexOf(placement) > -1 ? 'center ' + origin : origin + ' center';
+    },
+    appendArrow: function appendArrow(element) {
+      // Skip if already appended
+      if (this.appended) {
+        return;
+      }
+
+      this.appended = true;
+
+      // Find Vue hash attribute
+      var hash = void 0;
+      for (var i = 0; i < element.attributes.length; i++) {
+        var attr = element.attributes[i];
+        if (/^_v-/.test(attr.name)) {
+          hash = attr.name;
+          break;
+        }
+      }
+
+      // Create arrow element
+      var arrow = document.createElement('div');
+
+      // Copy Vue hash attribute if exists
+      if (hash) {
+        arrow.setAttribute(hash, '');
+      }
+
+      // Set arrow attributes
+      arrow.setAttribute('x-arrow', '');
+      arrow.className = 'popper__arrow';
+
+      // Append to element
+      element.appendChild(arrow);
     }
+  },
+
+  beforeDestroy: function beforeDestroy() {
+    this.doDestroy(true);
+
+    // Clean up DOM elements and event listeners
+    if (this.popperElm && this.popperElm.parentNode === document.body) {
+      this.popperElm.removeEventListener('click', stopPropagation);
+      document.body.removeChild(this.popperElm);
+    }
+  },
+
+
+  // call destroy in keep-alive mode
+  deactivated: function deactivated() {
+    this.$options.beforeDestroy[0].call(this);
   }
+});
 
-  return target;
-});;
+/***/ }),
+
+/***/ 127:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _src_color_picker__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(61);
+
+
+/* istanbul ignore next */
+_src_color_picker__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"].install = function (Vue) {
+  Vue.component(_src_color_picker__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"].name, _src_color_picker__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"]);
+};
+
+/* harmony default export */ __webpack_exports__["default"] = (_src_color_picker__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"]);
 
 /***/ }),
 
-/***/ 19:
+/***/ 15:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -174,7 +423,7 @@ _src_color_picker__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"].install = func
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return scrollIntoView; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return getScrollSize; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return scrollMove; });
-/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
+/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4);
 /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(vue__WEBPACK_IMPORTED_MODULE_0__);
 
 
@@ -311,285 +560,157 @@ function scrollMove(wrap) {
 
 /***/ }),
 
-/***/ 2:
-/***/ (function(module, exports) {
-
-module.exports = require("vue");
-
-/***/ }),
-
-/***/ 20:
+/***/ 16:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
-/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(vue__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var eoss_src_utils_popup__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(22);
-
-
-
-var PopperJS = vue__WEBPACK_IMPORTED_MODULE_0___default.a.prototype.$isServer ? function () {} : __webpack_require__(37);
-var stopPropagation = function stopPropagation(e) {
-  return e.stopPropagation();
-};
-
-/**
- * @param {HTMLElement} [reference=$refs.reference] - The reference element used to position the popper.
- * @param {HTMLElement} [popper=$refs.popper] - The HTML element used as popper, or a configuration used to generate the popper.
- * @param {String} [placement=button] - Placement of the popper accepted values: top(-start, -end), right(-start, -end), bottom(-start, -end), left(-start, -end)
- * @param {Number} [offset=0] - Amount of pixels the popper will be shifted (can be negative).
- * @param {Boolean} [visible=false] Visibility of the popup element.
- * @param {Boolean} [visible-arrow=false] Visibility of the arrow, no style.
- */
-/* harmony default export */ __webpack_exports__["a"] = ({
-  props: {
-    transformOrigin: {
-      type: [Boolean, String],
-      default: true
-    },
-    placement: {
-      type: String,
-      default: 'bottom'
-    },
-    boundariesPadding: {
-      type: Number,
-      default: 5
-    },
-    reference: { type: Object },
-    popper: { type: Object },
-    offset: {
-      type: Number,
-      default: 0
-    },
-    value: { type: Boolean },
-    visibleArrow: { type: Boolean },
-    arrowOffset: {
-      type: Number,
-      default: 35
-    },
-    appendToBody: {
-      type: Boolean,
-      default: true
-    },
-    popperOptions: {
-      type: Object,
-      default: function _default() {
-        return {
-          gpuAcceleration: false
-        };
-      }
-    },
-    queryParent: { type: Boolean }
-  },
-
-  data: function data() {
-    return {
-      showPopper: false,
-      currentPlacement: ''
-    };
-  },
-
-
-  watch: {
-    value: {
-      immediate: true,
-      handler: function handler(val) {
-        this.showPopper = val;
-        this.$emit('input', val);
-      }
-    },
-
-    showPopper: function showPopper(val) {
-      if (this.disabled) return;
-      val ? this.updatePopper() : this.destroyPopper();
-      this.$emit('input', val);
-    }
-  },
-
-  methods: {
-    getBoundingClientRect: function getBoundingClientRect(element) {
-      var rect = element.getBoundingClientRect();
-
-      // whether the IE version is lower than 11
-      var isIE = /MSIE|Trident/.test(navigator.userAgent);
-
-      // fix ie document bounding top always 0 bug
-      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
-      };
-    },
-    createPopper: function createPopper() {
-      var _this = this;
-
-      if (this.$isServer) return;
-      this.currentPlacement = this.currentPlacement || this.placement;
-
-      // Validate placement format
-      if (!/^(top|bottom|left|right)(-start|-end)?$/g.test(this.currentPlacement)) {
-        return;
-      }
-
-      var options = this.popperOptions;
-      var popper = this.popperElm = this.popperElm || this.popper || this.$refs.popper;
-      var reference = this.referenceElm = this.referenceElm || this.reference || this.$refs.reference;
-
-      // Find reference element in different ways
-      if (!reference && this.$slots.reference && this.$slots.reference[0]) {
-        reference = this.referenceElm = this.$slots.reference[0].elm;
-      }
-      if (!reference && this.queryParent) {
-        reference = this.referenceElm = this.$parent.$el;
+/* harmony default export */ __webpack_exports__["a"] = (function (target) {
+  for (var i = 1, j = arguments.length; i < j; i++) {
+    var source = arguments[i] || {};
+    for (var prop in source) {
+      if (source.hasOwnProperty(prop)) {
+        var value = source[prop];
+        if (value !== undefined) {
+          target[prop] = value;
+        }
       }
+    }
+  }
 
-      // Ensure both elements exist
-      if (!popper || !reference) return;
+  return target;
+});;
 
-      // Append arrow if needed
-      if (this.visibleArrow) this.appendArrow(popper);
+/***/ }),
 
-      // Append to body if required
-      if (this.appendToBody) {
-        document.body.appendChild(this.popperElm);
+/***/ 17:
+/***/ (function(module, exports) {
 
-        // Handle height limitation
-        if (this.popperElm.offsetHeight > document.body.offsetHeight) {
-          var _getBoundingClientRec = this.getBoundingClientRect(reference),
-              top = _getBoundingClientRec.top;
+module.exports = require("eoss/lib/input");
 
-          this.popperElm.style.height = document.body.offsetHeight - top + 'px';
-        }
-      }
+/***/ }),
 
-      // Clean up previous instance if exists
-      if (this.popperJS && typeof this.popperJS.destroy === 'function') {
-        this.popperJS.destroy();
-      }
+/***/ 18:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-      // Configure and create new popper instance
-      options.placement = this.currentPlacement;
-      options.offset = this.offset;
-      options.arrowOffset = this.arrowOffset;
+"use strict";
+/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4);
+/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(vue__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var eoss_src_utils_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
 
-      this.popperJS = new PopperJS(reference, popper, options);
 
-      // Set up callbacks
-      this.popperJS.onCreate(function () {
-        _this.$emit('created', _this);
-        _this.resetTransformOrigin();
-        _this.$nextTick(_this.updatePopper);
-      });
 
-      if (typeof options.onUpdate === 'function') {
-        this.popperJS.onUpdate(options.onUpdate);
-      }
+var nodeList = [];
+var ctx = '@@clickoutsideContext';
 
-      // Set z-index and prevent click propagation
-      this.popperJS._popper.style.zIndex = eoss_src_utils_popup__WEBPACK_IMPORTED_MODULE_1__[/* PopupManager */ "a"].nextZIndex();
-      this.popperElm.addEventListener('click', stopPropagation);
-    },
-    updatePopper: function updatePopper() {
-      if (this.popperJS) {
-        this.popperJS.update();
-        if (this.popperJS._popper) {
-          this.popperJS._popper.style.zIndex = eoss_src_utils_popup__WEBPACK_IMPORTED_MODULE_1__[/* PopupManager */ "a"].nextZIndex();
-        }
-      } else {
-        this.createPopper();
-      }
-    },
-    doDestroy: function doDestroy() {
-      var forceDestroy = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+var startClick = void 0;
+var seed = 0;
 
-      /* istanbul ignore if */
-      if (!this.popperJS || this.showPopper && !forceDestroy) return;
+!vue__WEBPACK_IMPORTED_MODULE_0___default.a.prototype.$isServer && Object(eoss_src_utils_dom__WEBPACK_IMPORTED_MODULE_1__[/* on */ "g"])(document, 'mousedown', function (e) {
+  return startClick = e;
+});
 
-      this.popperJS.destroy();
-      this.popperJS = null;
-    },
-    destroyPopper: function destroyPopper() {
-      if (this.popperJS) {
-        this.resetTransformOrigin();
-      }
-    },
-    resetTransformOrigin: function resetTransformOrigin() {
-      if (!this.transformOrigin || !this.popperJS || !this.popperJS._popper) return;
+!vue__WEBPACK_IMPORTED_MODULE_0___default.a.prototype.$isServer && Object(eoss_src_utils_dom__WEBPACK_IMPORTED_MODULE_1__[/* on */ "g"])(document, 'mouseup', function (e) {
+  nodeList.forEach(function (node) {
+    return node[ctx].documentHandler(e, startClick);
+  });
+});
 
-      var placementMap = {
-        top: 'bottom',
-        bottom: 'top',
-        left: 'right',
-        right: 'left'
-      };
+function createDocumentHandler(el, binding, vnode) {
+  return function () {
+    var mouseup = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var mousedown = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
-      var placementAttr = this.popperJS._popper.getAttribute('x-placement');
-      if (!placementAttr) return;
+    if (!vnode || !vnode.context || !mouseup.target || !mousedown.target || el.contains(mouseup.target) || el.contains(mousedown.target) || el === mouseup.target) {
+      return;
+    }
 
-      var placement = placementAttr.split('-')[0];
-      var origin = placementMap[placement];
+    var context = vnode.context;
 
-      this.popperJS._popper.style.transformOrigin = typeof this.transformOrigin === 'string' ? this.transformOrigin : ['top', 'bottom'].indexOf(placement) > -1 ? 'center ' + origin : origin + ' center';
-    },
-    appendArrow: function appendArrow(element) {
-      // Skip if already appended
-      if (this.appended) {
-        return;
+    // 检查点击是否在 popperElm 内部，即使它已经被添加到 document.body 中
+    if (context.popperElm) {
+      try {
+        if (context.popperElm.contains(mouseup.target) || context.popperElm.contains(mousedown.target)) {
+          return;
+        }
+      } catch (e) {
+        // 如果 popperElm 已经被销毁，忽略错误
       }
+    }
 
-      this.appended = true;
-
-      // Find Vue hash attribute
-      var hash = void 0;
-      for (var i = 0; i < element.attributes.length; i++) {
-        var attr = element.attributes[i];
-        if (/^_v-/.test(attr.name)) {
-          hash = attr.name;
-          break;
+    // 检查是否有其他相关的 popper 元素
+    if (context.popper) {
+      try {
+        if (context.popper.contains(mouseup.target) || context.popper.contains(mousedown.target)) {
+          return;
         }
+      } catch (e) {
+        // 如果 popper 已经被销毁，忽略错误
       }
+    }
 
-      // Create arrow element
-      var arrow = document.createElement('div');
-
-      // Copy Vue hash attribute if exists
-      if (hash) {
-        arrow.setAttribute(hash, '');
+    // 检查是否有其他相关的弹出元素（如 autocomplete 的建议列表）
+    if (context.suggestions && context.suggestions.length > 0) {
+      // 尝试找到建议列表的 DOM 元素
+      var suggestionsElm = document.querySelector('.es-autocomplete-suggestion');
+      if (suggestionsElm) {
+        try {
+          if (suggestionsElm.contains(mouseup.target) || suggestionsElm.contains(mousedown.target)) {
+            return;
+          }
+        } catch (e) {
+          // 如果元素已经被销毁，忽略错误
+        }
       }
-
-      // Set arrow attributes
-      arrow.setAttribute('x-arrow', '');
-      arrow.className = 'popper__arrow';
-
-      // Append to element
-      element.appendChild(arrow);
     }
-  },
-
-  beforeDestroy: function beforeDestroy() {
-    this.doDestroy(true);
 
-    // Clean up DOM elements and event listeners
-    if (this.popperElm && this.popperElm.parentNode === document.body) {
-      this.popperElm.removeEventListener('click', stopPropagation);
-      document.body.removeChild(this.popperElm);
+    if (binding.expression && el[ctx].methodName && context[el[ctx].methodName]) {
+      context[el[ctx].methodName]();
+    } else {
+      el[ctx].bindingFn && el[ctx].bindingFn();
     }
-  },
+  };
+}
 
+/**
+ * v-clickoutside
+ * @desc 点击元素外面才会触发的事件
+ * @example
+ * ```vue
+ * <div v-element-clickoutside="handleClose">
+ * ```
+ */
+/* harmony default export */ __webpack_exports__["a"] = ({
+  bind: function bind(el, binding, vnode) {
+    nodeList.push(el);
+    var id = seed++;
+    el[ctx] = {
+      id: id,
+      documentHandler: createDocumentHandler(el, binding, vnode),
+      methodName: binding.expression,
+      bindingFn: binding.value
+    };
+  },
+  update: function update(el, binding, vnode) {
+    el[ctx].documentHandler = createDocumentHandler(el, binding, vnode);
+    el[ctx].methodName = binding.expression;
+    el[ctx].bindingFn = binding.value;
+  },
+  unbind: function unbind(el) {
+    var len = nodeList.length;
 
-  // call destroy in keep-alive mode
-  deactivated: function deactivated() {
-    this.$options.beforeDestroy[0].call(this);
+    for (var i = 0; i < len; i++) {
+      if (nodeList[i][ctx].id === el[ctx].id) {
+        nodeList.splice(i, 1);
+        break;
+      }
+    }
+    delete el[ctx];
   }
 });
 
 /***/ }),
 
-/***/ 22:
+/***/ 23:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -598,14 +719,14 @@ var stopPropagation = function stopPropagation(e) {
 __webpack_require__.d(__webpack_exports__, "a", function() { return /* reexport */ popup_manager; });
 
 // EXTERNAL MODULE: external "vue"
-var external_vue_ = __webpack_require__(2);
+var external_vue_ = __webpack_require__(4);
 var external_vue_default = /*#__PURE__*/__webpack_require__.n(external_vue_);
 
 // EXTERNAL MODULE: ./src/utils/merge.js
-var merge = __webpack_require__(18);
+var merge = __webpack_require__(16);
 
 // EXTERNAL MODULE: ./src/utils/dom.js
-var utils_dom = __webpack_require__(4);
+var utils_dom = __webpack_require__(5);
 
 // CONCATENATED MODULE: ./src/utils/popup/popup-manager.js
 
@@ -814,7 +935,7 @@ if (!external_vue_default.a.prototype.$isServer) {
 
 /* harmony default export */ var popup_manager = (PopupManager);
 // EXTERNAL MODULE: ./src/utils/scrollbar.js
-var scrollbar = __webpack_require__(19);
+var scrollbar = __webpack_require__(15);
 
 // CONCATENATED MODULE: ./src/utils/popup/index.js
 
@@ -860,6 +981,10 @@ var scrollBarWidth = void 0;
     closeOnClickModal: {
       type: Boolean,
       default: false
+    },
+    lazy: {
+      type: Boolean,
+      default: true
     }
   },
 
@@ -889,7 +1014,7 @@ var scrollBarWidth = void 0;
       bodyPaddingRight: null,
       computedBodyPaddingRight: 0,
       withoutHiddenClass: true,
-      rendered: false
+      rendered: !this.lazy
     };
   },
 
@@ -1040,142 +1165,126 @@ var scrollBarWidth = void 0;
 
 /***/ }),
 
-/***/ 26:
+/***/ 28:
 /***/ (function(module, exports) {
 
-module.exports = require("eoss/lib/input");
+module.exports = require("eoss/lib/button");
 
 /***/ }),
 
-/***/ 27:
+/***/ 3:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
-/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(vue__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var eoss_src_utils_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
-
-
-
-var nodeList = [];
-var ctx = '@@clickoutsideContext';
-
-var startClick = void 0;
-var seed = 0;
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return normalizeComponent; });
+/* globals __VUE_SSR_CONTEXT__ */
 
-!vue__WEBPACK_IMPORTED_MODULE_0___default.a.prototype.$isServer && Object(eoss_src_utils_dom__WEBPACK_IMPORTED_MODULE_1__[/* on */ "g"])(document, 'mousedown', function (e) {
-  return startClick = e;
-});
+// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
+// This module is a runtime utility for cleaner component module output and will
+// be included in the final webpack user bundle.
 
-!vue__WEBPACK_IMPORTED_MODULE_0___default.a.prototype.$isServer && Object(eoss_src_utils_dom__WEBPACK_IMPORTED_MODULE_1__[/* on */ "g"])(document, 'mouseup', function (e) {
-  nodeList.forEach(function (node) {
-    return node[ctx].documentHandler(e, startClick);
-  });
-});
+function normalizeComponent(
+  scriptExports,
+  render,
+  staticRenderFns,
+  functionalTemplate,
+  injectStyles,
+  scopeId,
+  moduleIdentifier /* server only */,
+  shadowMode /* vue-cli only */
+) {
+  // Vue.extend constructor export interop
+  var options =
+    typeof scriptExports === 'function' ? scriptExports.options : scriptExports
 
-function createDocumentHandler(el, binding, vnode) {
-  return function () {
-    var mouseup = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var mousedown = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  // render functions
+  if (render) {
+    options.render = render
+    options.staticRenderFns = staticRenderFns
+    options._compiled = true
+  }
 
-    if (!vnode || !vnode.context || !mouseup.target || !mousedown.target || el.contains(mouseup.target) || el.contains(mousedown.target) || el === mouseup.target) {
-      return;
-    }
+  // functional template
+  if (functionalTemplate) {
+    options.functional = true
+  }
 
-    var context = vnode.context;
+  // scopedId
+  if (scopeId) {
+    options._scopeId = 'data-v-' + scopeId
+  }
 
-    // 检查点击是否在 popperElm 内部，即使它已经被添加到 document.body 中
-    if (context.popperElm) {
-      try {
-        if (context.popperElm.contains(mouseup.target) || context.popperElm.contains(mousedown.target)) {
-          return;
-        }
-      } catch (e) {
-        // 如果 popperElm 已经被销毁，忽略错误
+  var hook
+  if (moduleIdentifier) {
+    // server build
+    hook = function (context) {
+      // 2.3 injection
+      context =
+        context || // cached call
+        (this.$vnode && this.$vnode.ssrContext) || // stateful
+        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
+      // 2.2 with runInNewContext: true
+      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+        context = __VUE_SSR_CONTEXT__
       }
-    }
-
-    // 检查是否有其他相关的 popper 元素
-    if (context.popper) {
-      try {
-        if (context.popper.contains(mouseup.target) || context.popper.contains(mousedown.target)) {
-          return;
-        }
-      } catch (e) {
-        // 如果 popper 已经被销毁，忽略错误
+      // inject component styles
+      if (injectStyles) {
+        injectStyles.call(this, context)
       }
-    }
-
-    // 检查是否有其他相关的弹出元素（如 autocomplete 的建议列表）
-    if (context.suggestions && context.suggestions.length > 0) {
-      // 尝试找到建议列表的 DOM 元素
-      var suggestionsElm = document.querySelector('.es-autocomplete-suggestion');
-      if (suggestionsElm) {
-        try {
-          if (suggestionsElm.contains(mouseup.target) || suggestionsElm.contains(mousedown.target)) {
-            return;
-          }
-        } catch (e) {
-          // 如果元素已经被销毁，忽略错误
-        }
+      // register component module identifier for async chunk inferrence
+      if (context && context._registeredComponents) {
+        context._registeredComponents.add(moduleIdentifier)
       }
     }
+    // used by ssr in case component is cached and beforeCreate
+    // never gets called
+    options._ssrRegister = hook
+  } else if (injectStyles) {
+    hook = shadowMode
+      ? function () {
+          injectStyles.call(
+            this,
+            (options.functional ? this.parent : this).$root.$options.shadowRoot
+          )
+        }
+      : injectStyles
+  }
 
-    if (binding.expression && el[ctx].methodName && context[el[ctx].methodName]) {
-      context[el[ctx].methodName]();
+  if (hook) {
+    if (options.functional) {
+      // for template-only hot-reload because in that case the render fn doesn't
+      // go through the normalizer
+      options._injectStyles = hook
+      // register for functional component in vue file
+      var originalRender = options.render
+      options.render = function renderWithStyleInjection(h, context) {
+        hook.call(context)
+        return originalRender(h, context)
+      }
     } else {
-      el[ctx].bindingFn && el[ctx].bindingFn();
+      // inject component registration as beforeCreate hook
+      var existing = options.beforeCreate
+      options.beforeCreate = existing ? [].concat(existing, hook) : [hook]
     }
-  };
-}
-
-/**
- * v-clickoutside
- * @desc 点击元素外面才会触发的事件
- * @example
- * ```vue
- * <div v-element-clickoutside="handleClose">
- * ```
- */
-/* harmony default export */ __webpack_exports__["a"] = ({
-  bind: function bind(el, binding, vnode) {
-    nodeList.push(el);
-    var id = seed++;
-    el[ctx] = {
-      id: id,
-      documentHandler: createDocumentHandler(el, binding, vnode),
-      methodName: binding.expression,
-      bindingFn: binding.value
-    };
-  },
-  update: function update(el, binding, vnode) {
-    el[ctx].documentHandler = createDocumentHandler(el, binding, vnode);
-    el[ctx].methodName = binding.expression;
-    el[ctx].bindingFn = binding.value;
-  },
-  unbind: function unbind(el) {
-    var len = nodeList.length;
+  }
 
-    for (var i = 0; i < len; i++) {
-      if (nodeList[i][ctx].id === el[ctx].id) {
-        nodeList.splice(i, 1);
-        break;
-      }
-    }
-    delete el[ctx];
+  return {
+    exports: scriptExports,
+    options: options
   }
-});
+}
+
 
 /***/ }),
 
-/***/ 33:
+/***/ 4:
 /***/ (function(module, exports) {
 
-module.exports = require("eoss/lib/button");
+module.exports = require("vue");
 
 /***/ }),
 
-/***/ 37:
+/***/ 41:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;/**
@@ -2606,7 +2715,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;/**
 
 /***/ }),
 
-/***/ 4:
+/***/ 5:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -2622,7 +2731,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;/**
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return getScrollContainer; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "e", function() { return isInContainer; });
 /* unused harmony export insertAfter */
-/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
+/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4);
 /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(vue__WEBPACK_IMPORTED_MODULE_0__);
 var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
@@ -2865,112 +2974,7 @@ function insertAfter(newEl, targetEl) {
 
 /***/ }),
 
-/***/ 5:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return normalizeComponent; });
-/* globals __VUE_SSR_CONTEXT__ */
-
-// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
-// This module is a runtime utility for cleaner component module output and will
-// be included in the final webpack user bundle.
-
-function normalizeComponent(
-  scriptExports,
-  render,
-  staticRenderFns,
-  functionalTemplate,
-  injectStyles,
-  scopeId,
-  moduleIdentifier /* server only */,
-  shadowMode /* vue-cli only */
-) {
-  // Vue.extend constructor export interop
-  var options =
-    typeof scriptExports === 'function' ? scriptExports.options : scriptExports
-
-  // render functions
-  if (render) {
-    options.render = render
-    options.staticRenderFns = staticRenderFns
-    options._compiled = true
-  }
-
-  // functional template
-  if (functionalTemplate) {
-    options.functional = true
-  }
-
-  // scopedId
-  if (scopeId) {
-    options._scopeId = 'data-v-' + scopeId
-  }
-
-  var hook
-  if (moduleIdentifier) {
-    // server build
-    hook = function (context) {
-      // 2.3 injection
-      context =
-        context || // cached call
-        (this.$vnode && this.$vnode.ssrContext) || // stateful
-        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
-      // 2.2 with runInNewContext: true
-      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
-        context = __VUE_SSR_CONTEXT__
-      }
-      // inject component styles
-      if (injectStyles) {
-        injectStyles.call(this, context)
-      }
-      // register component module identifier for async chunk inferrence
-      if (context && context._registeredComponents) {
-        context._registeredComponents.add(moduleIdentifier)
-      }
-    }
-    // used by ssr in case component is cached and beforeCreate
-    // never gets called
-    options._ssrRegister = hook
-  } else if (injectStyles) {
-    hook = shadowMode
-      ? function () {
-          injectStyles.call(
-            this,
-            (options.functional ? this.parent : this).$root.$options.shadowRoot
-          )
-        }
-      : injectStyles
-  }
-
-  if (hook) {
-    if (options.functional) {
-      // for template-only hot-reload because in that case the render fn doesn't
-      // go through the normalizer
-      options._injectStyles = hook
-      // register for functional component in vue file
-      var originalRender = options.render
-      options.render = function renderWithStyleInjection(h, context) {
-        hook.call(context)
-        return originalRender(h, context)
-      }
-    } else {
-      // inject component registration as beforeCreate hook
-      var existing = options.beforeCreate
-      options.beforeCreate = existing ? [].concat(existing, hook) : [hook]
-    }
-  }
-
-  return {
-    exports: scriptExports,
-    options: options
-  }
-}
-
-
-/***/ }),
-
-/***/ 68:
+/***/ 61:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -3590,7 +3594,7 @@ sv_panelvue_type_template_id_182a6e5d_render._withStripped = true
 // CONCATENATED MODULE: ./packages/color-picker/src/components/sv-panel.vue?vue&type=template&id=182a6e5d&
 
 // EXTERNAL MODULE: external "vue"
-var external_vue_ = __webpack_require__(2);
+var external_vue_ = __webpack_require__(4);
 var external_vue_default = /*#__PURE__*/__webpack_require__.n(external_vue_);
 
 // CONCATENATED MODULE: ./packages/color-picker/src/draggable.js
@@ -3743,7 +3747,7 @@ var isDragging = false;
 // CONCATENATED MODULE: ./packages/color-picker/src/components/sv-panel.vue?vue&type=script&lang=js&
  /* harmony default export */ var components_sv_panelvue_type_script_lang_js_ = (sv_panelvue_type_script_lang_js_); 
 // EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
-var componentNormalizer = __webpack_require__(5);
+var componentNormalizer = __webpack_require__(3);
 
 // CONCATENATED MODULE: ./packages/color-picker/src/components/sv-panel.vue
 
@@ -4265,14 +4269,14 @@ var predefine_component = Object(componentNormalizer["a" /* default */])(
 
 /* harmony default export */ var predefine = (predefine_component.exports);
 // EXTERNAL MODULE: ./src/utils/vue-popper.js
-var vue_popper = __webpack_require__(20);
+var vue_popper = __webpack_require__(12);
 
 // EXTERNAL MODULE: external "eoss/lib/input"
-var input_ = __webpack_require__(26);
+var input_ = __webpack_require__(17);
 var input_default = /*#__PURE__*/__webpack_require__.n(input_);
 
 // EXTERNAL MODULE: external "eoss/lib/button"
-var button_ = __webpack_require__(33);
+var button_ = __webpack_require__(28);
 var button_default = /*#__PURE__*/__webpack_require__.n(button_);
 
 // CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/color-picker/src/components/picker-dropdown.vue?vue&type=script&lang=js&
@@ -4436,7 +4440,7 @@ var picker_dropdown_component = Object(componentNormalizer["a" /* default */])(
 
 /* harmony default export */ var picker_dropdown = (picker_dropdown_component.exports);
 // EXTERNAL MODULE: ./src/utils/clickoutside.js
-var clickoutside = __webpack_require__(27);
+var clickoutside = __webpack_require__(18);
 
 // EXTERNAL MODULE: ./src/mixins/emitter.js
 var emitter = __webpack_require__(10);