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

package/lib/submenu.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 147);
+/******/ 	return __webpack_require__(__webpack_require__.s = 149);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -127,208 +127,17 @@ function _broadcast(componentName, eventName, params) {
 
 /***/ }),
 
-/***/ 147:
+/***/ 12:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _menu_src_submenu__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(85);
-
-
-/* istanbul ignore next */
-_menu_src_submenu__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"].install = function (Vue) {
-  Vue.component(_menu_src_submenu__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"].name, _menu_src_submenu__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"]);
-};
-
-/* harmony default export */ __webpack_exports__["default"] = (_menu_src_submenu__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"]);
-
-/***/ }),
-
-/***/ 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;
-        }
-      }
-    }
-  }
-
-  return target;
-});;
-
-/***/ }),
-
-/***/ 19:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return getScrollbarWidth; });
-/* 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__);
+/* harmony import */ var eoss_src_utils_popup__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(23);
 
 
-/**
- * 缓存变量，用于存储计算过的滚动条宽度
- */
-var scrollBarWidth = void 0;
-
-/**
- * 计算并返回浏览器滚动条的宽度
- * @returns {number} 滚动条宽度（像素）
- */
-var getScrollbarWidth = function getScrollbarWidth() {
-  // 服务器端渲染时返回0
-  if (vue__WEBPACK_IMPORTED_MODULE_0___default.a.prototype.$isServer) return 0;
-  // 如果已经计算过，直接返回缓存值
-  if (scrollBarWidth !== undefined) return scrollBarWidth;
-
-  // 创建测试元素
-  var outer = document.createElement('div');
-  outer.className = 'es-scrollbar__wrap';
-  outer.style.visibility = 'hidden';
-  outer.style.width = '100px';
-  outer.style.position = 'absolute';
-  outer.style.top = '-9999px';
-  document.body.appendChild(outer);
-
-  // 计算无滚动条时的宽度
-  var widthNoScroll = outer.offsetWidth;
-  outer.style.overflow = 'scroll';
-
-  // 创建内部元素并计算有滚动条时的宽度
-  var inner = document.createElement('div');
-  inner.style.width = '100%';
-  outer.appendChild(inner);
-
-  var widthWithScroll = inner.offsetWidth;
-  // 清理DOM
-  outer.parentNode.removeChild(outer);
-  // 计算滚动条宽度
-  scrollBarWidth = widthNoScroll - widthWithScroll;
-
-  return scrollBarWidth;
-};
-
-/**
- * 将指定元素滚动到容器视图中
- * @param {HTMLElement} container - 容器元素
- * @param {HTMLElement} selected - 要滚动到视图中的元素
- * @example
- * // 用法示例
- * const container = document.querySelector('.container');
- * const element = document.querySelector('.target-element');
- * scrollIntoView(container, element);
- */
-function scrollIntoView(container, selected) {
-  // 服务器端渲染时不执行
-  if (vue__WEBPACK_IMPORTED_MODULE_0___default.a.prototype.$isServer) return;
-
-  // 如果没有指定元素，滚动到顶部
-  if (!selected) {
-    container.scrollTop = 0;
-    return;
-  }
-
-  // 收集所有偏移父元素
-  var offsetParents = [];
-  var pointer = selected.offsetParent;
-  while (pointer && container !== pointer && container.contains(pointer)) {
-    offsetParents.push(pointer);
-    pointer = pointer.offsetParent;
-  }
-
-  // 计算元素相对于容器的顶部偏移量
-  var top = selected.offsetTop + offsetParents.reduce(function (prev, curr) {
-    return prev + curr.offsetTop;
-  }, 0);
-  var bottom = top + selected.offsetHeight;
-  var viewRectTop = container.scrollTop;
-  var viewRectBottom = viewRectTop + container.clientHeight;
-
-  // 调整滚动位置使元素可见
-  if (top < viewRectTop) {
-    container.scrollTop = top;
-  } else if (bottom > viewRectBottom) {
-    container.scrollTop = bottom - container.clientHeight;
-  }
-}
-
-// 获取滚动条大小
-function getScrollSize(wrap) {
-  if (!wrap) {
-    return { width: '', height: '' };
-  };
-  var heightPercentage = 0;
-  var widthPercentage = 0;
-
-  // 修复滚动条尺寸计算逻辑
-  var scrollHeight = wrap.scrollHeight;
-  var scrollWidth = wrap.scrollWidth;
-  var clientHeight = wrap.clientHeight;
-  var clientWidth = wrap.clientWidth;
-  var sizes = {
-    width: '',
-    height: ''
-  };
-  // 只有当内容高度超过容器高度时才显示垂直滚动条
-  if (scrollHeight > clientHeight) {
-    heightPercentage = clientHeight * 100 / scrollHeight;
-    sizes.height = heightPercentage < 100 ? heightPercentage + '%' : '100%';
-  } else {
-    sizes.height = '';
-  }
-
-  // 只有当内容宽度超过容器宽度时才显示水平滚动条
-  if (scrollWidth > clientWidth) {
-    widthPercentage = clientWidth * 100 / scrollWidth;
-    sizes.width = widthPercentage < 100 ? widthPercentage + '%' : '100%';
-  } else {
-    sizes.width = '';
-  }
-  return sizes;
-}
-
-// 滚动条移动
-function scrollMove(wrap) {
-  if (!wrap) return;
 
-  // 立即更新滚动条位置，不使用阈值判断
-  var y = wrap.scrollTop * 100 / wrap.clientHeight;
-  var x = wrap.scrollLeft * 100 / wrap.clientWidth;
-  return { y: y, x: x };
-}
-
-/***/ }),
-
-/***/ 2:
-/***/ (function(module, exports) {
-
-module.exports = require("vue");
-
-/***/ }),
-
-/***/ 20:
-/***/ (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 PopperJS = vue__WEBPACK_IMPORTED_MODULE_0___default.a.prototype.$isServer ? function () {} : __webpack_require__(41);
 var stopPropagation = function stopPropagation(e) {
   return e.stopPropagation();
 };
@@ -553,43 +362,227 @@ var stopPropagation = function stopPropagation(e) {
         }
       }
 
