fix: slot should extra params

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

@@ -6,7 +6,8 @@ import {
   handleTinyGrid,
   handleTinyIcon,
   handleExpressionChildren,
-  validEmptyTemplateHook
+  validEmptyTemplateHook,
+  handleSlotParams
 } from './generateTemplate'
 import { generateStyleTag } from './generateStyle'
 import {
@@ -213,6 +214,7 @@ export const genSFCWithDefaultPlugin = (schema, componentsMap, config = {}) => {
   const defaultComponentHooks = [handleComponentNameHook, handleTinyIcon]
 
   const defaultAttributeHook = [
+    handleSlotParams,
     handleTinyGrid,
     handleJsxModelValueUpdate,
     handleConditionAttrHook,

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

@@ -136,6 +136,34 @@ export const handleTinyGrid = (schemaData, globalHooks, config) => {
   })
 }
 
+/**
+ * 解决往插槽传参的场景。
+ * 比如区块设置了插槽，需要往里面传数据，schema 协议会生成如下参数
+ * {
+ *   params: [{ name: "test", value: { type: "JSExpression", value: "this.state.arr" } }]
+ * }
+ * 需要将数组进行解析然后转换，才能进行后续正确出码，
+ * @param {*} schemaData
+ * @returns
+ */
+export const handleSlotParams = (schemaData) => {
+  const { componentName, props } = schemaData.schema
+
+  if (componentName !== 'Slot' || !Array.isArray(props?.params)) {
+    return
+  }
+
+  props.params.forEach((paramItem) => {
+    const { name, value } = paramItem || {}
+
+    if (name && value) {
+      props[name] = value
+    }
+  })
+
+  delete props.params
+}
+
 export const handleExpressionChildren = (schemaData = {}, globalHooks, config) => {
   const { children, schema } = schemaData
   const type = schema?.children?.type

packages/vue-generator/test/testcases/sfc/slotParams/block.schema.json

@@ -0,0 +1,47 @@
+{
+  "state": {
+    "personData": {
+      "name": "李华",
+      "age": "20",
+      "address": "china"
+    }
+  },
+  "methods": {},
+  "componentName": "Block",
+  "css": "",
+  "props": {},
+  "lifeCycles": {},
+  "children": [
+    {
+      "componentName": "Text",
+      "id": "52535213",
+      "props": {
+        "text": "请开启插槽"
+      }
+    },
+    {
+      "id": "42562b66",
+      "componentName": "div",
+      "props": {},
+      "children": [
+        {
+          "componentName": "Slot",
+          "id": "6153675d",
+          "props": {
+            "name": "test",
+            "params": [
+              {
+                "name": "testData",
+                "value": {
+                  "type": "JSExpression",
+                  "value": "this.state.personData"
+                }
+              }
+            ]
+          }
+        }
+      ]
+    }
+  ],
+  "fileName": "BlockSlotParams"
+}

packages/vue-generator/test/testcases/sfc/slotParams/expected/slotParamsBlock.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <span>请开启插槽</span>
+    <div>
+      <slot name="test" :testData="state.personData"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import * as vue from 'vue'
+import { defineProps, defineEmits } from 'vue'
+import { I18nInjectionKey } from 'vue-i18n'
+
+const props = defineProps({})
+
+const emit = defineEmits([])
+const { t, lowcodeWrap, stores } = vue.inject(I18nInjectionKey).lowcode()
+const wrap = lowcodeWrap(props, { emit })
+wrap({ stores })
+
+const state = vue.reactive({ personData: { name: '李华', age: '20', address: 'china' } })
+wrap({ state })
+</script>
+<style scoped></style>

packages/vue-generator/test/testcases/sfc/slotParams/expected/slotParamsPage.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <block-slot-params>
+      <template #test="{ testData }">
+        <span>{{ testData.name }}</span></template
+      ></block-slot-params
+    >
+  </div>
+</template>
+
+<script setup>
+import * as vue from 'vue'
+import { defineProps, defineEmits } from 'vue'
+import { I18nInjectionKey } from 'vue-i18n'
+import BlockSlotParams from '../components/BlockSlotParams.vue'
+
+const props = defineProps({})
+
+const emit = defineEmits([])
+const { t, lowcodeWrap, stores } = vue.inject(I18nInjectionKey).lowcode()
+const wrap = lowcodeWrap(props, { emit })
+wrap({ stores })
+
+const state = vue.reactive({})
+wrap({ state })
+</script>
+<style scoped></style>

packages/vue-generator/test/testcases/sfc/slotParams/page.schema.json

@@ -0,0 +1,41 @@
+{
+  "state": {},
+  "methods": {},
+  "componentName": "Page",
+  "css": "",
+  "props": {},
+  "lifeCycles": {},
+  "children": [
+    {
+      "componentName": "BlockSlotParams",
+      "props": {},
+      "id": "63623253",
+      "componentType": "Block",
+      "children": [
+        {
+          "id": "54396632",
+          "componentName": "Template",
+          "props": {
+            "slot": {
+              "name": "test",
+              "params": ["testData"]
+            }
+          },
+          "children": [
+            {
+              "id": "5242615f",
+              "componentName": "Text",
+              "props": {
+                "text": {
+                  "type": "JSExpression",
+                  "value": "testData.name"
+                }
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "fileName": "slotParamsTest"
+}

packages/vue-generator/test/testcases/sfc/slotParams/slotParams.test.js

@@ -0,0 +1,19 @@
+import { expect, test } from 'vitest'
+import { genSFCWithDefaultPlugin } from '@/generator/vue/sfc'
+import blockSchema from './block.schema.json'
+import pageSchema from './page.schema.json'
+import { formatCode } from '@/utils/formatCode'
+
+test('should generate slot and pass testData params', async () => {
+  const res = genSFCWithDefaultPlugin(blockSchema, [])
+  const formattedCode = formatCode(res, 'vue')
+
+  await expect(formattedCode).toMatchFileSnapshot('./expected/slotParamsBlock.vue')
+})
+
+test('should generate slot params', async () => {
+  const res = genSFCWithDefaultPlugin(pageSchema, [])
+  const formattedCode = formatCode(res, 'vue')
+
+  await expect(formattedCode).toMatchFileSnapshot('./expected/slotParamsPage.vue')
+})