feat(modal): show-mask prop

CHANGELOG.en-US.md

@@ -4,7 +4,8 @@
 
 ### Feat
 
-- `n-layout-sider` Add `default-collapsed` prop.
+- `n-layout-sider` add `default-collapsed` prop.
+- `n-modal` add `show-mask` prop.
 
 ### Fixes
 

CHANGELOG.zh-CN.md

@@ -5,6 +5,7 @@
 ### Feat
 
 - `n-layout-sider` 新增 `default-collapsed` 属性
+- `n-modal` 新增 `show-mask` 属性
 
 ### Fixed
 

src/modal/demos/enUS/index.demo-entry.md

@@ -23,6 +23,7 @@ preset-confirm-slot
 | mask-closable | `boolean` | `true` | Whether to emit `hide` event when click mask. |
 | preset | `'card' \| 'confirm'` | `undefined` |  |
 | show | `boolean` | `false` | Whether to show modal. |
+| show-mask | `boolean` | `true` | Whether to show mask of the modal. |
 | on-update:show | `(value: boolean) => any` | `undefined` | Callback when modal's display status is changed. |
 
 ### Modal with Preset Card

src/modal/demos/enUS/mask-closable.demo.md

@@ -10,7 +10,6 @@ Use `mask-closable=false` to make modal not emit the event which may close the m
   preset="confirm"
   title="Dialog"
   content="Are you sure?"
-  :closable="false"
   positive-text="Confirm"
   @positive-click="submitCallback"
   @negative-click="cancelCallback"

src/modal/demos/zhCN/index.demo-entry.md

@@ -28,6 +28,7 @@ drawer-debug
 | mask-closable | `boolean` | `true` | 点击遮罩时是否发出 `update:show` 事件 |
 | preset | `'card' \| 'dialog'` | `undefined` | 模态框使用何种预设 |
 | show | `boolean` | `false` | 是否展示 Modal |
+| show-mask | `boolean` | `true` | 是否展示 Modal 的遮罩 |
 | on-update:show | `(value: boolean) => any` | `undefined` | 模态框更新是否展示状态的回调 |
 
 ### Modal（Card 预设）

src/modal/demos/zhCN/mask-closable.demo.md

@@ -5,12 +5,11 @@
 ```html
 <n-button @click="showModal = true"> 来吧 </n-button>
 <n-modal
-  :show="showModal"
+  v-model:show="showModal"
   :mask-closable="false"
   preset="confirm"
   title="确认"
   content="你确认"
-  :closable="false"
   positive-text="确认"
   @positive-click="onPositiveClick"
   @negative-click="onNegativeClick"

src/modal/src/Modal.ts

@@ -45,6 +45,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    showMask: {
+      type: Boolean,
+      default: true
+    },
     maskClosable: {
       type: Boolean,
       default: true
@@ -258,24 +262,26 @@ export default defineComponent({
                 style: this.cssVars as CSSProperties
               },
               [
-                h(
+                this.showMask
-                  Transition,
+                  ? h(
-                  {
+                    Transition,
-                    name: 'n-fade-in-transition',
+                    {
-                    key: 'mask',
+                      name: 'n-fade-in-transition',
-                    appear: this.appear ?? this.isMounted
+                      key: 'mask',
-                  },
+                      appear: this.appear ?? this.isMounted
-                  {
+                    },
-                    default: () => {
+                    {
-                      return this.show
+                      default: () => {
-                        ? h('div', {
+                        return this.show
-                          ref: 'containerRef',
+                          ? h('div', {
-                          class: 'n-modal-mask'
+                            ref: 'containerRef',
-                        })
+                            class: 'n-modal-mask'
-                        : null
+                          })
+                          : null
+                      }
                     }
-                  }
+                  )
-                ),
+                  : null,
                 h(
                   NModalBodyWrapper,
                   {