fix(grid-item): may not display correctly if v-show is used, closes #…

…3123

CHANGELOG.en-US.md

@@ -7,10 +7,10 @@
 - Fix `n-input-group-label`'s content is abnormal in `n-drawer-content`, closes [#3115](https://github.com/TuSimple/naive-ui/issues/3115).
 - Fix `n-back-top` has log warnings of console when use `show` prop, closes [#3122](https://github.com/TuSimple/naive-ui/issues/3122).
 - `volar.d.ts` remove `[key: string]: any` to solve the code prompt problem in `vscode`.
+- Fix `n-grid-item` may not display correctly if `v-show` is used, closes [#3123](https://github.com/TuSimple/naive-ui/issues/3123).
 
 ### Feats
 
-
 ## 2.30.4
 
 ### Fixes

CHANGELOG.zh-CN.md

@@ -6,11 +6,11 @@
 
 - 修复 `n-input-group-label` 的内容在 `n-drawer-content` 嵌套中异常, 关闭 [#3115](https://github.com/TuSimple/naive-ui/issues/3115)
 - 修复 `n-back-top` 在使用 `show` 时控制台报警告, 关闭 [#3122](https://github.com/TuSimple/naive-ui/issues/3122)
-- `volar.d.ts` 去除 `[key: string]: any` ,解决 `vscode` 中代码提示问题
+- `volar.d.ts` 去除 `[key: string]: any`，解决 `vscode` 中代码提示问题
+- 修复 `n-grid-item` 使用 `v-show` 可能存在显示状态不正确的问题，关闭 [#3123](https://github.com/TuSimple/naive-ui/issues/3123)
 
 ### Feats
 
-
 ## 2.30.4
 
 ### Fixes

src/_utils/index.ts

@@ -15,7 +15,8 @@ export {
   resolveSlotWithProps,
   resolveWrappedSlot,
   isSlotEmpty,
-  mergeEventHandlers
+  mergeEventHandlers,
+  isNodeVShowFalse
 } from './vue'
 export type { MaybeArray } from './vue'
 export {

src/_utils/vue/index.ts

@@ -18,3 +18,4 @@ export {
 } from './resolve-slot'
 export type { MaybeArray } from './call'
 export { mergeEventHandlers } from './merge-handlers'
+export { isNodeVShowFalse } from './is-node-v-show-false'

src/_utils/vue/is-node-v-show-false.ts

@@ -0,0 +1,6 @@
+import { VNode, vShow } from 'vue'
+
+export function isNodeVShowFalse (vNode: VNode): boolean {
+  const showDir = vNode.dirs?.find(({ dir }) => dir === vShow)
+  return !!(showDir && showDir.value === false)
+}

src/back-top/src/BackTop.tsx

@@ -102,9 +102,12 @@ export default defineComponent({
     const scrollTopRef = ref<number | null>(null)
     const uncontrolledShowRef = ref(false)
     watchEffect(() => {
-      if (scrollTopRef.value === null) uncontrolledShowRef.value = false
-      uncontrolledShowRef.value =
-        (scrollTopRef.value as number) >= props.visibilityHeight
+      const { value: scrollTop } = scrollTopRef
+      if (scrollTop === null) {
+        uncontrolledShowRef.value = false
+        return
+      }
+      uncontrolledShowRef.value = scrollTop >= props.visibilityHeight
     })
     const DomInfoReadyRef = ref(false)
     watch(uncontrolledShowRef, (value) => {

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

@@ -5,15 +5,11 @@
 基于 CSS Grid，响应式，远离 IE。
 
 ```demo
-basic.vue
-gap.vue
-offset.vue
-responsive.vue
-responsive-item.vue
-collapse.vue
-grid-basic-debug.vue
+vshow-debug.vue
 ```
 
+basic.vue gap.vue offset.vue responsive.vue responsive-item.vue collapse.vue grid-basic-debug.vue
+
 ## API
 
 ### Grid Props

src/grid/demos/zhCN/vshow-debug.demo.vue

@@ -0,0 +1,71 @@
+<markdown>
+# Vshow debug
+</markdown>
+
+<template>
+  <n-form :model="formValue" label-placement="left" :style="{ margin: '30px' }">
+    <n-grid :col="24" x-gap="24">
+      <n-form-item-gi :span="8" label="选择框">
+        <n-select
+          v-model:value="formValue.select"
+          :style="{ width: '100%' }"
+          :options="selectOptions"
+          clearable
+        />
+      </n-form-item-gi>
+      <!-- 当选择框的值为2时显示，通过v-show控制是否显示 -->
+      <n-form-item-gi v-show="formValue.select === 2" :span="8" label="输入框1">
+        <n-input value="我只有在选择框的值为2时才应该显示！" />
+      </n-form-item-gi>
+      <!-- 当v-show作用在input中就无此问题 -->
+      <!-- <n-form-item-gi :span="8" label="输入框2">
+        <n-input value="我只有在选择框的值为2时才应该显示！" v-show="formValue.select === 2"/>
+      </n-form-item-gi> -->
+    </n-grid>
+  </n-form>
+  <!-- 问题总结 -->
+  <n-h2
+    prefix="bar"
+    align-text
+    type="info"
+    :style="{ margin: '30px' }"
+  >期望：当选择框值为2时，显示输入框</n-h2>
+  <n-h2
+    prefix="bar"
+    align-text
+    type="error"
+    :style="{ margin: '30px' }"
+  >问题：当选择框值从null变为1时，依然显示了输入框，不符合预期</n-h2>
+  <n-h2
+    prefix="bar"
+    align-text
+    type="error"
+    :style="{ margin: '30px' }"
+  >问题：当选择框值从1变为null时，依然显示了输入框，不符合预期</n-h2>
+</template>
+
+<script lang="ts">
+import { reactive } from 'vue'
+
+export default {
+  setup () {
+    // 表单值，默认选择框的值为null
+    const formValue = reactive({ select: null })
+    // 选择框选项
+    const selectOptions = [
+      {
+        label: '值为1',
+        value: 1
+      },
+      {
+        label: '值为2',
+        value: 2
+      }
+    ]
+    return {
+      formValue,
+      selectOptions
+    }
+  }
+}
+</script>

src/grid/src/Grid.tsx

@@ -17,7 +17,12 @@ import { VResizeObserver, VResizeObserverOnResize } from 'vueuc'
 import { pxfy, parseResponsivePropValue, beforeNextFrameOnce } from 'seemly'
 import { defaultBreakpoints } from '../../config-provider/src/config'
 import { useConfig } from '../../_mixins'
-import { getSlot, flatten, ExtractPublicPropTypes } from '../../_utils'
+import {
+  getSlot,
+  flatten,
+  ExtractPublicPropTypes,
+  isNodeVShowFalse
+} from '../../_utils'
 import { defaultSpan, gridInjectionKey } from './config'
 
 const defaultCols = 24
@@ -150,6 +155,21 @@ export default defineComponent({
 
       rawChildren.forEach((child) => {
         if ((child?.type as any)?.__GRID_ITEM__ !== true) return
+
+        if (isNodeVShowFalse(child)) {
+          const clonedNode = cloneVNode(child)
+          if (clonedNode.props) {
+            clonedNode.props.privateShow = false
+          } else {
+            clonedNode.props = { pirvateShow: false }
+          }
+          childrenAndRawSpan.push({
+            child: clonedNode,
+            rawChildSpan: 0
+          })
+          return
+        }
+
         const clonedChild = cloneVNode(child)
 
         const rawChildSpan = Number(
@@ -177,7 +197,8 @@ export default defineComponent({
           maybeSuffixNode.props.privateSpan = suffixSpan
           maybeSuffixNode.props.privateColStart =
             responsiveCols + 1 - suffixSpan
-          maybeSuffixNode.props.privateShow = true
+          maybeSuffixNode.props.privateShow =
+            maybeSuffixNode.props.privateShow ?? true
         }
       }