@varlet/ui 1.27.20 → 2.0.0-alpha.1663499244572

package/lib/loading/loading.css

@@ -1 +1 @@
-:root { --loading-opacity: 0.38; --loading-desc-margin: 8px 0 0;}.var-loading { position: relative;}.var-loading__content { position: relative; transition: opacity 0.3s; opacity: 1;}.var-loading__content--active { opacity: var(--loading-opacity);}.var-loading__content-mask { position: absolute; left: 0; right: 0; top: 0; bottom: 0;}.var-loading__body { display: flex; justify-content: center; align-items: center; height: 100%; flex-direction: column;}.var-loading__inside { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;}.var-loading__description { color: currentColor; margin: var(--loading-desc-margin);}.var-loading__description--large { font-size: 16px;}.var-loading__description--normal { font-size: 14px;}.var-loading__description--small { font-size: 12px;}.var-loading__description--mini { font-size: 10px;}.var-loading__circle { display: flex;}.var-loading__circle-block { display: inline-block; animation: circle 1.8s linear infinite;}.var-loading__circle-block--large { width: 36px; height: 36px;}.var-loading__circle-block--normal { width: 30px; height: 30px;}.var-loading__circle-block--small { width: 24px; height: 24px;}.var-loading__circle-block--mini { width: 18px; height: 18px;}.var-loading__circle-block svg { display: block; width: 100%; height: 100%;}.var-loading__circle-block svg circle { animation: circular 1.5s ease-in-out infinite; stroke: currentColor; stroke-width: 3; stroke-linecap: round;}@keyframes circle { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}@keyframes circular { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -40; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -120; }}.var-loading__wave { display: flex; align-items: center; justify-content: center;}.var-loading__wave--large { width: 64px; height: 18px;}.var-loading__wave--normal { width: 50px; height: 16px;}.var-loading__wave--small { width: 36px; height: 14px;}.var-loading__wave--mini { width: 22px; height: 12px;}.var-loading__wave-item { height: 100%; display: inline-block; animation: 1.2s ease-in-out infinite wave;}.var-loading__wave-item:nth-child(1) { animation-delay: -1.2s; margin-left: 0;}.var-loading__wave-item:nth-child(2) { animation-delay: -1.1s;}.var-loading__wave-item:nth-child(3) { animation-delay: -1s;}.var-loading__wave-item:nth-child(4) { animation-delay: -0.9s;}.var-loading__wave-item:nth-child(5) { animation-delay: -0.8s;}.var-loading__wave-item--large { width: 5px; margin-left: 5px;}.var-loading__wave-item--normal { width: 4px; margin-left: 4px;}.var-loading__wave-item--small { width: 3px; margin-left: 3px;}.var-loading__wave-item--mini { width: 2px; margin-left: 2px;}@keyframes wave { 0%, 40%, 100% { transform: scaleY(0.4); } 20% { transform: scaleY(1); }}.var-loading__cube { display: flex; align-items: center;}.var-loading__cube--large { width: 64px; height: 18px;}.var-loading__cube--normal { width: 50px; height: 16px;}.var-loading__cube--small { width: 36px; height: 14px;}.var-loading__cube--mini { width: 22px; height: 12px;}.var-loading__cube-item { display: inline-block; transform-origin: right bottom; animation: 1.5s ease infinite cube;}.var-loading__cube-item:nth-child(1) { animation-delay: 0.2s; margin-left: 0;}.var-loading__cube-item:nth-child(2) { animation-delay: 0.4s;}.var-loading__cube-item:nth-child(3) { animation-delay: 0.6s;}.var-loading__cube-item:nth-child(4) { animation-delay: 0.8s;}.var-loading__cube-item--large { height: 10px; width: 10px; margin-left: 5px;}.var-loading__cube-item--normal { height: 8px; width: 8px; margin-left: 4px;}.var-loading__cube-item--small { height: 6px; width: 6px; margin-left: 3px;}.var-loading__cube-item--mini { height: 4px; width: 4px; margin-left: 2px;}@keyframes cube { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: rotate(90deg) scale(0.3); }}.var-loading__rect { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;}.var-loading__rect--large { width: 64px; height: 18px;}.var-loading__rect--normal { width: 50px; height: 16px;}.var-loading__rect--small { width: 36px; height: 14px;}.var-loading__rect--mini { width: 22px; height: 12px;}.var-loading__rect-item { animation: 2s ease-in-out infinite rect;}.var-loading__rect-item:nth-child(1) { animation-delay: 1.75s;}.var-loading__rect-item:nth-child(2) { animation-delay: 1.5s;}.var-loading__rect-item:nth-child(3) { animation-delay: 1.25s;}.var-loading__rect-item:nth-child(4) { animation-delay: 1s;}.var-loading__rect-item:nth-child(5) { animation-delay: 0.75s;}.var-loading__rect-item:nth-child(6) { animation-delay: 0.5s;}.var-loading__rect-item:nth-child(7) { animation-delay: 0.25s;}.var-loading__rect-item:nth-child(8) { animation-delay: 0s;}.var-loading__rect-item--large { height: 100%; width: 8px;}.var-loading__rect-item--normal { height: 90%; width: 6.4px;}.var-loading__rect-item--small { height: 80%; width: 4.8px;}.var-loading__rect-item--mini { height: 70%; width: 3.2px;}@keyframes rect { 0% { opacity: 0.3; } 25% { opacity: 1; } 50% { opacity: 0.3; } 65% { opacity: 1; } 100% { opacity: 0.3; }}.var-loading__disappear { display: flex; justify-content: space-around; align-items: center; flex-flow: nowrap;}.var-loading__disappear--large { width: 64px; height: 18px;}.var-loading__disappear--normal { width: 50px; height: 16px;}.var-loading__disappear--small { width: 36px; height: 14px;}.var-loading__disappear--mini { width: 22px; height: 12px;}.var-loading__disappear-item { border-radius: 50%; animation: 0.5s ease-in-out infinite alternate disappear;}.var-loading__disappear-item:nth-child(1) { animation-delay: -0.4s;}.var-loading__disappear-item:nth-child(2) { animation-delay: -0.2s;}.var-loading__disappear-item:nth-child(3) { animation-delay: 0s;}.var-loading__disappear-item--large { height: 15px; width: 15px;}.var-loading__disappear-item--normal { height: 12px; width: 12px;}.var-loading__disappear-item--small { height: 9px; width: 9px;}.var-loading__disappear-item--mini { height: 6px; width: 6px;}@keyframes disappear { 0% { opacity: 1; } 100% { opacity: 0; }}
+:root { --loading-opacity: 0.38; --loading-desc-margin: 8px 0 0;}.var-loading { --loading-normal-width: 50px; --loading-normal-height: calc(var(--font-size-md) + 2px); --loading-large-width: 64px; --loading-large-height: calc(var(--font-size-lg) + 2px); --loading-small-width: 36px; --loading-small-height: calc(var(--font-size-sm) + 2px); --loading-mini-width: 22px; --loading-mini-height: calc(var(--font-size-xs) + 2px); position: relative;}.var-loading__content { position: relative; transition: opacity 0.3s; opacity: 1;}.var-loading__content--active { opacity: var(--loading-opacity);}.var-loading__content-mask { position: absolute; left: 0; right: 0; top: 0; bottom: 0;}.var-loading__body { display: flex; justify-content: center; align-items: center; height: 100%; flex-direction: column;}.var-loading__inside { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;}.var-loading__description { color: var(--color-primary); margin: var(--loading-desc-margin);}.var-loading__description--large { font-size: var(--font-size-lg);}.var-loading__description--normal { font-size: var(--font-size-md);}.var-loading__description--small { font-size: var(--font-size-sm);}.var-loading__description--mini { font-size: var(--font-size-xs);}.var-loading__circle { display: flex;}.var-loading__circle-block { display: inline-block; color: var(--color-primary); animation: circle 1.8s linear infinite;}.var-loading__circle-block--large { width: 36px; height: 36px;}.var-loading__circle-block--normal { width: 30px; height: 30px;}.var-loading__circle-block--small { width: 24px; height: 24px;}.var-loading__circle-block--mini { width: 18px; height: 18px;}.var-loading__circle-block svg { display: block; width: 100%; height: 100%;}.var-loading__circle-block svg circle { animation: circular 1.5s ease-in-out infinite; stroke: currentColor; stroke-width: 3; stroke-linecap: round;}@keyframes circle { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}@keyframes circular { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -40; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -120; }}.var-loading__wave { --loading-wave-size-item-width: 5px; --loading-wave-size-item-margin: 5px; display: flex; align-items: center; justify-content: center;}.var-loading__wave--large { width: var(--loading-large-width); height: var(--loading-large-height);}.var-loading__wave--normal { width: var(--loading-normal-width); height: var(--loading-normal-height);}.var-loading__wave--small { width: var(--loading-small-width); height: var(--loading-small-height);}.var-loading__wave--mini { width: var(--loading-mini-width); height: var(--loading-mini-height);}.var-loading__wave-item { height: 100%; display: inline-block; animation: 1.2s ease-in-out infinite wave; background-color: var(--color-primary);}.var-loading__wave-item:nth-child(1) { animation-delay: -1.2s; margin-left: 0;}.var-loading__wave-item:nth-child(2) { animation-delay: -1.1s;}.var-loading__wave-item:nth-child(3) { animation-delay: -1s;}.var-loading__wave-item:nth-child(4) { animation-delay: -0.9s;}.var-loading__wave-item:nth-child(5) { animation-delay: -0.8s;}.var-loading__wave-item--large { width: var(--loading-wave-size-item-width); margin-left: var(--loading-wave-size-item-margin);}.var-loading__wave-item--normal { width: calc(var(--loading-wave-size-item-width) - 1px); margin-left: calc(var(--loading-wave-size-item-margin) - 1px);}.var-loading__wave-item--small { width: calc(var(--loading-wave-size-item-width) - 2px); margin-left: calc(var(--loading-wave-size-item-margin) - 2px);}.var-loading__wave-item--mini { width: calc(var(--loading-wave-size-item-width) - 3px); margin-left: calc(var(--loading-wave-size-item-margin) - 3px);}@keyframes wave { 0%, 40%, 100% { transform: scaleY(0.4); } 20% { transform: scaleY(1); }}.var-loading__cube { --loading-cube-size-item-width: 10px; --loading-cube-size-item-height: 10px; --loading-cube-size-item-margin: 5px; display: flex; align-items: center;}.var-loading__cube--large { width: var(--loading-large-width); height: var(--loading-large-height);}.var-loading__cube--normal { width: var(--loading-normal-width); height: var(--loading-normal-height);}.var-loading__cube--small { width: var(--loading-small-width); height: var(--loading-small-height);}.var-loading__cube--mini { width: var(--loading-mini-width); height: var(--loading-mini-height);}.var-loading__cube-item { display: inline-block; transform-origin: right bottom; animation: 1.5s ease infinite cube; background-color: var(--color-primary);}.var-loading__cube-item:nth-child(1) { animation-delay: 0.2s; margin-left: 0;}.var-loading__cube-item:nth-child(2) { animation-delay: 0.4s;}.var-loading__cube-item:nth-child(3) { animation-delay: 0.6s;}.var-loading__cube-item:nth-child(4) { animation-delay: 0.8s;}.var-loading__cube-item--large { height: var(--loading-cube-size-item-height); width: var(--loading-cube-size-item-width); margin-left: var(--loading-cube-size-item-margin);}.var-loading__cube-item--normal { height: calc(var(--loading-cube-size-item-height) - 2px); width: calc(var(--loading-cube-size-item-width) - 2px); margin-left: calc(var(--loading-cube-size-item-margin) - 1px);}.var-loading__cube-item--small { height: calc(var(--loading-cube-size-item-height) - 4px); width: calc(var(--loading-cube-size-item-width) - 4px); margin-left: calc(var(--loading-cube-size-item-margin) - 2px);}.var-loading__cube-item--mini { height: calc(var(--loading-cube-size-item-height) - 6px); width: calc(var(--loading-cube-size-item-width) - 6px); margin-left: calc(var(--loading-cube-size-item-margin) - 3px);}@keyframes cube { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: rotate(90deg) scale(0.3); }}.var-loading__rect { --loading-rect-size-item-width: 8px; --loading-rect-size-item-height: 100%; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;}.var-loading__rect--large { width: var(--loading-large-width); height: var(--loading-large-height);}.var-loading__rect--normal { width: var(--loading-normal-width); height: var(--loading-normal-height);}.var-loading__rect--small { width: var(--loading-small-width); height: var(--loading-small-height);}.var-loading__rect--mini { width: var(--loading-mini-width); height: var(--loading-mini-height);}.var-loading__rect-item { animation: 2s ease-in-out infinite rect; background-color: var(--color-primary);}.var-loading__rect-item:nth-child(1) { animation-delay: 1.75s;}.var-loading__rect-item:nth-child(2) { animation-delay: 1.5s;}.var-loading__rect-item:nth-child(3) { animation-delay: 1.25s;}.var-loading__rect-item:nth-child(4) { animation-delay: 1s;}.var-loading__rect-item:nth-child(5) { animation-delay: 0.75s;}.var-loading__rect-item:nth-child(6) { animation-delay: 0.5s;}.var-loading__rect-item:nth-child(7) { animation-delay: 0.25s;}.var-loading__rect-item:nth-child(8) { animation-delay: 0s;}.var-loading__rect-item--large { height: var(--loading-rect-size-item-height); width: var(--loading-rect-size-item-width);}.var-loading__rect-item--normal { height: calc(var(--loading-rect-size-item-height) * 0.9); width: calc(var(--loading-rect-size-item-width) * 0.8);}.var-loading__rect-item--small { height: calc(var(--loading-rect-size-item-height) * 0.8); width: calc(var(--loading-rect-size-item-width) * 0.6);}.var-loading__rect-item--mini { height: calc(var(--loading-rect-size-item-height) * 0.7); width: calc(var(--loading-rect-size-item-width) * 0.4);}@keyframes rect { 0% { opacity: 0.3; } 25% { opacity: 1; } 50% { opacity: 0.3; } 65% { opacity: 1; } 100% { opacity: 0.3; }}.var-loading__disappear { --loading-disappear-size-item-width: 15px; --loading-disappear-size-item-height: 15px; display: flex; justify-content: space-around; align-items: center; flex-flow: nowrap;}.var-loading__disappear--large { width: var(--loading-large-width); height: var(--loading-large-height);}.var-loading__disappear--normal { width: var(--loading-normal-width); height: var(--loading-normal-height);}.var-loading__disappear--small { width: var(--loading-small-width); height: var(--loading-small-height);}.var-loading__disappear--mini { width: var(--loading-mini-width); height: var(--loading-mini-height);}.var-loading__disappear-item { border-radius: 50%; animation: 0.5s ease-in-out infinite alternate disappear; background-color: var(--color-primary);}.var-loading__disappear-item:nth-child(1) { animation-delay: -0.4s;}.var-loading__disappear-item:nth-child(2) { animation-delay: -0.2s;}.var-loading__disappear-item:nth-child(3) { animation-delay: 0s;}.var-loading__disappear-item--large { height: var(--loading-disappear-size-item-height); width: var(--loading-disappear-size-item-width);}.var-loading__disappear-item--normal { height: calc(var(--loading-disappear-size-item-height) * 0.8); width: calc(var(--loading-disappear-size-item-width) * 0.8);}.var-loading__disappear-item--small { height: calc(var(--loading-disappear-size-item-height) * 0.6); width: calc(var(--loading-disappear-size-item-width) * 0.6);}.var-loading__disappear-item--mini { height: calc(var(--loading-disappear-size-item-height) * 0.4); width: calc(var(--loading-disappear-size-item-width) * 0.4);}@keyframes disappear { 0% { opacity: 1; } 100% { opacity: 0; }}

