feat(modal, drawer): add z-index prop, closes #2088

tusen-ai · Jan 2, 2022 · 71195a0 · 71195a0
1 parent 3bc29da
commit 71195a0
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 117 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -4,7 +4,8 @@
 
 ### Feats
 
-- `n-popover` add `shift` prop.
+- `n-modal` add `z-index` prop, closes [#2088](https://github.com/TuSimple/naive-ui/issues/2088).
+- `n-drawer` add `z-index` closes.
 
 ## 2.23.2 (2021-12-29)
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -4,7 +4,8 @@
 
 ### Feats
 
-`n-popover` 新增 `shift` 属性
+- `n-modal` 新增 `z-index` 属性，关闭 [#2088](https://github.com/TuSimple/naive-ui/issues/2088)
+- `n-drawer` 新增 `z-index` 属性
 
 ## 2.23.2 (2021-12-29)
 

diff --git a/src/drawer/demos/enUS/index.demo-entry.md b/src/drawer/demos/enUS/index.demo-entry.md
@@ -16,20 +16,21 @@ slot
 
 ### Drawer Props
 
-| Name | Parameters | Default | Description |
-| --- | --- | --- | --- |
-| content-style | `string \| Object` | `undefined` | Style of drawer's scrollable content node. |
-| display-directive | `'if' \| 'show'` | `'if'` | The display directive to use when `n-drawer` is rendered. `'if'` corresponds to `v-if` and `'show'` corresponds to `v-show`. |
-| height | `number \| string` | `251` | Works when placement is `top` and `bottom`. |
-| native-scrollbar | `boolean` | `true` | Whether to use native scrollbar on drawer. |
-| mask-closable | `boolean` | `true` | Whether to emit `hide` event when click mask. |
-| placement | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` | Drawer placement. |
-| show | `boolean` | `false` | Whether to show drawer. |
-| style | `string \| Object` | `undefined` | Style of the drawer. |
-| to | `string \| HTMLElement` | `'body'` | Container node of the drawer. |
-| width | `number \| string` | `251` | Works when placement is `left` and `right`. |
-| on-mask-click | `(e: MouseEvent) => void` | `undefined` | Callback triggered on mask clicked. |
-| on-update:show | `(show: boolean) => void` | `undefined` | Callback triggered on drawer display status would change. |
+| Name | Parameters | Default | Description | Version |
+| --- | --- | --- | --- | --- |
+| content-style | `string \| Object` | `undefined` | Style of drawer's scrollable content node. |  |
+| display-directive | `'if' \| 'show'` | `'if'` | The display directive to use when `n-drawer` is rendered. `'if'` corresponds to `v-if` and `'show'` corresponds to `v-show`. |  |
+| height | `number \| string` | `251` | Works when placement is `top` and `bottom`. |  |
+| native-scrollbar | `boolean` | `true` | Whether to use native scrollbar on drawer. |  |
+| mask-closable | `boolean` | `true` | Whether to emit `hide` event when click mask. |  |
+| placement | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` | Drawer placement. |  |
+| show | `boolean` | `false` | Whether to show drawer. |  |
+| style | `string \| Object` | `undefined` | Style of the drawer. |  |
+| to | `string \| HTMLElement` | `'body'` | Container node of the drawer. |  |
+| width | `number \| string` | `251` | Works when placement is `left` and `right`. |  |
+| z-index | `number` | `undefined` | Z index of the drawer. | NEXT_VERSION |
+| on-mask-click | `(e: MouseEvent) => void` | `undefined` | Callback triggered on mask clicked. |  |
+| on-update:show | `(show: boolean) => void` | `undefined` | Callback triggered on drawer display status would change. |  |
 
 ### DrawerContent Props
 

diff --git a/src/drawer/demos/zhCN/index.demo-entry.md b/src/drawer/demos/zhCN/index.demo-entry.md
@@ -21,20 +21,21 @@ dark-4-debug
 
 ### Drawer Props
 
-| 名称 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| content-style | `string \| Object` | `undefined` | 抽屉可滚动内容节点的样式 |
-| display-directive | `'if' \| 'show'` | `'if'` | `n-drawer` 在控制内容是否渲染时使用的指令，`'if'` 对应 `v-if`，`'show'` 对应 `v-show` |
-| height | `number \| string` | `251` | 抽屉的高度，在位置是 `top` 和 `bottom` 时生效 |
-| mask-closable | `boolean` | `true` | 点击遮罩时是否发出 `update:show` 事件 |
-| native-scrollbar | `boolean` | `true` | 是否使用原生滚动 |
-| placement | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` | 抽屉展示的位置 |
-| show | `boolean` | `false` | 是否展示抽屉 |
-| style | `string \| Object` | `undefined` | 抽屉的样式 |
-| to | `string \| HTMLElement` | `'body'` | 抽屉出现的区域 |
-| width | `number \| string` | `251` | 抽屉的宽度，在位置是 `left` 和 `right` 时生效 |
-| on-mask-click | `(e: MouseEvent) => void` | `undefined` | 点击遮罩的回调 |
-| on-update:show | `(show: boolean) => void` | `undefined` | 抽屉显示状态改变时执行的回调函数 |
+| 名称 | 类型 | 默认值 | 说明 | 版本 |
+| --- | --- | --- | --- | --- |
+| content-style | `string \| Object` | `undefined` | 抽屉可滚动内容节点的样式 |  |
+| display-directive | `'if' \| 'show'` | `'if'` | `n-drawer` 在控制内容是否渲染时使用的指令，`'if'` 对应 `v-if`，`'show'` 对应 `v-show` |  |
+| height | `number \| string` | `251` | 抽屉的高度，在位置是 `top` 和 `bottom` 时生效 |  |
+| mask-closable | `boolean` | `true` | 点击遮罩时是否发出 `update:show` 事件 |  |
+| native-scrollbar | `boolean` | `true` | 是否使用原生滚动 |  |
+| placement | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` | 抽屉展示的位置 |  |
+| show | `boolean` | `false` | 是否展示抽屉 |  |
+| style | `string \| Object` | `undefined` | 抽屉的样式 |  |
+| to | `string \| HTMLElement` | `'body'` | 抽屉出现的区域 |  |
+| width | `number \| string` | `251` | 抽屉的宽度，在位置是 `left` 和 `right` 时生效 |  |
+| z-index | `number` | `undefined` | 抽屉的 z-index | NEXT_VERSION |
+| on-mask-click | `(e: MouseEvent) => void` | `undefined` | 点击遮罩的回调 |  |
+| on-update:show | `(show: boolean) => void` | `undefined` | 抽屉显示状态改变时执行的回调函数 |  |
 
 ### DrawerContent Props
 

diff --git a/src/drawer/src/Drawer.tsx b/src/drawer/src/Drawer.tsx
@@ -6,14 +6,15 @@ import {
   provide,
   CSSProperties,
   withDirectives,
-  Transition
+  Transition,
+  watchEffect
 } from 'vue'
 import { VLazyTeleport } from 'vueuc'
 import { zindexable } from 'vdirs'
 import { useIsMounted } from 'vooks'
 import { useTheme, useConfig } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
-import { warn, formatLength, call } from '../../_utils'
+import { formatLength, call, warnOnce } from '../../_utils'
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils'
 import { ScrollbarProps } from '../../_internal'
 import { drawerLight, DrawerTheme } from '../styles'
@@ -50,6 +51,7 @@ const drawerProps = {
     type: Boolean,
     default: true
   },
+  zIndex: Number,
   onMaskClick: Function as PropType<(e: MouseEvent) => void>,
   scrollbarProps: Object as PropType<ScrollbarProps>,
   contentStyle: [Object, String] as PropType<string | CSSProperties>,
@@ -60,68 +62,11 @@ const drawerProps = {
   MaybeArray<(value: boolean) => void>
   >,
   /** @deprecated */
-  drawerStyle: {
-    type: [Object, String] as PropType<CSSProperties | string | undefined>,
-    validator: __DEV__
-      ? () => {
-          warn(
-            'drawer',
-            '`drawer-style` is deprecated, please use `style` instead.'
-          )
-          return true
-        }
-      : undefined,
-    default: undefined
-  },
-  /** @deprecated */
-  drawerClass: {
-    type: String as PropType<string | undefined>,
-    validator: __DEV__
-      ? () => {
-          warn(
-            'drawer',
-            '`drawer-class` is deprecated, please use `class` instead.'
-          )
-          return true
-        }
-      : undefined,
-    default: undefined
-  },
-  target: {
-    validator: __DEV__
-      ? () => {
-          warn('drawer', '`target` is deprecated, please use `to` instead.')
-          return true
-        }
-      : undefined,
-    default: undefined
-  },
-  onShow: {
-    type: [Function, Array] as PropType<
-    MaybeArray<(value: boolean) => void> | undefined
-    >,
-    validator: () => {
-      warn(
-        'drawer',
-        '`on-show` is deprecated, please use `on-update:show` instead.'
-      )
-      return true
-    },
-    default: undefined
-  },
-  onHide: {
-    type: [Function, Array] as PropType<
-    MaybeArray<(value: false) => void> | undefined
-    >,
-    validator: () => {
-      warn(
-        'drawer',
-        '`on-hide` is deprecated, please use `on-update:show` instead.'
-      )
-      return true
-    },
-    default: undefined
-  }
+  drawerStyle: [String, Object] as PropType<string | CSSProperties>,
+  drawerClass: String,
+  target: null,
+  onShow: Function as PropType<(value: boolean) => void>,
+  onHide: Function as PropType<(value: boolean) => void>
 } as const
 
 export type DrawerProps = ExtractPublicPropTypes<typeof drawerProps>
@@ -131,6 +76,37 @@ export default defineComponent({
   inheritAttrs: false,
   props: drawerProps,
   setup (props) {
+    if (__DEV__) {
+      watchEffect(() => {
+        if (props.drawerStyle !== undefined) {
+          warnOnce(
+            'drawer',
+            '`drawer-style` is deprecated, please use `style` instead.'
+          )
+        }
+        if (props.drawerClass !== undefined) {
+          warnOnce(
+            'drawer',
+            '`drawer-class` is deprecated, please use `class` instead.'
+          )
+        }
+        if (props.target !== undefined) {
+          warnOnce('drawer', '`target` is deprecated, please use `to` instead.')
+        }
+        if (props.onShow !== undefined) {
+          warnOnce(
+            'drawer',
+            '`on-show` is deprecated, please use `on-update:show` instead.'
+          )
+        }
+        if (props.onHide !== undefined) {
+          warnOnce(
+            'drawer',
+            '`on-hide` is deprecated, please use `on-update:show` instead.'
+          )
+        }
+      })
+    }
     const { mergedClsPrefixRef, namespaceRef } = useConfig(props)
     const isMountedRef = useIsMounted()
     const themeRef = useTheme(
@@ -275,7 +251,7 @@ export default defineComponent({
                   {this.$slots}
                 </NDrawerBodyWrapper>
               </div>,
-              [[zindexable, { enabled: this.show }]]
+              [[zindexable, { zIndex: this.zIndex, enabled: this.show }]]
             )
           }
         }}

diff --git a/src/modal/demos/enUS/index.demo-entry.md b/src/modal/demos/enUS/index.demo-entry.md
@@ -19,17 +19,18 @@ transform-origin
 
 ### Modal Props
 
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| display-directive | `'if' \| 'show'` | `'if'` | Use which directive to control the rendering of modal body. |
-| mask-closable | `boolean` | `true` | Whether to emit `hide` event when click mask. |
-| preset | `'dialog' \| 'card'` | `undefined` | The preset of `n-modal`. |
-| show | `boolean` | `false` | Whether to show modal. |
-| to | `string \| HTMLElement` | `body` | Container node of the modal content. |
-| transform-origin | `'mouse' \| 'center'` | `'mouse'` | The transform origin of the modal's display animation. |
-| on-update:show | `(value: boolean) => void` | `undefined` | Callback when modal's display status is changed. |
-| on-after-enter | `() => void` | `undefined` | Callback after modal is opened. |
-| on-after-leave | `() => void` | `undefined` | Callback after modal is closed. |
+| Name | Type | Default | Description | Version |
+| --- | --- | --- | --- | --- |
+| display-directive | `'if' \| 'show'` | `'if'` | Use which directive to control the rendering of modal body. |  |
+| mask-closable | `boolean` | `true` | Whether to emit `hide` event when click mask. |  |
+| preset | `'dialog' \| 'card'` | `undefined` | The preset of `n-modal`. |  |
+| show | `boolean` | `false` | Whether to show modal. |  |
+| to | `string \| HTMLElement` | `body` | Container node of the modal content. |  |
+| transform-origin | `'mouse' \| 'center'` | `'mouse'` | The transform origin of the modal's display animation. |  |
+| z-index | `number` | `undefined` | Z index of the modal. | NEXT_VERSION |
+| on-update:show | `(value: boolean) => void` | `undefined` | Callback when modal's display status is changed. |  |
+| on-after-enter | `() => void` | `undefined` | Callback after modal is opened. |  |
+| on-after-leave | `() => void` | `undefined` | Callback after modal is closed. |  |
 
 ### Modal with Preset Card Props
 

diff --git a/src/modal/demos/zhCN/index.demo-entry.md b/src/modal/demos/zhCN/index.demo-entry.md
@@ -32,17 +32,18 @@ dark-10-debug
 
 ### Modal Props
 
-| 名称 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| display-directive | `'if' \| 'show'` | `'if'` | 使用何种指令控制模态框主体的条件渲染 |
-| mask-closable | `boolean` | `true` | 点击遮罩时是否发出 `update:show` 事件 |
-| preset | `'dialog' \| 'card'` | `undefined` | 模态框使用何种预设 |
-| show | `boolean` | `false` | 是否展示 Modal |
-| to | `string \| HTMLElement` | `body` | Modal 的挂载位置 |
-| transform-origin | `'mouse' \| 'center'` | `'mouse'` | 模态框动画出现的位置 |
-| on-update:show | `(value: boolean) => void` | `undefined` | 模态框更新是否展示状态的回调 |
-| on-after-enter | `() => void` | `undefined` | Modal 出现后的回调 |
-| on-after-leave | `() => void` | `undefined` | Modal 关闭后的回调 |
+| 名称 | 类型 | 默认值 | 说明 | 版本 |
+| --- | --- | --- | --- | --- |
+| display-directive | `'if' \| 'show'` | `'if'` | 使用何种指令控制模态框主体的条件渲染 |  |
+| mask-closable | `boolean` | `true` | 点击遮罩时是否发出 `update:show` 事件 |  |
+| preset | `'dialog' \| 'card'` | `undefined` | 模态框使用何种预设 |  |
+| show | `boolean` | `false` | 是否展示 Modal |  |
+| to | `string \| HTMLElement` | `body` | Modal 的挂载位置 |  |
+| transform-origin | `'mouse' \| 'center'` | `'mouse'` | 模态框动画出现的位置 |  |
+| z-index | `number` | `undefined` | Modal 的 z-index | NEXT_VERSION |
+| on-update:show | `(value: boolean) => void` | `undefined` | 模态框更新是否展示状态的回调 |  |
+| on-after-enter | `() => void` | `undefined` | Modal 出现后的回调 |  |
+| on-after-leave | `() => void` | `undefined` | Modal 关闭后的回调 |  |
 
 ### Modal（Card 预设）Props
 

diff --git a/src/modal/src/Modal.tsx b/src/modal/src/Modal.tsx
@@ -47,6 +47,7 @@ const modalProps = {
     type: String as PropType<'center' | 'mouse'>,
     default: 'mouse'
   },
+  zIndex: Number,
   ...presetProps,
   // events
   'onUpdate:show': [Function, Array] as PropType<
@@ -295,6 +296,7 @@ export default defineComponent({
                 [
                   zindexable,
                   {
+                    zIndex: this.zIndex,
                     enabled: this.show
                   }
                 ]