-      // Create arrow element
-      var arrow = document.createElement('div');
+      // 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);
+  }
+});
+
+/***/ }),
+
+/***/ 149:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _menu_src_submenu__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(91);
+
+
+/* istanbul ignore next */
+_menu_src_submenu__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"].install = function (Vue) {
+  Vue.component(_menu_src_submenu__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"].name, _menu_src_submenu__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"]);
+};
+
+/* harmony default export */ __webpack_exports__["default"] = (_menu_src_submenu__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"]);
+
+/***/ }),
+
+/***/ 15:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return getScrollbarWidth; });
+/* 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__(4);
+/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(vue__WEBPACK_IMPORTED_MODULE_0__);
+
+
+/**
+ * 缓存变量，用于存储计算过的滚动条宽度
+ */
+var scrollBarWidth = void 0;
+
+/**
+ * 计算并返回浏览器滚动条的宽度
+ * @returns {number} 滚动条宽度（像素）
+ */
+var getScrollbarWidth = function getScrollbarWidth() {
+  // 服务器端渲染时返回0
+  if (vue__WEBPACK_IMPORTED_MODULE_0___default.a.prototype.$isServer) return 0;
+  // 如果已经计算过，直接返回缓存值
+  if (scrollBarWidth !== undefined) return scrollBarWidth;
+
+  // 创建测试元素
+  var outer = document.createElement('div');
+  outer.className = 'es-scrollbar__wrap';
+  outer.style.visibility = 'hidden';
+  outer.style.width = '100px';
+  outer.style.position = 'absolute';
+  outer.style.top = '-9999px';
+  document.body.appendChild(outer);
+
+  // 计算无滚动条时的宽度
+  var widthNoScroll = outer.offsetWidth;
+  outer.style.overflow = 'scroll';
+
+  // 创建内部元素并计算有滚动条时的宽度
+  var inner = document.createElement('div');
+  inner.style.width = '100%';
+  outer.appendChild(inner);
+
+  var widthWithScroll = inner.offsetWidth;
+  // 清理DOM
+  outer.parentNode.removeChild(outer);
+  // 计算滚动条宽度
+  scrollBarWidth = widthNoScroll - widthWithScroll;
+
+  return scrollBarWidth;
+};
+
+/**
+ * 将指定元素滚动到容器视图中
+ * @param {HTMLElement} container - 容器元素
+ * @param {HTMLElement} selected - 要滚动到视图中的元素
+ * @example
+ * // 用法示例
+ * const container = document.querySelector('.container');
+ * const element = document.querySelector('.target-element');
+ * scrollIntoView(container, element);
+ */
+function scrollIntoView(container, selected) {
+  // 服务器端渲染时不执行
+  if (vue__WEBPACK_IMPORTED_MODULE_0___default.a.prototype.$isServer) return;
+
+  // 如果没有指定元素，滚动到顶部
+  if (!selected) {
+    container.scrollTop = 0;
+    return;
+  }
+
+  // 收集所有偏移父元素
+  var offsetParents = [];
+  var pointer = selected.offsetParent;
+  while (pointer && container !== pointer && container.contains(pointer)) {
+    offsetParents.push(pointer);
+    pointer = pointer.offsetParent;
+  }
+
+  // 计算元素相对于容器的顶部偏移量
+  var top = selected.offsetTop + offsetParents.reduce(function (prev, curr) {
+    return prev + curr.offsetTop;
+  }, 0);
+  var bottom = top + selected.offsetHeight;
+  var viewRectTop = container.scrollTop;
+  var viewRectBottom = viewRectTop + container.clientHeight;
+
+  // 调整滚动位置使元素可见
+  if (top < viewRectTop) {
+    container.scrollTop = top;
+  } else if (bottom > viewRectBottom) {
+    container.scrollTop = bottom - container.clientHeight;
+  }
+}
+
+// 获取滚动条大小
+function getScrollSize(wrap) {
+  if (!wrap) {
+    return { width: '', height: '' };
+  };
+  var heightPercentage = 0;
+  var widthPercentage = 0;
 
-      // Copy Vue hash attribute if exists
-      if (hash) {
-        arrow.setAttribute(hash, '');
-      }
+  // 修复滚动条尺寸计算逻辑
+  var scrollHeight = wrap.scrollHeight;
+  var scrollWidth = wrap.scrollWidth;
+  var clientHeight = wrap.clientHeight;
+  var clientWidth = wrap.clientWidth;
+  var sizes = {
+    width: '',
+    height: ''
+  };
+  // 只有当内容高度超过容器高度时才显示垂直滚动条
+  if (scrollHeight > clientHeight) {
+    heightPercentage = clientHeight * 100 / scrollHeight;
+    sizes.height = heightPercentage < 100 ? heightPercentage + '%' : '100%';
+  } else {
+    sizes.height = '';
+  }
 
-      // Set arrow attributes
-      arrow.setAttribute('x-arrow', '');
-      arrow.className = 'popper__arrow';
+  // 只有当内容宽度超过容器宽度时才显示水平滚动条
+  if (scrollWidth > clientWidth) {
+    widthPercentage = clientWidth * 100 / scrollWidth;
+    sizes.width = widthPercentage < 100 ? widthPercentage + '%' : '100%';
+  } else {
+    sizes.width = '';
+  }
+  return sizes;
+}
 
