feat: add capability of add custom metaComponents

designer-demo/package.json

@@ -11,7 +11,8 @@
     "vue": "^3.4.21",
     "@opentiny/tiny-engine": "workspace:^",
     "@opentiny/tiny-engine-entry": "workspace:^",
-    "@opentiny/tiny-engine-canvas": "workspace:^"
+    "@opentiny/tiny-engine-canvas": "workspace:^",
+    "@opentiny/tiny-engine-configurator": "workspace:*"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

designer-demo/src/MyInputConfigurator.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: 'MyInputConfigurator',
+  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/configurators.js

@@ -0,0 +1,11 @@
+import { InputConfigurator, SelectConfigurator } from '@opentiny/tiny-engine-configurator'
+import MyInputConfigurator from './MyInputConfigurator.vue'
+
+export const configurators = [
+  {
+    name: 'MyInputConfigurator',
+    component: MyInputConfigurator
+  },
+  InputConfigurator,
+  SelectConfigurator
+]

designer-demo/src/main.js

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

packages/builtinComponent/src/meta/CanvasCol.json

@@ -56,7 +56,7 @@
               "cols": 12,
               "rules": [],
               "widget": {
-                "component": "MetaInput",
+                "component": "InputConfigurator",
                 "props": {}
               }
             },
@@ -72,7 +72,7 @@
               "cols": 12,
               "rules": [],
               "widget": {
-                "component": "MetaInput",
+                "component": "InputConfigurator",
                 "props": {}
               }
             },
@@ -88,7 +88,7 @@
               "cols": 12,
               "rules": [],
               "widget": {
-                "component": "MetaInput",
+                "component": "InputConfigurator",
                 "props": {}
               }
             },
@@ -104,7 +104,7 @@
               "cols": 12,
               "rules": [],
               "widget": {
-                "component": "MetaSelect",
+                "component": "SelectConfigurator",
                 "props": {
                   "options": [
                     { "value": "flex-start", "label": "头部对齐" },
@@ -128,7 +128,7 @@
               "cols": 12,
               "rules": [],
               "widget": {
-                "component": "MetaSelect",
+                "component": "SelectConfigurator",
                 "props": {
                   "options": [
                     { "value": "flex-start", "label": "头部对齐" },

packages/builtinComponent/src/meta/CanvasRow.json

@@ -34,7 +34,7 @@
               "cols": 12,
               "rules": [],
               "widget": {
-                "component": "MetaInput",
+                "component": "InputConfigurator",
                 "props": {}
               }
             },
@@ -50,7 +50,7 @@
               "cols": 12,
               "rules": [],
               "widget": {
-                "component": "MetaInput",
+                "component": "InputConfigurator",
                 "props": {}
               }
             },
@@ -66,7 +66,7 @@
               "cols": 12,
               "rules": [],
               "widget": {
-                "component": "MetaInput",
+                "component": "InputConfigurator",
                 "props": {}
               }
             },
@@ -82,7 +82,7 @@
               "cols": 12,
               "rules": [],
               "widget": {
-                "component": "MetaSelect",
+                "component": "SelectConfigurator",
                 "props": {
                   "options": [
                     { "value": "flex-start", "label": "头部对齐" },
@@ -106,7 +106,7 @@
               "cols": 12,
               "rules": [],
               "widget": {
-                "component": "MetaSelect",
+                "component": "SelectConfigurator",
                 "props": {
                   "options": [
                     { "value": "flex-start", "label": "头部对齐" },

packages/builtinComponent/src/meta/CanvasRowColContainer.json

@@ -34,7 +34,7 @@
               "cols": 12,
               "rules": [],
               "widget": {
-                "component": "MetaInput",
+                "component": "InputConfigurator",
                 "props": {}
               }
             }

packages/canvas/src/components/builtin/builtin.json

@@ -94,7 +94,7 @@
                         },
                         "cols": 12,
                         "widget": {
-                          "component": "MetaInput",
+                          "component": "InputConfigurator",
                           "props": {}
                         }
                       },
@@ -256,7 +256,7 @@
                         "cols": 12,
                         "rules": [],
                         "widget": {
-                          "component": "MetaInput",
+                          "component": "InputConfigurator",
                           "props": {
                             "type": "textarea",
                             "autosize": true
@@ -399,7 +399,7 @@
                         "cols": 12,
                         "rules": [],
                         "widget": {
-                          "component": "MetaInput",
+                          "component": "InputConfigurator",
                           "props": {}
                         }
                       }

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,14 @@ export default {
         (props.property?.label?.text?.[locale.value] ?? props.property?.label?.text)
     )
     const isLinked = computed(() => Boolean(props.property.linked))
-    const component = computed(() =>
-      multiType.value
+    const component = computed(() => {
+      // TODO: 需要弄清楚 props.metaComponents[widget.value.component] 是什么场景
+      return multiType.value
         ? MultiTypeSelector
-        : props.metaComponents[widget.value.component] ||
-          MetaComponents[widget.value.component] ||
-          MetaComponents['MetaInput']
-    )
+        : getMetaComponent(widget.value.component) ||
+            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/configurator/README.md

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

packages/configurator/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@opentiny/tiny-engine-configurator",
+  "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/configurator/src/index.js

@@ -0,0 +1,2 @@
+export { default as InputConfigurator } from './input-configurator'
+export { default as SelectConfigurator } from './select-configurator'

packages/configurator/src/input-configurator/InputConfigurator.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: 'InputConfigurator',
+  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/configurator/src/input-configurator/index.js

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