mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-02-17 13:20:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(space): vnode reuse problem caused by filtering out comment vnodes of slot, closes #5136 (#5192)

Browse Source 
Co-authored-by: 07akioni <07akioni2@gmail.com>
This commit is contained in:
吉仔 2023-12-18 19:15:26 +08:00 committed by GitHub
parent dda96f3d06
commit c6667d0945
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 54 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.en-US.md
View File

@ -2,6 +2,10 @@
## NEXT_VERSION
### Fixes
- Fix n-space vnode reuse problem caused by filtering out comment nodes of slot, closes [#5136](https://github.com/tusen-ai/naive-ui/issues/5136).
### Features
- `n-space` adds `reverse` prop.

6
CHANGELOG.zh-CN.md
View File

@ -2,6 +2,12 @@
## NEXT_VERSION
### Fixes
- 修复 `n-space` 插槽过滤了注释节点导致节点复用问题，关闭 [#5136](https://github.com/tusen-ai/naive-ui/issues/5136)
### Features
- `n-space` 新增 `reverse` 属性
- `n-input` 新增 `clear` 方法，关闭[#5423](https://github.com/tusen-ai/naive-ui/issues/5423)

3
src/_utils/vue/flatten.ts
View File

@ -30,7 +30,8 @@ export function flatten (
flatten(vNode.children, filterCommentNode, result)
}
// rawSlot
} else if (vNode.type !== Comment) {
} else {
if (vNode.type === Comment && filterCommentNode) return
result.push(vNode)
}
})

77
src/space/src/Space.tsx
View File

@ -2,6 +2,7 @@ import {
h,
defineComponent,
computed,
Comment,
type PropType,
type CSSProperties
} from 'vue'
@ -127,7 +128,7 @@ export default defineComponent({
wrapItem,
internalUseGap
} = this
const children = flatten(getSlot(this))
const children = flatten(getSlot(this), false)
if (!children.length) return null
const horizontalMargin = `${margin.horizontal}px`
const semiHorizontalMargin = `${margin.horizontal / 2}px`
@ -179,42 +180,48 @@ export default defineComponent({
}
: rtlEnabled
? {
marginLeft: isJustifySpace
? justify === 'space-between' && index === lastIndex
? ''
: semiHorizontalMargin
: index !== lastIndex
? horizontalMargin
: '',
marginRight: isJustifySpace
? justify === 'space-between' && index === 0
? ''
: semiHorizontalMargin
: '',
paddingTop: semiVerticalMargin,
paddingBottom: semiVerticalMargin
marginBottom:
index !== lastIndex ? verticalMargin : ''
}
: {
marginRight: isJustifySpace
? justify === 'space-between' && index === lastIndex
? ''
: semiHorizontalMargin
: index !== lastIndex
? horizontalMargin
: rtlEnabled
? {
marginLeft: isJustifySpace
? justify === 'space-between' && index === lastIndex
? ''
: semiHorizontalMargin
: index !== lastIndex
? horizontalMargin
: '',
marginRight: isJustifySpace
? justify === 'space-between' && index === 0
? ''
: semiHorizontalMargin
: '',
marginLeft: isJustifySpace
? justify === 'space-between' && index === 0
? ''
: semiHorizontalMargin
: '',
paddingTop: semiVerticalMargin,
paddingBottom: semiVerticalMargin
}
]}
>
{child}
</div>
))}
paddingTop: semiVerticalMargin,
paddingBottom: semiVerticalMargin
}
: {
marginRight: isJustifySpace
? justify === 'space-between' && index === lastIndex
? ''
: semiHorizontalMargin
: index !== lastIndex
? horizontalMargin
: '',
marginLeft: isJustifySpace
? justify === 'space-between' && index === 0
? ''
: semiHorizontalMargin
: '',
paddingTop: semiVerticalMargin,
paddingBottom: semiVerticalMargin
}
]}
>
{child}
</div>
)
)}
</div>
)
}