-      // Append to element
-      element.appendChild(arrow);
-    }
-  },
+// 滚动条移动
+function scrollMove(wrap) {
+  if (!wrap) return;
 
-  beforeDestroy: function beforeDestroy() {
-    this.doDestroy(true);
+  // 立即更新滚动条位置，不使用阈值判断
+  var y = wrap.scrollTop * 100 / wrap.clientHeight;
+  var x = wrap.scrollLeft * 100 / wrap.clientWidth;
+  return { y: y, x: x };
+}
 
-    // 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);
-    }
-  },
+/***/ }),
 
+/***/ 16:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-  // call destroy in keep-alive mode
-  deactivated: function deactivated() {
-    this.$options.beforeDestroy[0].call(this);
+"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;
+        }
+      }
+    }
   }
-});
+
+  return target;
+});;
 
 /***/ }),
 
-/***/ 22:
+/***/ 23:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -598,14 +591,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 +807,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 +853,10 @@ var scrollBarWidth = void 0;
     closeOnClickModal: {
       type: Boolean,
       default: false
+    },
+    lazy: {
+      type: Boolean,
+      default: true
     }
   },
 
@@ -889,7 +886,7 @@ var scrollBarWidth = void 0;
       bodyPaddingRight: null,
       computedBodyPaddingRight: 0,
       withoutHiddenClass: true,
-      rendered: false
+      rendered: !this.lazy
     };
   },
 
@@ -1040,14 +1037,126 @@ var scrollBarWidth = void 0;
 
 /***/ }),
 
