@varlet/ui 2.5.1 → 2.5.3

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.2",
   "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/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':

package/lib/tooltip/Tooltip.js

@@ -83,7 +83,6 @@ var _default = (0, _vue.defineComponent)({
     var {
       popover,
       host,
-      hostSize,
       show,
       zIndex,
       handleHostClick,
@@ -102,7 +101,6 @@ var _default = (0, _vue.defineComponent)({
     return {
       popover,
       host,
-      hostSize,
       show,
       zIndex,
       n,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "2.5.1",
+  "version": "2.5.3",
   "description": "A material like components library",
   "module": "es/index.js",
   "main": "lib/index.js",
@@ -47,8 +47,8 @@
     "@popperjs/core": "^2.11.6",
     "dayjs": "^1.10.4",
     "decimal.js": "^10.2.1",
-    "@varlet/icons": "2.5.1",
-    "@varlet/shared": "2.5.1"
+    "@varlet/icons": "2.5.3",
+    "@varlet/shared": "2.5.3"
   },
   "devDependencies": {
     "@types/jest": "^26.0.15",
@@ -63,8 +63,8 @@
     "typescript": "^4.4.4",
     "vue": "3.2.25",
     "vue-router": "4.0.12",
-    "@varlet/touch-emulator": "2.5.1",
-    "@varlet/cli": "2.5.1"
+    "@varlet/touch-emulator": "2.5.3",
+    "@varlet/cli": "2.5.3"
   },
   "browserslist": [
     "Chrome >= 54",

package/types/menu.d.ts

@@ -25,6 +25,7 @@ export interface MenuProps extends BasicAttributes {
   offsetX?: string | number
   offsetY?: string | number
   teleport?: TeleportProps['to']
+  sameWidth?: boolean
   defaultStyle?: boolean
   onOpen?: ListenerProp<() => void>
   onOpened?: ListenerProp<() => void>