opentiny
✨ [Feature]: 组件增加HOC，实现支持在design Config中全局配置默认props
What problem does this feature solve
1、做主题开发的过程中，部分交互需要调整默认配置来实现
2、现有版本中已经通过designConfig开放部分配置选项，但目前实现方式为在组件中硬编码来适配，未做适配的属性就无法支持配置
3、如果能够配置所有的 props 选项，主题定制会更加灵活
What does the proposed API look like
1、增加 hoc 组件
import { type SetupContext, ref } from 'vue'
import { design, hooks, $prefix } from '../../index'
import { getComponentName } from '../index'
export default function DesignConfigPropsHOC() {
return (BaseComponent: any) => {
return {
...BaseComponent,
props: {},
setup(props, { attrs, slots, expose }: SetupContext) {
const innerRef = ref()
// 获取组件级配置和全局配置（inject需要带有默认值，否则控制台会报警告）
let globalDesignConfig: DesignConfig = hooks.inject(design.configKey, {})
// globalDesignConfig 可能是响应式对象，比如 computed
globalDesignConfig = globalDesignConfig?.value || globalDesignConfig || {}
const designConfig = globalDesignConfig?.components?.[getComponentName().replace($prefix, '')]
const designConfigProps = designConfig?.props || {}
const mergedProps = { ...designConfigProps, ...attrs }
expose(
new Proxy(
{},
{
get(_target, key) {
return innerRef.value?.[key]
},
has(_target, key) {
return innerRef.value?.[key]
}
}
)
)
return () => {
return (
<BaseComponent {...mergedProps} {...attrs} ref={innerRef}>
{slots}
</BaseComponent>
)
}
}
}
}
}
2、将组件用 HOC 包裹
3、在对应 designConfig 中配置默认props，如base-select中配置默认不显示全部选项
4、实现 base-select默认不展示全部选项
What is your project name
无
Bot detected the issue body's language is not English, translate it automatically.
Title: ✨ [Feature]: The component adds HOC, and implements the implementation of the global configuration of default props in design Config
@hashiqi12138 这是一个很好的思路👍，对于现有组件的改造是不是就只需要给组件包裹一层 DesignConfigPropsHOC 函数，对于用户而言只需要像之前一样在 designConfig 中配置 props 就行了。如果可以的话可以提交一个PR，以一个组件为例，看下整体效果如何，效果好的话可以逐步推广到其他组件🤝
Bot detected the issue body's language is not English, translate it automatically.
@hashiqi12138 This is a good idea 👍. For the transformation of existing components, do you only need to wrap the components with a layer of DesignConfigPropsHOC function, and for users, you only need to configure props in designConfig like before. If possible, you can submit a PR. Take a component as an example to see how the overall effect is. If the effect is good, you can gradually promote it to other components🤝
Bot detected the issue body's language is not English, translate it automatically.
Yes, I'll find some time to organize and submit this week or next week