-/***/ 36:
+/***/ 3:
+/***/ (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
+  }
+}
+
+
+/***/ }),
+
+/***/ 37:
 /***/ (function(module, exports) {
 
 module.exports = require("eoss/lib/tooltip");
 
 /***/ }),
 
-/***/ 37:
+/***/ 4:
+/***/ (function(module, exports) {
+
+module.exports = require("vue");
+
+/***/ }),
+
+/***/ 41:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;/**
@@ -2478,7 +2587,109 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;/**
 
 /***/ }),
 
-/***/ 4:
+/***/ 49:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var eoss_src_utils_dom__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+
+
+var Transition = function () {
+  function Transition() {
+    _classCallCheck(this, Transition);
+  }
+
+  Transition.prototype.beforeEnter = function beforeEnter(el) {
+    Object(eoss_src_utils_dom__WEBPACK_IMPORTED_MODULE_0__[/* addClass */ "a"])(el, 'collapse-transition');
+    if (!el.dataset) el.dataset = {};
+    if (el.dataset.state === 6 || !el.dataset.state) {
+      el.dataset.oldPaddingTop = el.style.paddingTop;
+      el.dataset.oldPaddingBottom = el.style.paddingBottom;
+    }
+    el.dataset.state = 1;
+
+    el.style.height = '0';
+    el.style.paddingTop = 0;
+    el.style.paddingBottom = 0;
+  };
+
+  Transition.prototype.enter = function enter(el) {
+    el.dataset.oldOverflow = el.style.overflow;
+    if (el.scrollHeight !== 0) {
+      el.style.height = el.scrollHeight + 'px';
+      el.style.paddingTop = el.dataset.oldPaddingTop;
+      el.style.paddingBottom = el.dataset.oldPaddingBottom;
+    } else {
+      el.style.height = '';
+      el.style.paddingTop = el.dataset.oldPaddingTop;
+      el.style.paddingBottom = el.dataset.oldPaddingBottom;
+    }
+
+    el.dataset.state = 2;
+    el.style.overflow = 'hidden';
+  };
+
+  Transition.prototype.afterEnter = function afterEnter(el) {
+    // for safari: remove class then reset height is necessary
+    Object(eoss_src_utils_dom__WEBPACK_IMPORTED_MODULE_0__[/* removeClass */ "i"])(el, 'collapse-transition');
+    el.style.height = '';
+    el.style.overflow = el.dataset.oldOverflow;
+    el.dataset.state = 3;
+  };
+
+  Transition.prototype.beforeLeave = function beforeLeave(el) {
+    if (!el.dataset) el.dataset = {};
+    el.dataset.oldPaddingTop = el.style.paddingTop;
+    el.dataset.oldPaddingBottom = el.style.paddingBottom;
+    el.dataset.oldOverflow = el.style.overflow;
+    el.dataset.state = 4;
+
+    el.style.height = el.scrollHeight + 'px';
+    el.style.overflow = 'hidden';
+  };
+
+  Transition.prototype.leave = function leave(el) {
+    if (el.scrollHeight !== 0) {
+      // for safari: add class after set height, or it will jump to zero height suddenly, weired
+      Object(eoss_src_utils_dom__WEBPACK_IMPORTED_MODULE_0__[/* addClass */ "a"])(el, 'collapse-transition');
+      el.style.height = 0;
+      el.style.paddingTop = 0;
+      el.style.paddingBottom = 0;
+      el.dataset.state = 5;
+    }
+  };
+
+  Transition.prototype.afterLeave = function afterLeave(el) {
+    Object(eoss_src_utils_dom__WEBPACK_IMPORTED_MODULE_0__[/* removeClass */ "i"])(el, 'collapse-transition');
+    el.style.height = '';
+    el.style.overflow = el.dataset.oldOverflow;
+    el.style.paddingTop = el.dataset.oldPaddingTop;
+    el.style.paddingBottom = el.dataset.oldPaddingBottom;
+    el.dataset.state = 6;
+  };
+
+  return Transition;
+}();
+
+/* harmony default export */ __webpack_exports__["a"] = ({
+  name: 'EsCollapseTransition',
+  functional: true,
+  render: function render(h, _ref) {
+    var children = _ref.children;
+
+    var data = {
+      on: new Transition()
+    };
+
+    return h('transition', data, children);
+  }
+});
+
+/***/ }),
+
+/***/ 5:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -2494,7 +2705,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; };
 
