feat(metaComponent): add capability of add custom metaComponents

designer-demo/src/MetaInput.vue

@@ -0,0 +1,63 @@
+<template>
+  <span>我是自定义的 meta input</span>
+  <tiny-input v-model="value" :type="type" :placeholder="placeholder" :rows="rows" @update:modelValue="change">
+  </tiny-input>
+</template>
+
+<script>
+import { ref } from 'vue'
+import { Input } from '@opentiny/vue'
+
+export default {
+  name: 'MetaInput',
+  components: {
+    TinyInput: Input
+  },
+  props: {
+    modelValue: {
+      type: String
+    },
+    type: {
+      type: String
+    },
+    placeholder: {
+      type: String
+    },
+    suffixIcons: {
+      type: Array,
+      default: () => []
+    },
+    dataType: {
+      type: String
+    },
+    rows: {
+      type: Number,
+      default: 10
+    }
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    const value = ref(props.modelValue)
+
+    const change = (val) => {
+      emit('update:modelValue', props.dataType === 'Array' ? val.split(',') : val)
+    }
+
+    return {
+      value,
+      change
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-svg-size {
+  margin-left: 10px;
+  font-size: 16px;
+  &:hover {
+    cursor: pointer;
+    color: var(--ti-lowcode-dialog-font-color);
+  }
+}
+</style>

designer-demo/src/main.js

@@ -13,5 +13,8 @@
 // 导入@opentiny/tiny-engine时，内部的依赖包也会逐个导入，可能会执行useComplie，此时需要templateHashMap。所以需要先执行一次defineEntry
 import { registry } from './defineEntry.js'
 import { init } from '@opentiny/tiny-engine'
+import registerCustomMetaComponents from './registerCustomMetaComponents.js'
+
+registerCustomMetaComponents()
 
 init({ registry })

designer-demo/src/registerCustomMetaComponents.js

@@ -0,0 +1,11 @@
+import { addMetaComponents } from '@opentiny/tiny-engine-entry'
+import MetaInput from './MetaInput.vue'
+
+export default () => {
+  addMetaComponents([
+    {
+      name: 'meta-input-custom',
+      component: MetaInput
+    }
+  ])
+}

packages/common/component/ConfigItem.vue

@@ -111,6 +111,7 @@ import MultiTypeSelector from './MultiTypeSelector.vue'
 import { useHistory, useProperties, useResource, useLayout, useCanvas } from '@opentiny/tiny-engine-controller'
 import { generateFunction } from '@opentiny/tiny-engine-controller/utils'
 import { SCHEMA_DATA_TYPE, PAGE_STATUS, TYPES } from '@opentiny/tiny-engine-controller/js/constants'
+import { getMetaComponent } from '@opentiny/tiny-engine-entry'
 
 const hasRule = (required, rules) => {
   if (required) {
@@ -201,13 +202,20 @@ export default {
         (props.property?.label?.text?.[locale.value] ?? props.property?.label?.text)
     )
     const isLinked = computed(() => Boolean(props.property.linked))
-    const component = computed(() =>
-      multiType.value
-        ? MultiTypeSelector
-        : props.metaComponents[widget.value.component] ||
-          MetaComponents[widget.value.component] ||
-          MetaComponents['MetaInput']
-    )
+    const component = computed(() => {
+      if (multiType.value) {
+        return MultiTypeSelector
+      }
+
+      const component = getMetaComponent(widget.value.component)
+
+      if (component) {
+        return component
+      }
+
+      // TODO: 需要弄清楚 props.metaComponents[widget.value.component] 是什么场景
+      return props.metaComponents[widget.value.component] || getMetaComponent('MetaInput')
+    })
     const bindValue = computed(() => {
       let value = props.property?.widget?.props?.modelValue
 

packages/common/index.js

@@ -146,8 +146,7 @@ export const MetaComponents = {
   MetaIpSection,
   MetaRelatedEditor,
   MetaRelatedColumns,
-  MetaTableColumns,
-  SearchEmpty
+  MetaTableColumns
 }
 
 export {

packages/design-core/public/mock/bundle.json

@@ -79,7 +79,7 @@
                     "labelPosition": "top",
                     "type": "string",
                     "widget": {
-                      "component": "MetaInput",
+                      "component": "meta-input-custom",
                       "props": {}
                     }
                   },

packages/design-core/src/init.js

@@ -25,6 +25,7 @@ import { utils } from '@opentiny/tiny-engine-utils'
 import { defineEntry } from '@opentiny/tiny-engine-entry'
 import App from './App.vue'
 import defaultRegistry from '../registry.js'
+import { registerMetaComponents } from './registerMetaComponents'
 
 import 'virtual:svg-icons-register'
 
@@ -83,6 +84,8 @@ const defaultLifeCycles = {
 export const init = ({ selector = '#app', registry = defaultRegistry, lifeCycles = {} } = {}) => {
   const { beforeAppCreate, appCreated, appMounted } = lifeCycles
 
+  registerMetaComponents()
+
   defaultLifeCycles.beforeAppCreate({ registry })
   beforeAppCreate?.({ registry })
   const app = createApp(App)

packages/design-core/src/registerMetaComponents.js

@@ -0,0 +1,14 @@
+import { MetaComponents } from '@opentiny/tiny-engine-common'
+import { addMetaComponents } from '@opentiny/tiny-engine-entry'
+// 后续默认 metaComponent 都由这个package  提供，抽空 tiny-engine-common 中的 metacomponent
+import * as defaultMetaComponents from '@opentiny/tiny-engine-meta-components'
+
+/**
+ * 注册TinyEngine默认的 metaComponents
+ */
+export const registerMetaComponents = () => {
+  const { MetaInput, MetaSelect, ...otherComponents } = MetaComponents
+
+  addMetaComponents(Object.entries(otherComponents).map(([name, component]) => ({ name, component })))
+  addMetaComponents(Object.values(defaultMetaComponents))
+}

packages/design-core/vite.config.js

@@ -199,7 +199,8 @@ const devAlias = {
   '@opentiny/tiny-engine-i18n-host': path.resolve(__dirname, '../i18n/src/lib.js'),
   '@opentiny/tiny-engine-builtin-component': path.resolve(__dirname, '../builtinComponent/index.js'),
   '@opentiny/tiny-engine-entry': path.resolve(__dirname, '../entry/src/index.js'),
-  '@opentiny/tiny-engine-layout': path.resolve(__dirname, '../layout/index.js')
+  '@opentiny/tiny-engine-layout': path.resolve(__dirname, '../layout/index.js'),
+  '@opentiny/tiny-engine-meta-components': path.resolve(__dirname, '../meta-components/src/index.js')
 }
 
 const prodAlias = {

packages/entry/README.md

@@ -0,0 +1,27 @@
+# entry(暂定)
+
+
+## metaComponents
+
+往设计器添加 metaComponent，满足右侧属性面板属性设置器自定义组件的需求
+
+### addMetaComponents
+
+```javascript
+addMetaComponents([
+  {
+    name: 'MetaInput',
+    component: MetaInput
+  },
+  {
+    name: 'MetaSelect',
+    component: MetaSelect
+  }
+])
+```
+
+### getMetaComponent
+
+```javascript
+getMetaComponent('MetaInput')
+```

packages/entry/src/index.js

@@ -16,3 +16,4 @@ export { defineEntry, callEntry, beforeCallEntry, afterCallEntry, getMergeRegist
 export { getLayoutComponent } from './layoutHash'
 export { default as useMessage } from './useMessage'
 export { useShareState } from './useShareState'
+export { getMetaComponent, addMetaComponents } from './metaComponents'

packages/entry/src/metaComponents.js

@@ -0,0 +1,13 @@
+const metaComponentsMap = new Map()
+
+export const addMetaComponents = (components) => {
+  if (Array.isArray(components)) {
+    for (const { name, component } of components) {
+      metaComponentsMap.set(name, component)
+    }
+  }
+}
+
+export const getMetaComponent = (name) => {
+  return metaComponentsMap.get(name)
+}

packages/meta-components/README.md

@@ -0,0 +1,3 @@
+# TinyEngine 的 meta component 组件
+
+右侧属性面板配置物料属性的组件。

packages/meta-components/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@opentiny/tiny-engine-meta-components",
+  "version": "1.0.0",
+  "description": "",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "OpenTiny Team",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/opentiny/tiny-engine/issues"
+  },
+  "homepage": "https://opentiny.design/tiny-engine",
+  "devDependencies": {
+    "vite": "^4.3.7"
+  },
+  "peerDependencies": {
+    "@opentiny/vue": "^3.14.0",
+    "vue": "^3.4.15"
+  },
+  "dependencies": {
+    "@opentiny/tiny-engine-controller": "workspace:*"
+  }
+}

packages/meta-components/src/index.js

@@ -0,0 +1,2 @@
+export { default as MetaInput } from './meta-input'
+export { default as MetaSelect } from './meta-select'

packages/meta-components/src/meta-input/MetaInput.vue

@@ -0,0 +1,72 @@
+<template>
+  <tiny-input v-model="value" :type="type" :placeholder="placeholder" :rows="rows" @update:modelValue="change">
+    <template #suffix>
+      <div v-for="item in suffixIcons" :key="item.icon">
+        <svg-icon v-if="item.icon" :name="item.icon" class="tiny-svg-size" @click="item.onClick.action"></svg-icon>
+      </div>
+    </template>
+  </tiny-input>
+</template>
+
+<script>
+import { ref, watchEffect } from 'vue'
+import { Input } from '@opentiny/vue'
+import { useProperties } from '@opentiny/tiny-engine-controller'
+
+export default {
+  name: 'MetaInput',
+  components: {
+    TinyInput: Input
+  },
+  props: {
+    modelValue: {
+      type: String
+    },
+    type: {
+      type: String
+    },
+    placeholder: {
+      type: String
+    },
+    suffixIcons: {
+      type: Array,
+      default: () => []
+    },
+    dataType: {
+      type: String
+    },
+    rows: {
+      type: Number,
+      default: 10
+    }
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    const value = ref(props.modelValue)
+
+    const change = (val) => {
+      emit('update:modelValue', props.dataType === 'Array' ? val.split(',') : val)
+    }
+
+    watchEffect(() => {
+      value.value = useProperties().translateProp(props.modelValue)
+    })
+
+    return {
+      value,
+      change
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-svg-size {
+  margin-left: 10px;
+  font-size: 16px;
+  &:hover {
+    cursor: pointer;
+    color: var(--ti-lowcode-dialog-font-color);
+  }
+}
+</style>

packages/meta-components/src/meta-input/index.js

@@ -0,0 +1,6 @@
+import MetaInput from './MetaInput.vue'
+
+export default {
+  name: 'MetaInput',
+  component: MetaInput
+}