fix: use cloneVNode when altering props in render functions

Resolves #252

https://vuejs.org/api/render-function.html#clonevnode
This commit is contained in:
Benjamin Canac
2023-06-05 11:17:28 +02:00
parent af65683123
commit 5e50eb9eb8
3 changed files with 27 additions and 21 deletions

View File

@@ -1,4 +1,4 @@
import { h, computed, defineComponent } from 'vue'
import { h, cloneVNode, computed, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { defu } from 'defu'
import { getSlotsChildren } from '../../utils'
@@ -44,28 +44,30 @@ export default defineComponent({
}[ui.value.rounded]))
const clones = computed(() => children.value.map((node, index) => {
const vProps: any = {}
if (props.size) {
node.props.size = props.size
vProps.size = props.size
}
node.props.class = node.props.class || ''
node.props.class += ' !shadow-none'
node.props.ui = node.props.ui || {}
node.props.ui.rounded = ''
vProps.class = node.props.class || ''
vProps.class += ' !shadow-none'
vProps.ui = node.props.ui || {}
vProps.ui.rounded = ''
if (index === 0) {
node.props.ui.rounded = rounded.value.left
vProps.ui.rounded = rounded.value.left
}
if (index > 0) {
node.props.class += ' -ml-px'
vProps.class += ' -ml-px'
}
if (index === children.value.length - 1) {
node.props.ui.rounded = rounded.value.right
vProps.ui.rounded = rounded.value.right
}
return node
return cloneVNode(node, vProps)
}))
return () => h('div', { class: [ui.value.wrapper, ui.value.rounded, ui.value.shadow] }, clones.value)