@@ -2737,7 +2948,7 @@ function insertAfter(newEl, targetEl) {
 
 /***/ }),
 
-/***/ 42:
+/***/ 57:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -2875,10 +3086,10 @@ render._withStripped = true
 // CONCATENATED MODULE: ./packages/menu/src/menu-item.vue?vue&type=template&id=133351e8&
 
 // EXTERNAL MODULE: ./packages/menu/src/menu-mixin.js
-var menu_mixin = __webpack_require__(47);
+var menu_mixin = __webpack_require__(76);
 
 // EXTERNAL MODULE: external "eoss/lib/tooltip"
-var tooltip_ = __webpack_require__(36);
+var tooltip_ = __webpack_require__(37);
 var tooltip_default = /*#__PURE__*/__webpack_require__.n(tooltip_);
 
 // EXTERNAL MODULE: ./src/mixins/emitter.js
@@ -3070,7 +3281,7 @@ var emitter = __webpack_require__(10);
 // CONCATENATED MODULE: ./packages/menu/src/menu-item.vue?vue&type=script&lang=js&
  /* harmony default export */ var src_menu_itemvue_type_script_lang_js_ = (menu_itemvue_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/menu/src/menu-item.vue
 
@@ -3095,109 +3306,7 @@ var component = Object(componentNormalizer["a" /* default */])(
 
 /***/ }),
 
-/***/ 46:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var eoss_src_utils_dom__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4);
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-
-
-var Transition = function () {
-  function Transition() {
-    _classCallCheck(this, Transition);
-  }
-
-  Transition.prototype.beforeEnter = function beforeEnter(el) {
-    Object(eoss_src_utils_dom__WEBPACK_IMPORTED_MODULE_0__[/* addClass */ "a"])(el, 'collapse-transition');
-    if (!el.dataset) el.dataset = {};
-    if (el.dataset.state === 6 || !el.dataset.state) {
-      el.dataset.oldPaddingTop = el.style.paddingTop;
-      el.dataset.oldPaddingBottom = el.style.paddingBottom;
-    }
-    el.dataset.state = 1;
-
-    el.style.height = '0';
-    el.style.paddingTop = 0;
-    el.style.paddingBottom = 0;
-  };
-
-  Transition.prototype.enter = function enter(el) {
-    el.dataset.oldOverflow = el.style.overflow;
-    if (el.scrollHeight !== 0) {
-      el.style.height = el.scrollHeight + 'px';
-      el.style.paddingTop = el.dataset.oldPaddingTop;
-      el.style.paddingBottom = el.dataset.oldPaddingBottom;
-    } else {
-      el.style.height = '';
-      el.style.paddingTop = el.dataset.oldPaddingTop;
-      el.style.paddingBottom = el.dataset.oldPaddingBottom;
-    }
-
-    el.dataset.state = 2;
-    el.style.overflow = 'hidden';
-  };
-
-  Transition.prototype.afterEnter = function afterEnter(el) {
-    // for safari: remove class then reset height is necessary
-    Object(eoss_src_utils_dom__WEBPACK_IMPORTED_MODULE_0__[/* removeClass */ "i"])(el, 'collapse-transition');
-    el.style.height = '';
-    el.style.overflow = el.dataset.oldOverflow;
-    el.dataset.state = 3;
-  };
-
-  Transition.prototype.beforeLeave = function beforeLeave(el) {
-    if (!el.dataset) el.dataset = {};
-    el.dataset.oldPaddingTop = el.style.paddingTop;
-    el.dataset.oldPaddingBottom = el.style.paddingBottom;
-    el.dataset.oldOverflow = el.style.overflow;
-    el.dataset.state = 4;
-
-    el.style.height = el.scrollHeight + 'px';
-    el.style.overflow = 'hidden';
-  };
-
-  Transition.prototype.leave = function leave(el) {
-    if (el.scrollHeight !== 0) {
-      // for safari: add class after set height, or it will jump to zero height suddenly, weired
-      Object(eoss_src_utils_dom__WEBPACK_IMPORTED_MODULE_0__[/* addClass */ "a"])(el, 'collapse-transition');
-      el.style.height = 0;
-      el.style.paddingTop = 0;
-      el.style.paddingBottom = 0;
-      el.dataset.state = 5;
-    }
-  };
-
-  Transition.prototype.afterLeave = function afterLeave(el) {
-    Object(eoss_src_utils_dom__WEBPACK_IMPORTED_MODULE_0__[/* removeClass */ "i"])(el, 'collapse-transition');
-    el.style.height = '';
-    el.style.overflow = el.dataset.oldOverflow;
-    el.style.paddingTop = el.dataset.oldPaddingTop;
-    el.style.paddingBottom = el.dataset.oldPaddingBottom;
-    el.dataset.state = 6;
-  };
-
-  return Transition;
-}();
-
-/* harmony default export */ __webpack_exports__["a"] = ({
-  name: 'EsCollapseTransition',
-  functional: true,
-  render: function render(h, _ref) {
-    var children = _ref.children;
-
-    var data = {
-      on: new Transition()
-    };
-
-    return h('transition', data, children);
-  }
-});
-
-/***/ }),
-
-/***/ 47:
+/***/ 76:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -3246,7 +3355,7 @@ var Transition = function () {
 
 /***/ }),
 
