feat: tinyvue grid slot generate code to template

packages/vue-generator/src/generator/vue/sfc/genSetupSFC.js

@@ -208,10 +208,9 @@ const generateSFCFile = (schema, componentsMap, config = {}) => {
 
 export const genSFCWithDefaultPlugin = (schema, componentsMap, config = {}) => {
   const { templateItemValidate = [], genTemplate = [], parseScript = [], genScript = {} } = config.hooks || {}
-  const defaultComponentHooks = [handleComponentNameHook, handleTinyIcon]
+  const defaultComponentHooks = [handleComponentNameHook, handleTinyIcon, handleTinyGrid]
 
   const defaultAttributeHook = [
-    handleTinyGrid,
     handleConditionAttrHook,
     handleLoopAttrHook,
     handleSlotBindAttrHook,

packages/vue-generator/src/generator/vue/sfc/generateTemplate.js

@@ -10,6 +10,7 @@ import {
 import { generateTag, HTML_DEFAULT_VOID_ELEMENTS } from './generateTag'
 import { specialTypeHandler } from './generateAttribute'
 import { thisPropsBindRe, thisRegexp } from '@/utils'
+import { getImportMap } from './parseImport'
 
 export const handleComponentNameHook = (optionData) => {
   const { componentName, schema } = optionData
@@ -66,37 +67,60 @@ export const handleTinyIcon = (nameObj, globalHooks) => {
   delete nameObj.schema.props.name
 }
 
-const handleTinyGridSlots = (value, globalHooks, config) => {
-  if (!Array.isArray(value)) {
+const transformSlots = (slots) => {
+  if (!slots || typeof slots !== 'object') {
+    return []
+  }
+
+  const res = Object.entries(slots).map(([key, value]) => {
+    return {
+      componentName: 'template',
+      props: {
+        slot: {
+          name: key,
+          params: value?.params || ''
+        }
+      },
+      children: value?.value
+    }
+  })
+
+  return res
+}
+
+const transformColumnToChildren = (columns) => {
+  if (!Array.isArray(columns)) {
     return
   }
 
-  value.forEach((slotItem) => {
-    const name = slotItem.componentName
+  const res = columns.map((item) => {
+    const { slots, ...restItem } = item
+
+    let children = []
 
-    if (!name) {
-      return
+    if (slots) {
+      children = transformSlots(slots)
     }
 
-    if (slotItem.componentType === 'Block') {
-      const importPath = `${config.blockRelativePath}${name}${config.blockSuffix}`
+    return {
+      componentName: 'TinyGridColumn',
+      props: restItem,
+      children
+    }
+  })
 
-      globalHooks.addImport(importPath, {
-        exportName: name,
-        componentName: name,
-        package: importPath
-      })
-    } else if (name?.startsWith?.('Tiny')) {
-      globalHooks.addImport('@opentiny/vue', {
-        destructuring: true,
-        exportName: name.slice(4),
-        componentName: name,
-        package: '@opentiny/vue'
-      })
+  return res
+}
+
+// 检测 tinyGrid 表格列是否有插槽配置
+const columnHasSlots = (columns) => {
+  for (const columnItem of columns) {
+    if (columnItem.slots && typeof columnItem.slots === 'object' && Object.keys(columnItem.slots).length > 0) {
+      return true
     }
+  }
 
-    handleTinyGridSlots(slotItem.children, globalHooks, config)
-  })
+  return false
 }
 
 export const handleTinyGrid = (schemaData, globalHooks, config) => {
@@ -129,11 +153,26 @@ export const handleTinyGrid = (schemaData, globalHooks, config) => {
         value: name
       }
     }
-
-    if (typeof item.slots === 'object') {
-      Object.values(item.slots).forEach((slotItem) => handleTinyGridSlots(slotItem?.value, globalHooks, config))
-    }
   })
+
+  const hasSlots = columnHasSlots(props.columns)
+
+  // 存在 slots，将表格列转化成 children 的配置
+  if (hasSlots) {
+    schemaData.schema.children = schemaData.schema.children || []
+    schemaData.schema.children.push(...transformColumnToChildren(props.columns))
+
+    // 解析 slot 中的 依赖
+    const { pkgMap = {}, blockPkgMap = {} } = getImportMap(schemaData.schema, config.componentsMap, config)
+
+    Object.entries({ ...pkgMap, ...blockPkgMap }).forEach(([key, value]) => {
+      value.forEach((valueItem) => {
+        globalHooks.addImport(key, valueItem)
+      })
+    })
+
+    delete props.columns
+  }
 }
 
 export const handleExpressionChildren = (schemaData = {}, globalHooks, config) => {

packages/vue-generator/test/testcases/sfc/case01/componentsMap.json

@@ -27,6 +27,13 @@
     "version": "^3.10.0",
     "destructuring": true
   },
+  {
+    "componentName": "TinyGridColumn",
+    "exportName": "GridColumn",
+    "package": "@opentiny/vue",
+    "version": "^3.10.0",
+    "destructuring": true
+  },
   {
     "componentName": "TinyInput",
     "exportName": "Input",