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

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

@@ -10,6 +10,9 @@ test('测试自定义事件', async ({ page }) => {
   await page.waitForTimeout(500)
   await expect(page.locator('.tiny-modal > .tiny-modal__box').nth(1)).toHaveText('触发自定方法')
 
+  // 验证文字居中
+  await expect(demo.locator('.tiny-alert')).toHaveCSS('text-align', 'center')
+
   // 验证必填星号
   await expect(demo.locator('.tiny-form')).toBeVisible()
   const beforeElement = await page.evaluate(() => {

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

@@ -38,6 +38,11 @@ export const renderComponent = ({
 
 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

@@ -49,6 +49,11 @@ export const renderComponent = ({
 
 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"
   }
-}
+}