-/***/ 49:
+/***/ 80:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -3406,112 +3515,7 @@ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in ob
 
 /***/ }),
 
-/***/ 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
-  }
-}
-
-
-/***/ }),
-
-/***/ 56:
+/***/ 82:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -3575,10 +3579,10 @@ render._withStripped = true
 // CONCATENATED MODULE: ./packages/menu/src/menu-item-group.vue?vue&type=template&id=6d5d18cf&
 
 // EXTERNAL MODULE: ./packages/menu/src/mixins.js
-var mixins = __webpack_require__(49);
+var mixins = __webpack_require__(80);
 
 // EXTERNAL MODULE: ./packages/menu/src/menu-item.vue + 4 modules
-var menu_item = __webpack_require__(42);
+var menu_item = __webpack_require__(57);
 
 // CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/menu/src/menu-item-group.vue?vue&type=script&lang=js&
 //
@@ -3668,7 +3672,7 @@ var menu_item = __webpack_require__(42);
 // CONCATENATED MODULE: ./packages/menu/src/menu-item-group.vue?vue&type=script&lang=js&
  /* harmony default export */ var src_menu_item_groupvue_type_script_lang_js_ = (menu_item_groupvue_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/menu/src/menu-item-group.vue
 
@@ -3693,7 +3697,7 @@ var component = Object(componentNormalizer["a" /* default */])(
 
 /***/ }),
 
-/***/ 85:
+/***/ 91:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -4008,28 +4012,28 @@ render._withStripped = true
 // CONCATENATED MODULE: ./packages/menu/src/submenu.vue?vue&type=template&id=744ca69a&
 
 // EXTERNAL MODULE: ./src/utils/scrollbar.js
-var scrollbar = __webpack_require__(19);
+var scrollbar = __webpack_require__(15);
 
 // EXTERNAL MODULE: ./packages/menu/src/mixins.js
-var mixins = __webpack_require__(49);
+var mixins = __webpack_require__(80);
 
 // EXTERNAL MODULE: ./packages/menu/src/menu-mixin.js
-var menu_mixin = __webpack_require__(47);
+var menu_mixin = __webpack_require__(76);
 
 // EXTERNAL MODULE: ./src/mixins/emitter.js
 var emitter = __webpack_require__(10);
 
 // EXTERNAL MODULE: ./src/utils/vue-popper.js
-var vue_popper = __webpack_require__(20);
+var vue_popper = __webpack_require__(12);
 
 // EXTERNAL MODULE: ./packages/menu/src/menu-item.vue + 4 modules
-var menu_item = __webpack_require__(42);
+var menu_item = __webpack_require__(57);
 
 // EXTERNAL MODULE: ./packages/menu/src/menu-item-group.vue + 4 modules
-var menu_item_group = __webpack_require__(56);
+var menu_item_group = __webpack_require__(82);
 
 // EXTERNAL MODULE: ./src/transitions/collapse-transition.js
-var collapse_transition = __webpack_require__(46);
+var collapse_transition = __webpack_require__(49);
 
 // CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/menu/src/submenu.vue?vue&type=script&lang=js&
 //
@@ -4614,7 +4618,7 @@ var poperMixins = {
 // CONCATENATED MODULE: ./packages/menu/src/submenu.vue?vue&type=script&lang=js&
  /* harmony default export */ var src_submenuvue_type_script_lang_js_ = (submenuvue_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/menu/src/submenu.vue