fix(comp:*): via getter to manage overlayZIndex (#1341)

.eslintrc.js

@@ -148,7 +148,7 @@ module.exports = {
     'vue/max-attributes-per-line': 'off',
     'vue/multi-word-component-names': 'off',
     'vue/v-on-event-hyphenation': 'off',
-    'vue/require-default-prop': 'error',
+    'vue/require-default-prop': 'off',
     'vue/require-explicit-emits': 'error',
 
     'jsdoc/newline-after-description': 1,

packages/components/_private/overlay/src/Overlay.tsx

@@ -5,9 +5,6 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import type { OverlayProps } from './types'
-import type { PopperElement, PopperEvents, PopperOptions } from '@idux/cdk/popper'
-
 import {
   type ComputedRef,
   type Ref,
@@ -26,13 +23,13 @@ import {
 } from 'vue'
 
 import { vClickOutside } from '@idux/cdk/click-outside'
-import { usePopper } from '@idux/cdk/popper'
+import { type PopperElement, type PopperEvents, type PopperOptions, usePopper } from '@idux/cdk/popper'
 import { CdkPortal } from '@idux/cdk/portal'
 import { Logger, callEmit, convertElement, getFirstValidNode } from '@idux/cdk/utils'
 import { useGlobalConfig } from '@idux/components/config'
 import { useZIndex } from '@idux/components/utils'
 
-import { overlayProps } from './types'
+import { type OverlayProps, overlayProps } from './types'
 
 export default defineComponent({
   name: 'ɵOverlay',
@@ -60,7 +57,7 @@ export default defineComponent({
     } = usePopper({ ...popperOptions.value, visible: props.visible })
 
     const { destroy: popperDestroy } = usePopperInit(props, initialize, destroy)
-    const { currentZIndex } = useZIndex(toRef(props, 'zIndex'), toRef(common, 'overlayZIndex'), visibility)
+    const currentZIndex = useZIndex(toRef(props, 'zIndex'), toRef(common, 'overlayZIndex'), visibility)
     const mergedContainer = computed(() => {
       return () => props.container(convertElement(triggerRef)!)
     })
@@ -225,7 +222,7 @@ function renderContent(
   const prefixCls = mergedPrefixCls.value
   const { triggerId } = props
   const overlayId = triggerId != null ? `overlay-${triggerId}` : undefined
-  const style = currentZIndex.value ? `z-index: ${currentZIndex.value}` : undefined
+  const style = `z-index: ${currentZIndex.value}`
   const overlay = (
     <div ref={popperRef} id={overlayId} class={prefixCls} style={style} {...popperEvents.value} {...attrs}>
       {contentNode}

packages/components/config/src/types.ts

@@ -110,7 +110,7 @@ export type GlobalConfigKey = keyof GlobalConfig
 export interface CommonConfig {
   prefixCls: string
   overlayContainer?: OverlayContainerType
-  overlayZIndex: number
+  overlayZIndex: number | (() => number)
   theme: 'default' | 'seer'
 }
 

packages/components/drawer/src/Drawer.tsx

@@ -44,7 +44,7 @@ export default defineComponent({
     const mask = computed(() => props.mask ?? config.mask)
 
     const { visible, setVisible, animatedVisible, mergedVisible } = useVisible(props)
-    const { currentZIndex } = useZIndex(toRef(props, 'zIndex'), toRef(common, 'overlayZIndex'), visible)
+    const currentZIndex = useZIndex(toRef(props, 'zIndex'), toRef(common, 'overlayZIndex'), visible)
 
     const { open, close } = useTrigger(props, setVisible)
     const { level, levelAction, push, pull } = useLevel(visible)

packages/components/image/src/ImageViewer.tsx

@@ -32,7 +32,7 @@ export default defineComponent({
     const mergedPortalTarget = usePortalTarget(props, config, common, mergedPrefixCls)
 
     const [visible, setVisible] = useControlledProp(props, 'visible', false)
-    const { currentZIndex } = useZIndex(toRef(props, 'zIndex'), toRef(common, 'overlayZIndex'), visible)
+    const currentZIndex = useZIndex(toRef(props, 'zIndex'), toRef(common, 'overlayZIndex'), visible)
 
     const zoom = computed(() => props.zoom ?? config.zoom)
     const loop = computed(() => props.loop ?? config.loop)

packages/components/modal/src/Modal.tsx

@@ -42,7 +42,7 @@ export default defineComponent({
 
     const mask = computed(() => props.mask ?? config.mask)
     const { visible, setVisible, animatedVisible, mergedVisible } = useVisible(props)
-    const { currentZIndex } = useZIndex(toRef(props, 'zIndex'), toRef(common, 'overlayZIndex'), visible)
+    const currentZIndex = useZIndex(toRef(props, 'zIndex'), toRef(common, 'overlayZIndex'), visible)
 
     const { cancelLoading, okLoading, open, close, cancel, ok } = useTrigger(props, setVisible)
 

packages/components/tooltip/src/useTooltipOverlay.ts

@@ -34,7 +34,7 @@ export function useTooltipOverlay(
   const mergedOverlayContainer = useOverlayContainer(props, config, common, mergedPrefixCls)
 
   const [visible, setVisible] = useControlledProp(props, 'visible', false)
-  const { currentZIndex } = useZIndex(toRef(props, 'zIndex'), toRef(common, 'overlayZIndex'), visible)
+  const currentZIndex = useZIndex(toRef(props, 'zIndex'), toRef(common, 'overlayZIndex'), visible)
 
   onDeactivated(() => {
     if (visible.value && props.closeOnDeactivated) {

packages/components/utils/__test__/zIndex.spec.ts

@@ -11,7 +11,7 @@ describe('zIndex.ts', () => {
     },
     setup(props) {
       const visible = toRef(props, 'visible')
-      const { currentZIndex } = useZIndex(toRef(props, 'zIndex'), ref(3000), visible)
+      const currentZIndex = useZIndex(toRef(props, 'zIndex'), ref(3000), visible)
       const style = computed(() => ({ zIndex: currentZIndex.value }))
 
       return {

packages/components/utils/src/zIndex.ts

@@ -7,37 +7,36 @@
 
 import { type ComputedRef, type Ref, computed, ref, watch } from 'vue'
 
-import { isNil } from 'lodash-es'
+import { isFunction } from 'lodash-es'
 
-const zIndexCount = ref(0)
+let zIndexCount = 0
 
 type UseZIndex = (
   controlZIndex: Ref<number | undefined>,
-  commonZIndex: Ref<number>,
+  configZIndex: Ref<number | (() => number)>,
   visible: Ref<boolean>,
-) => {
-  currentZIndex: ComputedRef<number>
-  nextZIndex: () => number
-}
-export const useZIndex: UseZIndex = (controlZIndex, commonZIndex, visible) => {
-  const innerZIndex = ref(commonZIndex.value + zIndexCount.value)
-  const currentZIndex = computed(() => controlZIndex.value ?? innerZIndex.value)
-  const nextZIndex = () => {
-    if (isNil(controlZIndex.value)) {
-      innerZIndex.value = commonZIndex.value + zIndexCount.value
-      zIndexCount.value++
+) => ComputedRef<number>
+
+export const useZIndex: UseZIndex = (controlZIndex, configZIndex, visible) => {
+  const getZIndex = () => {
+    const zIndex = configZIndex.value
+    if (isFunction(zIndex)) {
+      return zIndex()
     }
-    return currentZIndex.value
+    return zIndex + zIndexCount++
   }
 
+  const innerZIndex = ref(0)
+
   watch(
     visible,
     newVisible => {
       if (newVisible) {
-        nextZIndex()
+        innerZIndex.value = getZIndex()
       }
     },
     { immediate: true },
   )
-  return { currentZIndex, nextZIndex }
+
+  return computed(() => controlZIndex.value ?? innerZIndex.value)
 }

packages/pro/search/src/ProSearch.tsx

@@ -63,7 +63,9 @@ export default defineComponent({
       searchStateContext,
       activeSegmentContext,
     )
-    const { currentZIndex } = useZIndex(toRef(props, 'zIndex'), toRef(componentCommon, 'overlayZIndex'), ref(true))
+
+    //TODO: fix ref(true)
+    const currentZIndex = useZIndex(toRef(props, 'zIndex'), toRef(componentCommon, 'overlayZIndex'), ref(true))
 
     const { initSearchStates, clearSearchState } = searchStateContext
     const { activeSegment } = activeSegmentContext

packages/site/src/docs/Faq.zh.md

@@ -32,6 +32,18 @@ order: 10
 例如你可以设置 `<IxSelect :overlayContainer='trigger => trigger.parentElement' />` 在 Popover 中渲染下拉框组件。  
 你也可以通过在全局配置中设置来进行全局覆盖，例如：`useGlobalConfig('common', { overlayContainer: element => element?.parentElement })`，需要特别注意的是，这里的 `element` 可能为空，因为该配置对于 `Modal, Drawer` 等组件同样生效，此类组件不存在 `trigger` 元素。
 
+## 如何自定义控制浮层的 `z-index`? 通常在与其他组件库混用，或者使用了微前端框架的情况下需要。
+
+首先我们大多数浮层组件都提供了 `zIndex` 的配置（如果没有，可以给我们提供 issue 或者直接 PR），你可以精确的控制它们。  
+如果你觉得控制每一个组件的 `zIndex` 比较麻烦，我们也提供了全局配置以便于你进行全局统一管理，例如：
+
+```ts
+const initZIndex = 1000
+const indexCount = 0
+const customGetZIndex = () => initZIndex + indexCount++
+useGlobalConfig('common', { overlayZIndex: customGetZIndex })
+```
+
 ## 图标不显示？如何更新图标？
 
 请务必花几分钟时间仔细阅读[快速上手](/docs/getting-started/zh) 和 [图标的动态加载与静态加载](/components/icon/zh?tab=api#FAQ) 进行一些必要的配置。