@varlet/ui 2.5.1 → 2.5.2

package/highlight/attributes.json

@@ -1071,6 +1071,10 @@
     "type": "string",
     "description": "菜单触发方式，可选值为 `click` `hover`, `click` 为点击时触发, `hover` 为悬停时触发 默认值：click"
   },
+  "var-menu/same-width": {
+    "type": "boolean",
+    "description": "是否与触发元素同宽 默认值：false"
+  },
   "var-menu/default-style": {
     "type": "boolean",
     "description": "是否启用默认样式 默认值：true"

package/highlight/tags.json

@@ -409,6 +409,7 @@
       "teleport",
       "disabled",
       "trigger",
+      "same-width",
       "default-style"
     ]
   },

package/highlight/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "name": "VARLET",
   "contributions": {
     "html": {
@@ -3198,6 +3198,15 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "same-width",
+              "description": "是否与触发元素同宽",
+              "default": "false",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
             {
               "name": "default-style",
               "description": "是否启用默认样式",

package/lib/menu/Menu.js

@@ -12,6 +12,8 @@ var _props = require("./props");
 
 var _usePopover = require("./usePopover");
 
+var _elements = require("../utils/elements");
+
 var {
   n,
   classes
@@ -40,7 +42,8 @@ function render(_ctx, _cache) {
     default: (0, _vue.withCtx)(() => [(0, _vue.withDirectives)((0, _vue.createElementVNode)("div", {
       ref: "popover",
       style: (0, _vue.normalizeStyle)({
-        zIndex: _ctx.zIndex
+        zIndex: _ctx.zIndex,
+        width: _ctx.sameWidth ? _ctx.toSizeUnit(Math.ceil(_ctx.hostSize.width)) : undefined
       }),
       class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('menu'), [_ctx.defaultStyle, _ctx.n('--menu-background-color') + " " + _ctx.n('$-elevation--3')])),
       onClick: _cache[0] || (_cache[0] = (0, _vue.withModifiers)(() => {}, ["stop"])),
@@ -96,6 +99,7 @@ var _default = (0, _vue.defineComponent)({
       hostSize,
       show,
       zIndex,
+      toSizeUnit: _elements.toSizeUnit,
       n,
       classes,
       handleHostClick,

package/lib/menu/menu.css

@@ -1 +1 @@
-: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;}
+: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 { overflow: auto;}.var-menu--menu-background-color { background: var(--menu-background-color); transition: opacity 0.25s, background-color 0.25s;}

package/lib/menu/props.js

@@ -44,6 +44,10 @@ var props = {
     type: [String, Object],
     default: 'body'
   },
+  sameWidth: {
+    type: Boolean,
+    default: false
+  },
   defaultStyle: {
     type: Boolean,
     default: true

package/lib/menu/usePopover.js

@@ -29,6 +29,10 @@ function usePopover(options) {
   var host = (0, _vue.ref)(null);
   var popover = (0, _vue.ref)(null);
   var show = (0, _vue.ref)(false);
+  var hostSize = (0, _vue.ref)({
+    width: 0,
+    height: 0
+  });
   var {
     zIndex
   } = (0, _zIndex.useZIndex)(() => show.value, 1);
@@ -36,17 +40,13 @@ function usePopover(options) {
   var clickSelf = false;
   var enterPopover = false;
   var enterHost = false;
-  var hostSize = {
-    width: 0,
-    height: 0
-  };
 
   var computeHostSize = () => {
     var {
       width,
       height
     } = window.getComputedStyle(host.value);
-    hostSize = {
+    hostSize.value = {
       width: (0, _elements.toPxNum)(width),
       height: (0, _elements.toPxNum)(height)
     };
@@ -138,56 +138,56 @@ function usePopover(options) {
         return {
           placement: 'bottom',
           skidding: offset.x,
-          distance: offset.y - hostSize.height
+          distance: offset.y - hostSize.value.height
         };
 
       case 'cover-top-start':
         return {
           placement: 'bottom-start',
           skidding: offset.x,
-          distance: offset.y - hostSize.height
+          distance: offset.y - hostSize.value.height
         };
 
       case 'cover-top-end':
         return {
           placement: 'bottom-end',
           skidding: offset.x,
-          distance: offset.y - hostSize.height
+          distance: offset.y - hostSize.value.height
         };
 
       case 'cover-bottom':
         return {
           placement: 'top',
           skidding: offset.x,
-          distance: -offset.y - hostSize.height
+          distance: -offset.y - hostSize.value.height
         };
 
       case 'cover-bottom-start':
         return {
           placement: 'top-start',
           skidding: offset.x,
-          distance: -offset.y - hostSize.height
+          distance: -offset.y - hostSize.value.height
         };
 
       case 'cover-bottom-end':
         return {
           placement: 'top-end',
           skidding: offset.x,
-          distance: -offset.y - hostSize.height
+          distance: -offset.y - hostSize.value.height
         };
 
       case 'cover-left':
         return {
           placement: 'right',
           skidding: offset.y,
-          distance: offset.x - hostSize.width
+          distance: offset.x - hostSize.value.width
         };
 
       case 'cover-right':
         return {
           placement: 'left',
           skidding: offset.y,
-          distance: -offset.x - hostSize.width
+          distance: -offset.x - hostSize.value.width
         };
 
       case 'left':