package/lib/loading/props.js

@@ -31,8 +31,7 @@ var props = {
   },
   // loading颜色
   color: {
-    type: String,
-    default: 'currentColor'
+    type: String
   },
   description: {
     type: String

package/lib/locale/en-US.d.ts

@@ -1,5 +1,5 @@
-import type { Pack } from '../../types'
-
-declare const enUS: Pack
-
-export default enUS
+import type { Pack } from '../../types'
+
+declare const enUS: Pack
+
+export default enUS

package/lib/locale/index.js

@@ -8,9 +8,15 @@ var _vue = require("vue");
 
 var _zhCN = _interopRequireDefault(require("./zh-CN"));
 
+exports.zhCN = _zhCN.default;
+
+var _enUS = _interopRequireDefault(require("./en-US"));
+
+exports.enUS = _enUS.default;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function useLocale() {
   var packs = {};
@@ -64,6 +70,8 @@ exports.packs = packs;
 add('zh-CN', _zhCN.default);
 use('zh-CN');
 var _LocaleComponent = {
+  zhCN: _zhCN.default,
+  enUS: _enUS.default,
   packs,
   pack,
   add,
@@ -73,6 +81,8 @@ var _LocaleComponent = {
 };
 exports._LocaleComponent = _LocaleComponent;
 var _default = {
+  zhCN: _zhCN.default,
+  enUS: _enUS.default,
   packs,
   pack,
   add,

package/lib/locale/zh-CN.d.ts

@@ -1,5 +1,5 @@
-import type { Pack } from '../../types'
-
-declare const zhCN: Pack
-
-export default zhCN
+import type { Pack } from '../../types'
+
+declare const zhCN: Pack
+
+export default zhCN

package/lib/menu/Menu.js

@@ -2,62 +2,178 @@
 
 exports.__esModule = true;
 exports.default = void 0;
+exports.render = render;
 
-var _vue = require("vue");
-
-var _props = require("./props");
+var _flip = _interopRequireDefault(require("@popperjs/core/lib/modifiers/flip"));
 
-var _elements = require("../utils/elements");
+var _offset = _interopRequireDefault(require("@popperjs/core/lib/modifiers/offset"));
 
-var _zIndex = require("../context/zIndex");
+var _popperLite = require("@popperjs/core/lib/popper-lite");
 
 var _components = require("../utils/components");
 
+var _vue = require("vue");
 
+var _props = require("./props");
 
+var _elements = require("../utils/elements");
 
+var _zIndex = require("../context/zIndex");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
-function _isSlot(s) {
-  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !(0, _vue.isVNode)(s);
-}
-
 var {
   n,
   classes
 } = (0, _components.createNamespace)('menu');
 
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    ref: "host",
+    class: (0, _vue.normalizeClass)(_ctx.n()),
+    onClick: _cache[3] || (_cache[3] = function () {
+      return _ctx.handleClick && _ctx.handleClick(...arguments);
+    }),
+    onMouseenter: _cache[4] || (_cache[4] = function () {
+      return _ctx.handleMouseenter && _ctx.handleMouseenter(...arguments);
+    }),
+    onMouseleave: _cache[5] || (_cache[5] = function () {
+      return _ctx.handleMouseleave && _ctx.handleMouseleave(...arguments);
+    })
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "default"), ((0, _vue.openBlock)(), (0, _vue.createBlock)(_vue.Teleport, {
+    to: _ctx.teleport
+  }, [(0, _vue.createVNode)(_vue.Transition, {
+    name: _ctx.n(),
+    onAfterEnter: _ctx.onOpened,
+    onAfterLeave: _ctx.onClosed
+  }, {
+    default: (0, _vue.withCtx)(() => [(0, _vue.withDirectives)((0, _vue.createElementVNode)("div", {
+      ref: "menu",
+      style: (0, _vue.normalizeStyle)({
+        zIndex: _ctx.zIndex
+      }),
+      class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('menu'), [_ctx.defaultStyle, _ctx.n('--menu-background-color') + " var-elevation--3"])),
+      onClick: _cache[0] || (_cache[0] = (0, _vue.withModifiers)(() => {}, ["stop"])),
+      onMouseenter: _cache[1] || (_cache[1] = function () {
+        return _ctx.handleMenuMouseenter && _ctx.handleMenuMouseenter(...arguments);
+      }),
+      onMouseleave: _cache[2] || (_cache[2] = function () {
+        return _ctx.handleMenuMouseleave && _ctx.handleMenuMouseleave(...arguments);
+      })
+    }, [(0, _vue.renderSlot)(_ctx.$slots, "menu")], 38
+    /* CLASS, STYLE, HYDRATE_EVENTS */
+    ), [[_vue.vShow, _ctx.show]])]),
+    _: 3
+    /* FORWARDED */
+
+  }, 8
+  /* PROPS */
+  , ["name", "onAfterEnter", "onAfterLeave"])], 8
+  /* PROPS */
+  , ["to"]))], 34
+  /* CLASS, HYDRATE_EVENTS */
+  );
+}
+
 var _default = (0, _vue.defineComponent)({
+  render,
   name: 'VarMenu',
   props: _props.props,
 
-  setup(props, _ref) {
-    var {
-      slots
-    } = _ref;
+  setup(props) {
     var host = (0, _vue.ref)(null);
     var menu = (0, _vue.ref)(null);
-    var to = (0, _vue.ref)();
-    var top = (0, _vue.ref)(0);
-    var left = (0, _vue.ref)(0);
+    var show = (0, _vue.ref)(false);
     var {
       zIndex
-    } = (0, _zIndex.useZIndex)(() => props.show, 1);
-    var {
-      disabled
-    } = (0, _components.useTeleport)();
+    } = (0, _zIndex.useZIndex)(() => show.value, 1);
+    var popover = null;
     var clickSelf = false;
+    var enterMenu = false;
+    var enterHost = false;
+    var hostSize = {
+      width: 0,
+      height: 0
+    };
 
-    var computeTop = alignment => {
-      return alignment === 'top' ? (0, _elements.getTop)(host.value) : (0, _elements.getTop)(host.value) - menu.value.offsetHeight;
+    var computeHostSize = () => {
+      var {
+        width,
+        height
+      } = getComputedStyle(host.value);
+      hostSize = {
+        width: (0, _elements.toPxNum)(width),
+        height: (0, _elements.toPxNum)(height)
+      };
     };
 
+    var handleMouseenter = () => {
+      if (props.trigger !== 'hover') {
+        return;
+      }
+
+      enterHost = true;
+      open();
+    };
+
+    var handleMouseleave = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator(function* () {
+        if (props.trigger !== 'hover') {
+          return;
+        }
+
+        enterHost = false;
+        yield (0, _elements.doubleRaf)();
+
+        if (enterMenu) {
+          return;
+        }
+
+        close();
+      });
+
+      return function handleMouseleave() {
+        return _ref.apply(this, arguments);
+      };
+    }();
+
+    var handleMenuMouseenter = () => {
+      if (props.trigger !== 'hover') {
+        return;
+      }
+
+      enterMenu = true;
+    };
+
+    var handleMenuMouseleave = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(function* () {
+        if (props.trigger !== 'hover') {
+          return;
+        }
+
+        enterMenu = false;
+        yield (0, _elements.doubleRaf)();
+
+        if (enterHost) {
+          return;
+        }
+
+        close();
+      });
+
+      return function handleMenuMouseleave() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+
     var handleClick = () => {
+      open();
       clickSelf = true;
     };
 
@@ -67,93 +183,207 @@ var _default = (0, _vue.defineComponent)({
         return;
       }
 
-      if (!props.show) {
-        return;
+      show.value = false;
+      (0, _components.call)(props['onUpdate:show'], false);
+    };
+
+    var getPosition = () => {
+      computeHostSize();
+      var offset = {
+        x: (0, _elements.toPxNum)(props.offsetX),
+        y: (0, _elements.toPxNum)(props.offsetY)
+      };
+
+      switch (props.placement) {
+        case 'cover-top':
+          return {
+            placement: 'bottom',
+            skidding: offset.x,
+            distance: offset.y - hostSize.height
+          };
+
+        case 'cover-top-start':
+          return {
+            placement: 'bottom-start',
+            skidding: offset.x,
+            distance: offset.y - hostSize.height
+          };
+
+        case 'cover-top-end':
+          return {
+            placement: 'bottom-end',
+            skidding: offset.x,
+            distance: offset.y - hostSize.height
+          };
+
+        case 'cover-bottom':
+          return {
+            placement: 'top',
+            skidding: offset.x,
+            distance: -offset.y - hostSize.height
+          };
+
+        case 'cover-bottom-start':
+          return {
+            placement: 'top-start',
+            skidding: offset.x,
+            distance: -offset.y - hostSize.height
+          };
+
+        case 'cover-bottom-end':
+          return {
+            placement: 'top-end',
+            skidding: offset.x,
+            distance: -offset.y - hostSize.height
+          };
+
+        case 'cover-left':
+          return {
+            placement: 'right',
+            skidding: offset.y,
+            distance: offset.x - hostSize.width
+          };
+
+        case 'cover-right':
+          return {
+            placement: 'left',
+            skidding: offset.y,
+            distance: -offset.x - hostSize.width
+          };
+
+        case 'left':
+        case 'left-start':
+        case 'left-end':
+          return {
+            placement: props.placement,
+            skidding: offset.y,
+            distance: -offset.x
+          };
+
+        case 'top':
+        case 'top-start':
+        case 'top-end':
+          return {
+            placement: props.placement,
+            skidding: offset.x,
+            distance: -offset.y
+          };
+
+        case 'bottom':
+        case 'bottom-start':
+        case 'bottom-end':
+          return {
+            placement: props.placement,
+            skidding: offset.x,
+            distance: offset.y
+          };
+
+        case 'right':
+        case 'right-start':
+        case 'right-end':
+          return {
+            placement: props.placement,
+            skidding: offset.y,
+            distance: offset.x
+          };
       }
+    };
 
-      (0, _components.call)(props['onUpdate:show'], false);
+    var getPopperOptions = () => {
+      var {
+        placement,
+        skidding,
+        distance
+      } = getPosition();
+      return {
+        placement,
+        modifiers: [_extends({}, _flip.default, {
+          enabled: show.value
+        }), _extends({}, _offset.default, {
+          options: {
+            offset: [skidding, distance]
+          }
+        })]
+      };
     }; // expose
 
 
     var resize = () => {
-      top.value = computeTop(props.alignment);
-      left.value = (0, _elements.getLeft)(host.value);
-    }; // Transition style use computed place here
+      popover.setOptions(getPopperOptions());
+    }; // expose
 
 
-    var transitionStyle = (0, _vue.computed)(() => {
-      return {
-        top: "calc(" + top.value + "px + " + (0, _elements.toSizeUnit)(props.offsetY) + ")",
-        left: "calc(" + left.value + "px + " + (0, _elements.toSizeUnit)(props.offsetX) + ")",
-        zIndex: zIndex.value
-      };
-    });
+    var open = () => {
+      var {
+        disabled
+      } = props;
 
-    var renderTransition = () => (0, _vue.createVNode)(_vue.Transition, {
-      "name": n(),
-      "onAfterEnter": props.onOpened,
-      "onAfterLeave": props.onClosed
-    }, {
-      default: () => [(0, _vue.withDirectives)((0, _vue.createVNode)("div", {
-        "class": classes(n('menu'), 'var-elevation--3'),
-        "ref": menu,
-        "style": transitionStyle.value,
-        "onClick": event => {
-          event.stopPropagation();
-        }
-      }, [(0, _components.call)(slots.menu)]), [[_vue.vShow, props.show]])]
-    });
+      if (disabled) {
+        return;
+      }
 
-    (0, _vue.watch)(() => props.alignment, resize);
-    (0, _vue.watch)(() => props.show, /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator(function* (newValue) {
-        var {
-          onOpen,
-          onClose
-        } = props;
-
-        if (newValue) {
-          yield (0, _vue.nextTick)();
-          resize();
-        }
+      show.value = true;
+      (0, _components.call)(props['onUpdate:show'], true);
+    }; // expose
 
-        newValue ? (0, _components.call)(onOpen) : (0, _components.call)(onClose);
-      });
 
-      return function (_x) {
-        return _ref2.apply(this, arguments);
-      };
-    }());
-    (0, _vue.watch)(() => props.teleport, newValue => {
-      to.value = newValue;
+    var close = () => {
+      show.value = false;
+      (0, _components.call)(props['onUpdate:show'], false);
+    };
+
+    (0, _vue.watch)(() => props.show, newValue => {
+      show.value = newValue != null ? newValue : false;
+    }, {
+      immediate: true
+    });
+    (0, _vue.watch)(() => props.offsetX, resize);
+    (0, _vue.watch)(() => props.offsetY, resize);
+    (0, _vue.watch)(() => props.placement, resize);
+    (0, _vue.watch)(() => show.value, newValue => {
+      if (newValue) {
+        resize();
+        (0, _components.call)(props.onOpen);
+      } else {
+        (0, _components.call)(props.onClose);
+      }
     });
+    (0, _vue.watch)(() => props.trigger, newValue => {
+      if (newValue === 'click') {
+        document.addEventListener('click', handleMenuClose);
+      } else {
+        document.removeEventListener('click', handleMenuClose);
+      }
+    });
+    (0, _vue.watch)(() => props.disabled, close);
     (0, _vue.onMounted)(() => {
-      // Synchronously transfer the state to the mount hook to support server-side rendering to prevent hydration errors
-      to.value = props.teleport;
-      resize();
-      document.addEventListener('click', handleMenuClose);
-      window.addEventListener('resize', resize);
+      popover = (0, _popperLite.createPopper)(host.value, menu.value, getPopperOptions());
+
+      if (props.trigger === 'click') {
+        document.addEventListener('click', handleMenuClose);
+      }
     });
     (0, _vue.onUnmounted)(() => {
       document.removeEventListener('click', handleMenuClose);
-      window.removeEventListener('resize', resize);
-    });
-    (0, _components.exposeApis)({
-      resize
+      popover.destroy();
     });
-    return () => {
-      var _slot;
-
-      return (0, _vue.createVNode)("div", {
-        "class": n(),
-        "ref": host,
-        "onClick": handleClick
-      }, [(0, _components.call)(slots.default), to.value ? (0, _vue.createVNode)(_vue.Teleport, {
-        "to": to.value,
-        "disabled": disabled.value
-      }, _isSlot(_slot = renderTransition()) ? _slot : {
-        default: () => [_slot]
-      }) : renderTransition()]);
+    return {
+      menu,
+      host,
+      hostSize,
+      show,
+      zIndex,
+      n,
+      classes,
+      handleClick,
+      handleMenuClose,
+      handleMouseenter,
+      handleMouseleave,
+      handleMenuMouseenter,
+      handleMenuMouseleave,
+      resize,
+      open,
+      close
     };
   }
 

package/lib/menu/index.js

@@ -3,7 +3,7 @@
 exports.__esModule = true;
 exports.default = exports._MenuComponent = void 0;
 
-var _Menu = _interopRequireDefault(require("./Menu"));
+var _Menu = _interopRequireDefault(require("./Menu.js"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

package/lib/menu/menu.css

@@ -1 +1 @@
-.var-menu-enter-from,.var-menu-leave-to { transform: scale(0.8); opacity: 0;}.var-menu-enter-active,.var-menu-leave-active { transition-property: opacity, transform; transition-duration: 0.25s;}.var-menu { display: inline-block; transition: background-color 0.25s;}.var-menu__menu { position: absolute;}
+:root { --menu-background-color: #fff;}.var-menu-enter-from,.var-menu-leave-to { opacity: 0;}.var-menu-enter-active,.var-menu-leave-active { transition-property: opacity; transition-duration: 0.25s;}.var-menu { display: inline-block;}.var-menu--menu-background-color { background: var(--menu-background-color); transition: opacity 0.25s, background-color 0.25s;}

package/lib/menu/props.js

@@ -3,8 +3,12 @@
 exports.__esModule = true;
 exports.props = void 0;
 
-function alignmentValidator(alignment) {
-  return ['top', 'bottom'].includes(alignment);
+function triggerValidator(trigger) {
+  return ['click', 'hover'].includes(trigger);
+}
+
+function placementValidator(alignment) {
+  return ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end', 'cover-top', 'cover-top-start', 'cover-top-end', 'cover-bottom', 'cover-bottom-start', 'cover-bottom-end', 'cover-left', 'cover-right'].includes(alignment);
 }
 
 var props = {
@@ -12,10 +16,19 @@ var props = {
     type: Boolean,
     default: false
   },
-  alignment: {
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  trigger: {
     type: String,
-    default: 'top',
-    validator: alignmentValidator
+    default: 'click',
+    validator: triggerValidator
+  },
+  placement: {
+    type: String,
+    default: 'cover-top-start',
+    validator: placementValidator
   },
   offsetX: {
     type: [Number, String],
@@ -26,9 +39,13 @@ var props = {
     default: 0
   },
   teleport: {
-    type: String,
+    type: [String, Object],
     default: 'body'
   },
+  defaultStyle: {
+    type: Boolean,
+    default: true
+  },
   onOpen: {
     type: Function
   },

package/lib/menu/style/index.js

@@ -1,3 +1,4 @@
-require('../../styles/common.css')
-require('../../styles/elevation.css')
 require('../menu.css')
+require('../../styles/elevation.css')
+require('../../styles/common.css')
+require('../MenuSfc.css')