feat(design-config): design-config adds arbitrary attribute features of global configuration components (#3419)

* feat(design-config): design-config添加全局配置组件任意属性特性

* test: 修复测试用例报错

* feat(render-component): 在renderComponent中添加customDesignProps参数以支持自定义设计属性

* fix(render-component): 优化renderComponent中的props合并逻辑，确保customDesignProps正确应用

* docs(config-provider): 更新描述信息，增加全局配置组件任意属性支持的说明

Author: zzcr

examples/sites/demos/pc/app/config-provider/base-composition-api.vue

@@ -53,6 +53,9 @@ const design = {
       icons: {
         warning: iconWarningTriangle()
       },
+      props: {
+        center: true
+      },
       /**
        *
        * @param {*} props 组件属性集合

examples/sites/demos/pc/app/config-provider/base.vue

@@ -60,6 +60,9 @@ export default {
             }
           },
           Alert: {
+            props: {
+              center: true
+            },
             icons: {
               warning: iconWarningTriangle()
             },

examples/sites/demos/pc/app/config-provider/basic.spec.ts

@@ -4,8 +4,11 @@ test('测试自定义事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('config-provider#base')
 
-  // 验证自定义方法
   const demo = page.locator('#base')
+  // 验证文字居中
+  await expect(demo.locator('.tiny-alert')).toHaveCSS('justify-content', 'center')
+
+  // 验证自定义方法
   await demo.locator('.tiny-config-provider .tiny-alert > .tiny-alert__close').click()
   await page.waitForTimeout(500)
   await expect(page.locator('.tiny-modal > .tiny-modal__box').nth(1)).toHaveText('触发自定方法')

examples/sites/demos/pc/app/config-provider/webdoc/config-provider.js

@@ -12,9 +12,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '可通过<code> design </code>属性设置自定义不同设计规范的图标和逻辑，例如：全局配置 Form 表单组件的必填星号是否默认显示、Button 组件的点击后的禁用时间和是否默认圆角。',
+          '通过 <code>design</code> 属性可以自定义不同设计规范的图标和逻辑。从 3.23.0 版本开始，支持全局配置组件的任意 <code>props</code> 属性（仅支持双层组件），例如：可以全局配置 Form 组件必填项星号的默认显示状态、Button 组件的点击防抖时间以及是否默认显示圆角等。',
         'en-US':
-          'Icons and logic for different design specifications can be customized through the <code>design</code> attribute configuration.'
+          'You can use the <code> design </code> property to set custom icons and logic for different design specifications, starting from version 3.23.0, the global configuration component (only supports double-layer components) supports the function of any <code> props </code> attribute, for example: the default display of the required star of the global configuration Form form component, the disabled time after the click of the Button component, and whether the default roundness is enabled.'
       },
       codeFiles: ['base.vue']
     },

packages/vue-common/src/adapter/vue2.7/index.ts

@@ -26,18 +26,32 @@ export const renderComponent = ({
   view = null as any,
   component = null as any,
   props,
+  customDesignProps,
   context: { attrs, listeners: on, slots },
   extend = {}
 }) => {
   return () =>
     hooks.h(
       (view && view.value) || component,
-      Object.assign({ props, attrs, [extend.isSvg ? 'nativeOn' : 'on']: on, scopedSlots: { ...slots } }, extend)
+      Object.assign(
+        {
+          props: { ...props, ...customDesignProps },
+          attrs,
+          [extend.isSvg ? 'nativeOn' : 'on']: on,
+          scopedSlots: { ...slots }
+        },
+        extend
+      )
     )
 }
 
 export const rootConfig = () => hooks.getCurrentInstance()?.proxy.$root
 
+export const getCustomProps = () => {
+  const instance = hooks.getCurrentInstance()?.proxy
+  return instance?.$options?.propsData || {}
+}
+
 export const getComponentName = () => {
   // 此处组件最多为两层组件，所以对多获取到父级组件即可
   const instance = hooks.getCurrentInstance()

packages/vue-common/src/adapter/vue2/index.ts

@@ -34,21 +34,33 @@ export const renderComponent = ({
   view = null as any,
   component = null as any,
   props,
+  customDesignProps,
   context: { attrs, listeners: on, slots },
   extend = {}
 }) => {
   return () =>
     hooks.h(
       (view && view.value) || component,
       Object.assign(
-        { props, attrs, [extend.isSvg ? 'nativeOn' : 'on']: on, ref: 'modeTemplate', scopedSlots: { ...slots } },
+        {
+          props: { ...props, ...customDesignProps },
+          attrs,
+          [extend.isSvg ? 'nativeOn' : 'on']: on,
+          ref: 'modeTemplate',
+          scopedSlots: { ...slots }
+        },
         extend
       )
     )
 }
 
 export const rootConfig = () => hooks.getCurrentInstance()?.proxy.$root
 
+export const getCustomProps = () => {
+  const instance = hooks.getCurrentInstance()?.proxy
+  return instance?.$options?.propsData || {}
+}
+
 export const getComponentName = () => {
   // 此处组件最多为两层组件，所以对多获取到父级组件即可
   const instance = hooks.getCurrentInstance()

packages/vue-common/src/adapter/vue3/index.ts

@@ -26,10 +26,16 @@ export const renderComponent = ({
   view = undefined as any,
   component = undefined as any,
   props,
+  customDesignProps,
   context: { attrs, slots },
   extend = {}
 }) => {
-  return () => hooks.h((view && view.value) || component, { ref: 'modeTemplate', ...props, ...attrs, ...extend }, slots)
+  return () =>
+    hooks.h(
+      (view && view.value) || component,
+      { ref: 'modeTemplate', ...props, ...attrs, ...customDesignProps, ...extend },
+      slots
+    )
 }
 
 export const rootConfig = (context) => {
@@ -38,6 +44,11 @@ export const rootConfig = (context) => {
   return instance?.appContext.config.globalProperties
 }
 
+export const getCustomProps = () => {
+  const instance = hooks.getCurrentInstance()
+  return instance?.vnode?.props || {}
+}
+
 export const getComponentName = () => {
   // 此处组件最多为两层组件，所以对多获取到父级组件即可
   const instance = hooks.getCurrentInstance()

packages/vue-common/src/index.ts

@@ -16,6 +16,7 @@ import {
   tools,
   useRouter,
   getComponentName,
+  getCustomProps,
   isVnode
 } from './adapter'
 import { t } from '@opentiny/vue-locale'
@@ -122,19 +123,6 @@ const resolveChartTheme = (props, context) => {
   return tinyChartTheme
 }
 
-export const $setup = ({ props, context, template, extend = {} }) => {
-  const mode = resolveMode(props, context)
-  const view = hooks.computed(() => {
-    if (typeof props.tiny_template !== 'undefined') return props.tiny_template
-
-    const component = template(mode, props)
-
-    return typeof component === 'function' ? defineAsyncComponent(component) : component
-  })
-
-  return renderComponent({ view, props, context, extend })
-}
-
 // 提供给没有renderless层的组件使用（比如TinyVuePlus组件）
 export const design = {
   configKey: Symbol('designConfigKey'),
@@ -168,17 +156,55 @@ export const customDesignConfig: CustomDesignConfig = {
   twMerge: () => ''
 }
 
-export const mergeClass = (...cssClasses) => customDesignConfig.twMerge(stringifyCssClass(cssClasses))
-
-export const setup = ({ props, context, renderless, api, extendOptions = {}, mono = false, classes = {} }) => {
-  const render = typeof props.tiny_renderless === 'function' ? props.tiny_renderless : renderless
-
+const getDesignConfig = () => {
   // 获取组件级配置和全局配置（inject需要带有默认值，否则控制台会报警告）
   let globalDesignConfig: DesignConfig = customDesignConfig.designConfig || hooks.inject(design.configKey, {})
+
   // globalDesignConfig 可能是响应式对象，比如 computed
   globalDesignConfig = globalDesignConfig?.value || globalDesignConfig || {}
   const designConfig = globalDesignConfig?.components?.[getComponentName().replace($prefix, '')]
+  return {
+    designConfig,
+    globalDesignConfig
+  }
+}
+
+export const $setup = ({ props: propData, context, template, extend = {} }) => {
+  const mode = resolveMode(propData, context)
+  const view = hooks.computed(() => {
+    if (typeof propData.tiny_template !== 'undefined') return propData.tiny_template
+
+    const component = template(mode, propData)
+
+    return typeof component === 'function' ? defineAsyncComponent(component) : component
+  })
+
+  const { designConfig } = getDesignConfig()
+  const customDesignProps = {}
+
+  const designProps = designConfig?.props
+
+  if (designProps) {
+    // 获取用户传递的props
+    const customProps = getCustomProps()
+
+    Object.keys(designProps).forEach((key) => {
+      // 用户没有配置的属性才进行覆盖
+      if (!Object.prototype.hasOwnProperty.call(customProps, key)) {
+        customDesignProps[key] = designProps[key]
+      }
+    })
+  }
+
+  return renderComponent({ view, props: propData, customDesignProps, context, extend })
+}
+
+export const mergeClass = (...cssClasses) => customDesignConfig.twMerge(stringifyCssClass(cssClasses))
+
+export const setup = ({ props, context, renderless, api, extendOptions = {}, mono = false, classes = {} }) => {
+  const render = typeof props.tiny_renderless === 'function' ? props.tiny_renderless : renderless
 
+  const { designConfig, globalDesignConfig } = getDesignConfig()
   const utils = {
     $prefix,
     t,

packages/vue/package.json

@@ -237,4 +237,4 @@
     "build": "pnpm -w build:ui",
     "postversion": "pnpm build"
   }
-}
+}