From c7efc41c37808689024b3b019d38d8be3ebf649b Mon Sep 17 00:00:00 2001 From: chilingling Date: Thu, 30 May 2024 01:07:43 -0700 Subject: [PATCH 1/8] feat(metaComponent): add capability of add custom metaComponents --- designer-demo/src/MetaInput.vue | 63 +++++++++ designer-demo/src/main.js | 3 + .../src/registerCustomMetaComponents.js | 11 ++ packages/common/component/ConfigItem.vue | 22 +++- packages/common/index.js | 3 +- packages/design-core/public/mock/bundle.json | 2 +- packages/design-core/src/init.js | 3 + .../design-core/src/registerMetaComponents.js | 14 ++ packages/design-core/vite.config.js | 3 +- packages/entry/README.md | 27 ++++ packages/entry/src/index.js | 1 + packages/entry/src/metaComponents.js | 13 ++ packages/meta-components/README.md | 3 + packages/meta-components/package.json | 29 +++++ packages/meta-components/src/index.js | 2 + .../src/meta-input/MetaInput.vue | 72 +++++++++++ .../meta-components/src/meta-input/index.js | 6 + .../src/meta-select/MetaSelect.vue | 122 ++++++++++++++++++ .../meta-components/src/meta-select/index.js | 6 + packages/meta-components/vite.config.js | 35 +++++ 20 files changed, 429 insertions(+), 11 deletions(-) create mode 100644 designer-demo/src/MetaInput.vue create mode 100644 designer-demo/src/registerCustomMetaComponents.js create mode 100644 packages/design-core/src/registerMetaComponents.js create mode 100644 packages/entry/README.md create mode 100644 packages/entry/src/metaComponents.js create mode 100644 packages/meta-components/README.md create mode 100644 packages/meta-components/package.json create mode 100644 packages/meta-components/src/index.js create mode 100644 packages/meta-components/src/meta-input/MetaInput.vue create mode 100644 packages/meta-components/src/meta-input/index.js create mode 100644 packages/meta-components/src/meta-select/MetaSelect.vue create mode 100644 packages/meta-components/src/meta-select/index.js create mode 100644 packages/meta-components/vite.config.js diff --git a/designer-demo/src/MetaInput.vue b/designer-demo/src/MetaInput.vue new file mode 100644 index 0000000000..d68edbcaac --- /dev/null +++ b/designer-demo/src/MetaInput.vue @@ -0,0 +1,63 @@ + + + + + diff --git a/designer-demo/src/main.js b/designer-demo/src/main.js index f94c13b040..29f7783770 100644 --- a/designer-demo/src/main.js +++ b/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 }) diff --git a/designer-demo/src/registerCustomMetaComponents.js b/designer-demo/src/registerCustomMetaComponents.js new file mode 100644 index 0000000000..2e036563c0 --- /dev/null +++ b/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 + } + ]) +} diff --git a/packages/common/component/ConfigItem.vue b/packages/common/component/ConfigItem.vue index c0fd195e7b..8c80f2711c 100644 --- a/packages/common/component/ConfigItem.vue +++ b/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 diff --git a/packages/common/index.js b/packages/common/index.js index 2fcb94fccb..e322eeba1f 100644 --- a/packages/common/index.js +++ b/packages/common/index.js @@ -146,8 +146,7 @@ export const MetaComponents = { MetaIpSection, MetaRelatedEditor, MetaRelatedColumns, - MetaTableColumns, - SearchEmpty + MetaTableColumns } export { diff --git a/packages/design-core/public/mock/bundle.json b/packages/design-core/public/mock/bundle.json index 2fa58678f1..66780af4e8 100644 --- a/packages/design-core/public/mock/bundle.json +++ b/packages/design-core/public/mock/bundle.json @@ -79,7 +79,7 @@ "labelPosition": "top", "type": "string", "widget": { - "component": "MetaInput", + "component": "meta-input-custom", "props": {} } }, diff --git a/packages/design-core/src/init.js b/packages/design-core/src/init.js index f3be02085a..74058ba259 100644 --- a/packages/design-core/src/init.js +++ b/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) diff --git a/packages/design-core/src/registerMetaComponents.js b/packages/design-core/src/registerMetaComponents.js new file mode 100644 index 0000000000..1062e560d4 --- /dev/null +++ b/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)) +} diff --git a/packages/design-core/vite.config.js b/packages/design-core/vite.config.js index 905f244440..05fe3ca4fc 100644 --- a/packages/design-core/vite.config.js +++ b/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 = { diff --git a/packages/entry/README.md b/packages/entry/README.md new file mode 100644 index 0000000000..1abd3d8102 --- /dev/null +++ b/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') +``` diff --git a/packages/entry/src/index.js b/packages/entry/src/index.js index 1d3f928e15..d06c6641d9 100644 --- a/packages/entry/src/index.js +++ b/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' diff --git a/packages/entry/src/metaComponents.js b/packages/entry/src/metaComponents.js new file mode 100644 index 0000000000..a349a42240 --- /dev/null +++ b/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) +} diff --git a/packages/meta-components/README.md b/packages/meta-components/README.md new file mode 100644 index 0000000000..a05eed3d62 --- /dev/null +++ b/packages/meta-components/README.md @@ -0,0 +1,3 @@ +# TinyEngine 的 meta component 组件 + +右侧属性面板配置物料属性的组件。 diff --git a/packages/meta-components/package.json b/packages/meta-components/package.json new file mode 100644 index 0000000000..2e929fb57c --- /dev/null +++ b/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:*" + } +} diff --git a/packages/meta-components/src/index.js b/packages/meta-components/src/index.js new file mode 100644 index 0000000000..bfd0efc9ff --- /dev/null +++ b/packages/meta-components/src/index.js @@ -0,0 +1,2 @@ +export { default as MetaInput } from './meta-input' +export { default as MetaSelect } from './meta-select' diff --git a/packages/meta-components/src/meta-input/MetaInput.vue b/packages/meta-components/src/meta-input/MetaInput.vue new file mode 100644 index 0000000000..f44e0bc9fa --- /dev/null +++ b/packages/meta-components/src/meta-input/MetaInput.vue @@ -0,0 +1,72 @@ + + + + + diff --git a/packages/meta-components/src/meta-input/index.js b/packages/meta-components/src/meta-input/index.js new file mode 100644 index 0000000000..f84a89546f --- /dev/null +++ b/packages/meta-components/src/meta-input/index.js @@ -0,0 +1,6 @@ +import MetaInput from './MetaInput.vue' + +export default { + name: 'MetaInput', + component: MetaInput +} diff --git a/packages/meta-components/src/meta-select/MetaSelect.vue b/packages/meta-components/src/meta-select/MetaSelect.vue new file mode 100644 index 0000000000..d9a59b8f97 --- /dev/null +++ b/packages/meta-components/src/meta-select/MetaSelect.vue @@ -0,0 +1,122 @@ + + + + diff --git a/packages/meta-components/src/meta-select/index.js b/packages/meta-components/src/meta-select/index.js new file mode 100644 index 0000000000..67341cf82e --- /dev/null +++ b/packages/meta-components/src/meta-select/index.js @@ -0,0 +1,6 @@ +import MetaSelect from './MetaSelect.vue' + +export default { + name: 'MetaSelect', + component: MetaSelect +} diff --git a/packages/meta-components/vite.config.js b/packages/meta-components/vite.config.js new file mode 100644 index 0000000000..dad08a5fa8 --- /dev/null +++ b/packages/meta-components/vite.config.js @@ -0,0 +1,35 @@ +/** + * Copyright (c) 2023 - present TinyEngine Authors. + * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd. + * + * Use of this source code is governed by an MIT-style license. + * + * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL, + * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR + * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. + * + */ + +import { defineConfig } from 'vite' +import path from 'path' +import vue from '@vitejs/plugin-vue' +import vueJsx from '@vitejs/plugin-vue-jsx' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [vue(), vueJsx()], + publicDir: false, + build: { + lib: { + entry: path.resolve(__dirname, './src/index.js'), + fileName: () => 'index.js', + formats: ['es'] + }, + rollupOptions: { + output: { + banner: 'import "./style.css"' + }, + external: ['vue', /@opentiny\/tiny-engine.*/, /@opentiny\/vue.*/] + } + } +}) From 023fc8a1c2b204ae558a725e27c8568d23911073 Mon Sep 17 00:00:00 2001 From: chilingling Date: Thu, 30 May 2024 02:18:46 -0700 Subject: [PATCH 2/8] feat: metaComponents pass to init fun register --- designer-demo/src/main.js | 6 ++---- designer-demo/src/metaComponents.js | 12 ++++++++++++ designer-demo/src/registerCustomMetaComponents.js | 11 ----------- packages/design-core/src/init.js | 4 ++-- packages/design-core/src/registerMetaComponents.js | 7 +++---- 5 files changed, 19 insertions(+), 21 deletions(-) create mode 100644 designer-demo/src/metaComponents.js delete mode 100644 designer-demo/src/registerCustomMetaComponents.js diff --git a/designer-demo/src/main.js b/designer-demo/src/main.js index 29f7783770..78f5256c0a 100644 --- a/designer-demo/src/main.js +++ b/designer-demo/src/main.js @@ -13,8 +13,6 @@ // 导入@opentiny/tiny-engine时，内部的依赖包也会逐个导入，可能会执行useComplie，此时需要templateHashMap。所以需要先执行一次defineEntry import { registry } from './defineEntry.js' import { init } from '@opentiny/tiny-engine' -import registerCustomMetaComponents from './registerCustomMetaComponents.js' +import { metaComponents } from './metaComponents' -registerCustomMetaComponents() - -init({ registry }) +init({ registry, metaComponents }) diff --git a/designer-demo/src/metaComponents.js b/designer-demo/src/metaComponents.js new file mode 100644 index 0000000000..2ae21ec0fc --- /dev/null +++ b/designer-demo/src/metaComponents.js @@ -0,0 +1,12 @@ +// import { addMetaComponents } from '@opentiny/tiny-engine-entry' +import CustomMetaInput from './MetaInput.vue' +import { MetaInput, MetaSelect } from '@opentiny/tiny-engine-meta-components' + +export const metaComponents = [ + { + name: 'meta-input-custom', + component: CustomMetaInput + }, + MetaInput, + MetaSelect +] diff --git a/designer-demo/src/registerCustomMetaComponents.js b/designer-demo/src/registerCustomMetaComponents.js deleted file mode 100644 index 2e036563c0..0000000000 --- a/designer-demo/src/registerCustomMetaComponents.js +++ /dev/null @@ -1,11 +0,0 @@ -import { addMetaComponents } from '@opentiny/tiny-engine-entry' -import MetaInput from './MetaInput.vue' - -export default () => { - addMetaComponents([ - { - name: 'meta-input-custom', - component: MetaInput - } - ]) -} diff --git a/packages/design-core/src/init.js b/packages/design-core/src/init.js index 74058ba259..217b92289e 100644 --- a/packages/design-core/src/init.js +++ b/packages/design-core/src/init.js @@ -81,10 +81,10 @@ const defaultLifeCycles = { } } -export const init = ({ selector = '#app', registry = defaultRegistry, lifeCycles = {} } = {}) => { +export const init = ({ selector = '#app', registry = defaultRegistry, lifeCycles = {}, metaComponents = [] } = {}) => { const { beforeAppCreate, appCreated, appMounted } = lifeCycles - registerMetaComponents() + registerMetaComponents(metaComponents) defaultLifeCycles.beforeAppCreate({ registry }) beforeAppCreate?.({ registry }) diff --git a/packages/design-core/src/registerMetaComponents.js b/packages/design-core/src/registerMetaComponents.js index 1062e560d4..3c2ac8d478 100644 --- a/packages/design-core/src/registerMetaComponents.js +++ b/packages/design-core/src/registerMetaComponents.js @@ -1,14 +1,13 @@ +// TODO: 抽空 common package 中的 metaComponent 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 = () => { +export const registerMetaComponents = (metaComponents) => { const { MetaInput, MetaSelect, ...otherComponents } = MetaComponents addMetaComponents(Object.entries(otherComponents).map(([name, component]) => ({ name, component }))) - addMetaComponents(Object.values(defaultMetaComponents)) + addMetaComponents(metaComponents) } From d5590ad4770697dd6d2d835321fd139e7008d4b7 Mon Sep 17 00:00:00 2001 From: chilingling Date: Thu, 30 May 2024 04:21:53 -0700 Subject: [PATCH 3/8] fix: refactor code by code review --- packages/common/component/ConfigItem.vue | 16 +++++----------- packages/meta-components/vite.config.js | 2 +- 2 files changed, 6 insertions(+), 12 deletions(-) diff --git a/packages/common/component/ConfigItem.vue b/packages/common/component/ConfigItem.vue index 8c80f2711c..a5eb12c40a 100644 --- a/packages/common/component/ConfigItem.vue +++ b/packages/common/component/ConfigItem.vue @@ -203,18 +203,12 @@ export default { ) const isLinked = computed(() => Boolean(props.property.linked)) 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') + return multiType.value + ? MultiTypeSelector + : getMetaComponent(widget.value.component) || + props.metaComponents[widget.value.component] || + getMetaComponent('MetaInput') }) const bindValue = computed(() => { let value = props.property?.widget?.props?.modelValue diff --git a/packages/meta-components/vite.config.js b/packages/meta-components/vite.config.js index dad08a5fa8..6c428011c5 100644 --- a/packages/meta-components/vite.config.js +++ b/packages/meta-components/vite.config.js @@ -11,7 +11,7 @@ */ import { defineConfig } from 'vite' -import path from 'path' +import path from 'node:path' import vue from '@vitejs/plugin-vue' import vueJsx from '@vitejs/plugin-vue-jsx' From 637b244d947c9581e602a486cbdbffec1cf44991 Mon Sep 17 00:00:00 2001 From: chilingling Date: Thu, 30 May 2024 19:00:26 -0700 Subject: [PATCH 4/8] feat: rename metaComponent to configurator --- designer-demo/package.json | 3 +- ...{MetaInput.vue => MyInputConfigurator.vue} | 2 +- designer-demo/src/configurators.js | 11 + designer-demo/src/main.js | 4 +- designer-demo/src/metaComponents.js | 12 - .../builtinComponent/src/meta/CanvasCol.json | 10 +- .../builtinComponent/src/meta/CanvasRow.json | 10 +- .../src/meta/CanvasRowColContainer.json | 2 +- .../src/components/builtin/builtin.json | 6 +- .../README.md | 0 .../package.json | 2 +- packages/configurator/src/index.js | 2 + .../input-configurator/InputConfigurator.vue} | 2 +- .../src/input-configurator/index.js | 6 + .../SelectConfigurator.vue} | 0 .../src/select-configurator/index.js | 6 + .../vite.config.js | 0 packages/design-core/public/mock/bundle.json | 250 +++++++++--------- packages/design-core/src/init.js | 4 +- .../design-core/src/registerMetaComponents.js | 4 +- packages/design-core/vite.config.js | 2 +- packages/meta-components/src/index.js | 2 - .../meta-components/src/meta-input/index.js | 6 - .../meta-components/src/meta-select/index.js | 6 - 24 files changed, 175 insertions(+), 177 deletions(-) rename designer-demo/src/{MetaInput.vue => MyInputConfigurator.vue} (97%) create mode 100644 designer-demo/src/configurators.js delete mode 100644 designer-demo/src/metaComponents.js rename packages/{meta-components => configurator}/README.md (100%) rename packages/{meta-components => configurator}/package.json (92%) create mode 100644 packages/configurator/src/index.js rename packages/{meta-components/src/meta-input/MetaInput.vue => configurator/src/input-configurator/InputConfigurator.vue} (98%) create mode 100644 packages/configurator/src/input-configurator/index.js rename packages/{meta-components/src/meta-select/MetaSelect.vue => configurator/src/select-configurator/SelectConfigurator.vue} (100%) create mode 100644 packages/configurator/src/select-configurator/index.js rename packages/{meta-components => configurator}/vite.config.js (100%) delete mode 100644 packages/meta-components/src/index.js delete mode 100644 packages/meta-components/src/meta-input/index.js delete mode 100644 packages/meta-components/src/meta-select/index.js diff --git a/designer-demo/package.json b/designer-demo/package.json index 69a54f99ef..ee717a529e 100644 --- a/designer-demo/package.json +++ b/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", diff --git a/designer-demo/src/MetaInput.vue b/designer-demo/src/MyInputConfigurator.vue similarity index 97% rename from designer-demo/src/MetaInput.vue rename to designer-demo/src/MyInputConfigurator.vue index d68edbcaac..7f76338ad5 100644 --- a/designer-demo/src/MetaInput.vue +++ b/designer-demo/src/MyInputConfigurator.vue @@ -9,7 +9,7 @@ import { ref } from 'vue' import { Input } from '@opentiny/vue' export default { - name: 'MetaInput', + name: 'MyInputConfigurator', components: { TinyInput: Input }, diff --git a/designer-demo/src/configurators.js b/designer-demo/src/configurators.js new file mode 100644 index 0000000000..3f76596d75 --- /dev/null +++ b/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 +] diff --git a/designer-demo/src/main.js b/designer-demo/src/main.js index 78f5256c0a..01e6d4f166 100644 --- a/designer-demo/src/main.js +++ b/designer-demo/src/main.js @@ -13,6 +13,6 @@ // 导入@opentiny/tiny-engine时，内部的依赖包也会逐个导入，可能会执行useComplie，此时需要templateHashMap。所以需要先执行一次defineEntry import { registry } from './defineEntry.js' import { init } from '@opentiny/tiny-engine' -import { metaComponents } from './metaComponents' +import { configurators } from './configurators.js' -init({ registry, metaComponents }) +init({ registry, configurators }) diff --git a/designer-demo/src/metaComponents.js b/designer-demo/src/metaComponents.js deleted file mode 100644 index 2ae21ec0fc..0000000000 --- a/designer-demo/src/metaComponents.js +++ /dev/null @@ -1,12 +0,0 @@ -// import { addMetaComponents } from '@opentiny/tiny-engine-entry' -import CustomMetaInput from './MetaInput.vue' -import { MetaInput, MetaSelect } from '@opentiny/tiny-engine-meta-components' - -export const metaComponents = [ - { - name: 'meta-input-custom', - component: CustomMetaInput - }, - MetaInput, - MetaSelect -] diff --git a/packages/builtinComponent/src/meta/CanvasCol.json b/packages/builtinComponent/src/meta/CanvasCol.json index 33c68b5dff..540bdb9015 100644 --- a/packages/builtinComponent/src/meta/CanvasCol.json +++ b/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": "头部对齐" }, diff --git a/packages/builtinComponent/src/meta/CanvasRow.json b/packages/builtinComponent/src/meta/CanvasRow.json index 5033b30ba6..0ee26acbf6 100644 --- a/packages/builtinComponent/src/meta/CanvasRow.json +++ b/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": "头部对齐" }, diff --git a/packages/builtinComponent/src/meta/CanvasRowColContainer.json b/packages/builtinComponent/src/meta/CanvasRowColContainer.json index e363530f6f..5ee884cdf2 100644 --- a/packages/builtinComponent/src/meta/CanvasRowColContainer.json +++ b/packages/builtinComponent/src/meta/CanvasRowColContainer.json @@ -34,7 +34,7 @@ "cols": 12, "rules": [], "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} } } diff --git a/packages/canvas/src/components/builtin/builtin.json b/packages/canvas/src/components/builtin/builtin.json index 79c6782940..560a900169 100644 --- a/packages/canvas/src/components/builtin/builtin.json +++ b/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": {} } } diff --git a/packages/meta-components/README.md b/packages/configurator/README.md similarity index 100% rename from packages/meta-components/README.md rename to packages/configurator/README.md diff --git a/packages/meta-components/package.json b/packages/configurator/package.json similarity index 92% rename from packages/meta-components/package.json rename to packages/configurator/package.json index 2e929fb57c..b2b822788f 100644 --- a/packages/meta-components/package.json +++ b/packages/configurator/package.json @@ -1,5 +1,5 @@ { - "name": "@opentiny/tiny-engine-meta-components", + "name": "@opentiny/tiny-engine-configurator", "version": "1.0.0", "description": "", "main": "dist/index.js", diff --git a/packages/configurator/src/index.js b/packages/configurator/src/index.js new file mode 100644 index 0000000000..dabd62d792 --- /dev/null +++ b/packages/configurator/src/index.js @@ -0,0 +1,2 @@ +export { default as InputConfigurator } from './input-configurator' +export { default as SelectConfigurator } from './select-configurator' diff --git a/packages/meta-components/src/meta-input/MetaInput.vue b/packages/configurator/src/input-configurator/InputConfigurator.vue similarity index 98% rename from packages/meta-components/src/meta-input/MetaInput.vue rename to packages/configurator/src/input-configurator/InputConfigurator.vue index f44e0bc9fa..5e58cb2dfc 100644 --- a/packages/meta-components/src/meta-input/MetaInput.vue +++ b/packages/configurator/src/input-configurator/InputConfigurator.vue @@ -14,7 +14,7 @@ import { Input } from '@opentiny/vue' import { useProperties } from '@opentiny/tiny-engine-controller' export default { - name: 'MetaInput', + name: 'InputConfigurator', components: { TinyInput: Input }, diff --git a/packages/configurator/src/input-configurator/index.js b/packages/configurator/src/input-configurator/index.js new file mode 100644 index 0000000000..94a933b6e3 --- /dev/null +++ b/packages/configurator/src/input-configurator/index.js @@ -0,0 +1,6 @@ +import InputConfigurator from './InputConfigurator.vue' + +export default { + name: 'InputConfigurator', + component: InputConfigurator +} diff --git a/packages/meta-components/src/meta-select/MetaSelect.vue b/packages/configurator/src/select-configurator/SelectConfigurator.vue similarity index 100% rename from packages/meta-components/src/meta-select/MetaSelect.vue rename to packages/configurator/src/select-configurator/SelectConfigurator.vue diff --git a/packages/configurator/src/select-configurator/index.js b/packages/configurator/src/select-configurator/index.js new file mode 100644 index 0000000000..685f88bd58 --- /dev/null +++ b/packages/configurator/src/select-configurator/index.js @@ -0,0 +1,6 @@ +import SelectConfigurator from './SelectConfigurator.vue' + +export default { + name: 'SelectConfigurator', + component: SelectConfigurator +} diff --git a/packages/meta-components/vite.config.js b/packages/configurator/vite.config.js similarity index 100% rename from packages/meta-components/vite.config.js rename to packages/configurator/vite.config.js diff --git a/packages/design-core/public/mock/bundle.json b/packages/design-core/public/mock/bundle.json index 66780af4e8..d4e06792eb 100644 --- a/packages/design-core/public/mock/bundle.json +++ b/packages/design-core/public/mock/bundle.json @@ -79,7 +79,7 @@ "labelPosition": "top", "type": "string", "widget": { - "component": "meta-input-custom", + "component": "MyInputConfigurator", "props": {} } }, @@ -101,7 +101,7 @@ "type": "string", "defaultValue": "default", "widget": { - "component": "MetaSelect", + "component": "SelectConfigurator", "props": { "options": [ { @@ -137,7 +137,7 @@ "labelPosition": "top", "type": "string", "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} } }, @@ -360,7 +360,7 @@ "type": "string", "defaultValue": "default", "widget": { - "component": "MetaSelect", + "component": "SelectConfigurator", "props": { "options": [ { @@ -396,7 +396,7 @@ "labelPosition": "top", "type": "string", "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} } }, @@ -748,7 +748,7 @@ "type": "string", "defaultValue": "right", "widget": { - "component": "MetaSelect", + "component": "SelectConfigurator", "props": { "options": [ { @@ -784,7 +784,7 @@ "labelPosition": "top", "type": "string", "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "device": [] @@ -806,7 +806,7 @@ "labelPosition": "top", "type": "string", "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "device": [] @@ -850,7 +850,7 @@ "type": "string", "defaultValue": "left", "widget": { - "component": "MetaSelect", + "component": "SelectConfigurator", "props": { "options": [ { @@ -971,7 +971,7 @@ "type": "string", "defaultValue": "default", "widget": { - "component": "MetaSelect", + "component": "SelectConfigurator", "props": { "options": [ { @@ -1137,7 +1137,7 @@ "labelPosition": "top", "type": "string", "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} } }, @@ -1158,7 +1158,7 @@ "labelPosition": "top", "type": "string", "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} } }, @@ -1179,7 +1179,7 @@ "labelPosition": "top", "type": "string", "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} } }, @@ -1244,7 +1244,7 @@ "labelPosition": "top", "type": "string", "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} } }, @@ -1308,7 +1308,7 @@ "type": "string", "defaultValue": "default", "widget": { - "component": "MetaSelect", + "component": "SelectConfigurator", "props": { "options": [ { @@ -1344,7 +1344,7 @@ "labelPosition": "top", "type": "string", "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} } }, @@ -1365,7 +1365,7 @@ "labelPosition": "top", "type": "string", "widget": { - "component": "MetaSelect", + "component": "SelectConfigurator", "props": { "options": [ { @@ -1525,7 +1525,7 @@ } }, "widget": { - "component": "MetaSelect", + "component": "SelectConfigurator", "props": { "options": [ { @@ -1578,7 +1578,7 @@ } }, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} } }, @@ -1597,7 +1597,7 @@ } }, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} } }, @@ -1616,7 +1616,7 @@ } }, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} } }, @@ -1673,7 +1673,7 @@ } }, "widget": { - "component": "MetaSelect", + "component": "SelectConfigurator", "props": { "options": [ { @@ -1846,7 +1846,7 @@ } }, "widget": { - "component": "MetaSelect", + "component": "SelectConfigurator", "props": { "options": [ { @@ -1881,7 +1881,7 @@ } }, "widget": { - "component": "MetaSelect", + "component": "SelectConfigurator", "props": { "options": [ { @@ -1916,7 +1916,7 @@ } }, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} } }, @@ -1936,7 +1936,7 @@ } }, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} } }, @@ -2017,7 +2017,7 @@ } }, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} } }, @@ -2141,7 +2141,7 @@ "labelPosition": "top", "type": "string", "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "device": [] @@ -2208,7 +2208,7 @@ "type": "string", "defaultValue": "default", "widget": { - "component": "MetaSelect", + "component": "SelectConfigurator", "props": { "options": [ { @@ -2310,7 +2310,7 @@ "labelPosition": "top", "type": "string", "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "device": [] @@ -2331,7 +2331,7 @@ "cols": 12, "labelPosition": "top", "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "device": [] @@ -2373,7 +2373,7 @@ "cols": 12, "labelPosition": "top", "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "device": [] @@ -2395,7 +2395,7 @@ "labelPosition": "top", "defaultValue": "fixed", "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": { "options": [ { @@ -2766,7 +2766,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -2785,7 +2785,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -2804,7 +2804,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaSelect", + "component": "SelectConfigurator", "props": { "options": [ { @@ -2900,7 +2900,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": { "options": [ { @@ -2975,7 +2975,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -2994,7 +2994,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": { "options": [ { @@ -3100,7 +3100,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": { "options": [ { @@ -3130,7 +3130,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": { "options": [ { @@ -3245,7 +3245,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -3264,7 +3264,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaSelect", + "component": "SelectConfigurator", "props": { "options": [ { @@ -3579,7 +3579,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaSelect", + "component": "SelectConfigurator", "props": { "options": [ { @@ -3681,7 +3681,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -3851,7 +3851,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -3870,7 +3870,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -3889,7 +3889,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -4027,7 +4027,7 @@ "cols": 12, "rules": [], "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} } }, @@ -4187,7 +4187,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -4206,7 +4206,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -4419,7 +4419,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -4438,7 +4438,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -4457,7 +4457,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaSelect", + "component": "SelectConfigurator", "props": { "options": [ { @@ -4548,7 +4548,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -4567,7 +4567,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -4656,7 +4656,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaSelect", + "component": "SelectConfigurator", "props": { "options": [ { @@ -4810,7 +4810,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaSelect", + "component": "SelectConfigurator", "props": { "options": [ { @@ -4962,7 +4962,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -5021,7 +5021,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -5040,7 +5040,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaSelect", + "component": "SelectConfigurator", "props": { "options": [ { @@ -5297,7 +5297,7 @@ "defaultValue": "标签", "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -5317,7 +5317,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -5431,7 +5431,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaSelect", + "component": "SelectConfigurator", "props": { "options": [ { @@ -5738,7 +5738,7 @@ "readOnly": false, "disabled": false, "widget": { - "component": "MetaSelect", + "component": "SelectConfigurator", "props": { "options": [ { @@ -5796,7 +5796,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaSelect", + "component": "SelectConfigurator", "props": { "options": [ { @@ -6069,7 +6069,7 @@ } }, "widget": { - "component": "MetaSelect", + "component": "SelectConfigurator", "props": { "options": [ { @@ -6176,7 +6176,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaSelect", + "component": "SelectConfigurator", "props": { "options": [ { @@ -6468,7 +6468,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -6505,7 +6505,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -6572,7 +6572,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -6591,7 +6591,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -6707,7 +6707,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -6727,7 +6727,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -6876,7 +6876,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -7135,7 +7135,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -7154,7 +7154,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -7174,7 +7174,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -7317,7 +7317,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -7357,7 +7357,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -7596,7 +7596,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -7655,7 +7655,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -7702,7 +7702,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -7721,7 +7721,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -7855,7 +7855,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -7914,7 +7914,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -8046,7 +8046,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": { "dataType": "Array" } @@ -8114,7 +8114,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaSelect", + "component": "SelectConfigurator", "props": { "options": [ { @@ -8257,7 +8257,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -8297,7 +8297,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -8356,7 +8356,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -8579,7 +8579,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -8639,7 +8639,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaSelect", + "component": "SelectConfigurator", "props": { "options": [ { @@ -8822,7 +8822,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -8841,7 +8841,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -8935,7 +8935,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -8976,7 +8976,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} } } @@ -9073,7 +9073,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -9166,7 +9166,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -9298,7 +9298,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -9318,7 +9318,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -9464,7 +9464,7 @@ } }, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} } }, @@ -9506,7 +9506,7 @@ } }, "widget": { - "component": "MetaSelect", + "component": "SelectConfigurator", "props": { "options": [ { @@ -9594,7 +9594,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaSelect", + "component": "SelectConfigurator", "props": { "options": [ { @@ -9677,7 +9677,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaSelect", + "component": "SelectConfigurator", "props": { "options": [ { @@ -9802,7 +9802,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": { "placeholder": "比如：id" } @@ -10061,7 +10061,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -10415,7 +10415,7 @@ "cols": 12, "defaultValue": "total,sizes,prev, pager, next", "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": { "type": "textarea" } @@ -10572,7 +10572,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -10592,7 +10592,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -10987,7 +10987,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -11007,7 +11007,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": { "disabled": true, "placeholder": "请使用变量绑定来绑定函数" @@ -11485,7 +11485,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaSelect", + "component": "SelectConfigurator", "props": { "options": [ { @@ -11557,7 +11557,7 @@ "defaultValue": "提示信息", "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -11576,7 +11576,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": { "disabled": true, "placeholder": "请使用变量绑定来绑定函数" @@ -11727,7 +11727,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaSelect", + "component": "SelectConfigurator", "props": { "options": [ { @@ -11798,7 +11798,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaSelect", + "component": "SelectConfigurator", "props": { "options": [ { @@ -11836,7 +11836,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -11932,7 +11932,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -12027,7 +12027,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -12065,7 +12065,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaInput", + "component": "InputConfigurator", "props": {} }, "description": { @@ -12209,7 +12209,7 @@ } }, "widget": { - "component": "MetaSelect", + "component": "SelectConfigurator", "props": { "options": [ { @@ -12329,7 +12329,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaSelect", + "component": "SelectConfigurator", "props": { "options": [ { @@ -12687,7 +12687,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaSelect", + "component": "SelectConfigurator", "props": { "options": [ { @@ -12740,7 +12740,7 @@ "disabled": false, "cols": 12, "widget": { - "component": "MetaSelect", + "component": "SelectConfigurator", "props": { "options": [ { diff --git a/packages/design-core/src/init.js b/packages/design-core/src/init.js index 217b92289e..86113fb738 100644 --- a/packages/design-core/src/init.js +++ b/packages/design-core/src/init.js @@ -81,10 +81,10 @@ const defaultLifeCycles = { } } -export const init = ({ selector = '#app', registry = defaultRegistry, lifeCycles = {}, metaComponents = [] } = {}) => { +export const init = ({ selector = '#app', registry = defaultRegistry, lifeCycles = {}, configurators = [] } = {}) => { const { beforeAppCreate, appCreated, appMounted } = lifeCycles - registerMetaComponents(metaComponents) + registerMetaComponents(configurators) defaultLifeCycles.beforeAppCreate({ registry }) beforeAppCreate?.({ registry }) diff --git a/packages/design-core/src/registerMetaComponents.js b/packages/design-core/src/registerMetaComponents.js index 3c2ac8d478..93165e90ce 100644 --- a/packages/design-core/src/registerMetaComponents.js +++ b/packages/design-core/src/registerMetaComponents.js @@ -6,8 +6,6 @@ import { addMetaComponents } from '@opentiny/tiny-engine-entry' * 注册TinyEngine默认的 metaComponents */ export const registerMetaComponents = (metaComponents) => { - const { MetaInput, MetaSelect, ...otherComponents } = MetaComponents - - addMetaComponents(Object.entries(otherComponents).map(([name, component]) => ({ name, component }))) + addMetaComponents(Object.entries(MetaComponents).map(([name, component]) => ({ name, component }))) addMetaComponents(metaComponents) } diff --git a/packages/design-core/vite.config.js b/packages/design-core/vite.config.js index 05fe3ca4fc..fb728de8e9 100644 --- a/packages/design-core/vite.config.js +++ b/packages/design-core/vite.config.js @@ -200,7 +200,7 @@ const devAlias = { '@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-meta-components': path.resolve(__dirname, '../meta-components/src/index.js') + '@opentiny/tiny-engine-configurator': path.resolve(__dirname, '../configurator/src/index.js') } const prodAlias = { diff --git a/packages/meta-components/src/index.js b/packages/meta-components/src/index.js deleted file mode 100644 index bfd0efc9ff..0000000000 --- a/packages/meta-components/src/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { default as MetaInput } from './meta-input' -export { default as MetaSelect } from './meta-select' diff --git a/packages/meta-components/src/meta-input/index.js b/packages/meta-components/src/meta-input/index.js deleted file mode 100644 index f84a89546f..0000000000 --- a/packages/meta-components/src/meta-input/index.js +++ /dev/null @@ -1,6 +0,0 @@ -import MetaInput from './MetaInput.vue' - -export default { - name: 'MetaInput', - component: MetaInput -} diff --git a/packages/meta-components/src/meta-select/index.js b/packages/meta-components/src/meta-select/index.js deleted file mode 100644 index 67341cf82e..0000000000 --- a/packages/meta-components/src/meta-select/index.js +++ /dev/null @@ -1,6 +0,0 @@ -import MetaSelect from './MetaSelect.vue' - -export default { - name: 'MetaSelect', - component: MetaSelect -} From 178d3e36678cd9474c687f455905f683b497abc6 Mon Sep 17 00:00:00 2001 From: chilingling Date: Thu, 30 May 2024 19:23:17 -0700 Subject: [PATCH 5/8] fix(configurator): add base info to package.json --- packages/configurator/package.json | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/configurator/package.json b/packages/configurator/package.json index b2b822788f..df8f8f74a1 100644 --- a/packages/configurator/package.json +++ b/packages/configurator/package.json @@ -25,5 +25,16 @@ }, "dependencies": { "@opentiny/tiny-engine-controller": "workspace:*" - } + }, + "publishConfig": { + "access": "public" + }, + "repository": { + "type": "git", + "url": "https://github.com/opentiny/tiny-engine", + "directory": "packages/configurator" + }, + "files": [ + "dist" + ] } From 5c8e22e05fb6dada968712660ef9bf8081051338 Mon Sep 17 00:00:00 2001 From: chilingling Date: Thu, 30 May 2024 19:41:19 -0700 Subject: [PATCH 6/8] feat: rename metaxxx to configurator --- designer-demo/src/MyInputConfigurator.vue | 2 +- packages/common/component/ConfigItem.vue | 6 +++--- packages/configurator/README.md | 2 +- packages/design-core/src/init.js | 4 ++-- .../design-core/src/registerConfigurators.js | 11 +++++++++++ .../design-core/src/registerMetaComponents.js | 11 ----------- packages/entry/README.md | 18 +++++++++--------- packages/entry/src/configurators.js | 13 +++++++++++++ packages/entry/src/index.js | 2 +- packages/entry/src/metaComponents.js | 13 ------------- 10 files changed, 41 insertions(+), 41 deletions(-) create mode 100644 packages/design-core/src/registerConfigurators.js delete mode 100644 packages/design-core/src/registerMetaComponents.js create mode 100644 packages/entry/src/configurators.js delete mode 100644 packages/entry/src/metaComponents.js diff --git a/designer-demo/src/MyInputConfigurator.vue b/designer-demo/src/MyInputConfigurator.vue index 7f76338ad5..47a9b11e53 100644 --- a/designer-demo/src/MyInputConfigurator.vue +++ b/designer-demo/src/MyInputConfigurator.vue @@ -1,5 +1,5 @@ diff --git a/packages/common/component/ConfigItem.vue b/packages/common/component/ConfigItem.vue index a5eb12c40a..565d639bbc 100644 --- a/packages/common/component/ConfigItem.vue +++ b/packages/common/component/ConfigItem.vue @@ -111,7 +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' +import { getConfigurator } from '@opentiny/tiny-engine-entry' const hasRule = (required, rules) => { if (required) { @@ -206,9 +206,9 @@ export default { // TODO: 需要弄清楚 props.metaComponents[widget.value.component] 是什么场景 return multiType.value ? MultiTypeSelector - : getMetaComponent(widget.value.component) || + : getConfigurator(widget.value.component) || props.metaComponents[widget.value.component] || - getMetaComponent('MetaInput') + getConfigurator('InputConfigurator') }) const bindValue = computed(() => { let value = props.property?.widget?.props?.modelValue diff --git a/packages/configurator/README.md b/packages/configurator/README.md index a05eed3d62..fa5949c81e 100644 --- a/packages/configurator/README.md +++ b/packages/configurator/README.md @@ -1,3 +1,3 @@ -# TinyEngine 的 meta component 组件 +# TinyEngine 的 configurator component 组件 右侧属性面板配置物料属性的组件。 diff --git a/packages/design-core/src/init.js b/packages/design-core/src/init.js index 86113fb738..990b498786 100644 --- a/packages/design-core/src/init.js +++ b/packages/design-core/src/init.js @@ -25,7 +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 { registerConfigurators } from './registerConfigurators' import 'virtual:svg-icons-register' @@ -84,7 +84,7 @@ const defaultLifeCycles = { export const init = ({ selector = '#app', registry = defaultRegistry, lifeCycles = {}, configurators = [] } = {}) => { const { beforeAppCreate, appCreated, appMounted } = lifeCycles - registerMetaComponents(configurators) + registerConfigurators(configurators) defaultLifeCycles.beforeAppCreate({ registry }) beforeAppCreate?.({ registry }) diff --git a/packages/design-core/src/registerConfigurators.js b/packages/design-core/src/registerConfigurators.js new file mode 100644 index 0000000000..56669e015a --- /dev/null +++ b/packages/design-core/src/registerConfigurators.js @@ -0,0 +1,11 @@ +// TODO: 抽空 common package 中的 metaComponent +import { MetaComponents } from '@opentiny/tiny-engine-common' +import { addConfigurator } from '@opentiny/tiny-engine-entry' + +/** + * 注册TinyEngine默认的 metaComponents + */ +export const registerConfigurators = (metaComponents) => { + addConfigurator(Object.entries(MetaComponents).map(([name, component]) => ({ name, component }))) + addConfigurator(metaComponents) +} diff --git a/packages/design-core/src/registerMetaComponents.js b/packages/design-core/src/registerMetaComponents.js deleted file mode 100644 index 93165e90ce..0000000000 --- a/packages/design-core/src/registerMetaComponents.js +++ /dev/null @@ -1,11 +0,0 @@ -// TODO: 抽空 common package 中的 metaComponent -import { MetaComponents } from '@opentiny/tiny-engine-common' -import { addMetaComponents } from '@opentiny/tiny-engine-entry' - -/** - * 注册TinyEngine默认的 metaComponents - */ -export const registerMetaComponents = (metaComponents) => { - addMetaComponents(Object.entries(MetaComponents).map(([name, component]) => ({ name, component }))) - addMetaComponents(metaComponents) -} diff --git a/packages/entry/README.md b/packages/entry/README.md index 1abd3d8102..3b761ad256 100644 --- a/packages/entry/README.md +++ b/packages/entry/README.md @@ -1,27 +1,27 @@ # entry(暂定) -## metaComponents +## configurators 往设计器添加 metaComponent，满足右侧属性面板属性设置器自定义组件的需求 -### addMetaComponents +### addConfigurator ```javascript -addMetaComponents([ +addConfigurator([ { - name: 'MetaInput', - component: MetaInput + name: 'InputConfigurator', + component: InputConfigurator }, { - name: 'MetaSelect', - component: MetaSelect + name: 'SelectConfigurator', + component: SelectConfigurator } ]) ``` -### getMetaComponent +### getConfigurator ```javascript -getMetaComponent('MetaInput') +getConfigurator('InputConfigurator') ``` diff --git a/packages/entry/src/configurators.js b/packages/entry/src/configurators.js new file mode 100644 index 0000000000..4957f05a9f --- /dev/null +++ b/packages/entry/src/configurators.js @@ -0,0 +1,13 @@ +const configuratorsMap = new Map() + +export const addConfigurator = (components) => { + if (Array.isArray(components)) { + for (const { name, component } of components) { + configuratorsMap.set(name, component) + } + } +} + +export const getConfigurator = (name) => { + return configuratorsMap.get(name) +} diff --git a/packages/entry/src/index.js b/packages/entry/src/index.js index d06c6641d9..eaea5b879c 100644 --- a/packages/entry/src/index.js +++ b/packages/entry/src/index.js @@ -16,4 +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' +export { getConfigurator, addConfigurator } from './configurators' diff --git a/packages/entry/src/metaComponents.js b/packages/entry/src/metaComponents.js deleted file mode 100644 index a349a42240..0000000000 --- a/packages/entry/src/metaComponents.js +++ /dev/null @@ -1,13 +0,0 @@ -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) -} From 1b0ea30b644136a7979ebe847eb1383d65bc0eb0 Mon Sep 17 00:00:00 2001 From: chilingling Date: Thu, 30 May 2024 20:02:01 -0700 Subject: [PATCH 7/8] fix: rename metaxxx to configurators --- packages/design-core/src/registerConfigurators.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/design-core/src/registerConfigurators.js b/packages/design-core/src/registerConfigurators.js index 56669e015a..22752108c2 100644 --- a/packages/design-core/src/registerConfigurators.js +++ b/packages/design-core/src/registerConfigurators.js @@ -3,9 +3,9 @@ import { MetaComponents } from '@opentiny/tiny-engine-common' import { addConfigurator } from '@opentiny/tiny-engine-entry' /** - * 注册TinyEngine默认的 metaComponents + * 注册用户指定的 configurators */ -export const registerConfigurators = (metaComponents) => { +export const registerConfigurators = (configurators) => { addConfigurator(Object.entries(MetaComponents).map(([name, component]) => ({ name, component }))) - addConfigurator(metaComponents) + addConfigurator(configurators) } From 60dda4faf925582afe094a78af254e9415692b9a Mon Sep 17 00:00:00 2001 From: chilingling Date: Thu, 30 May 2024 20:50:23 -0700 Subject: [PATCH 8/8] fix: refactor code by review --- packages/entry/README.md | 1 - packages/entry/src/configurators.js | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/entry/README.md b/packages/entry/README.md index 3b761ad256..d50a0057c4 100644 --- a/packages/entry/README.md +++ b/packages/entry/README.md @@ -1,6 +1,5 @@ # entry(暂定) - ## configurators 往设计器添加 metaComponent，满足右侧属性面板属性设置器自定义组件的需求 diff --git a/packages/entry/src/configurators.js b/packages/entry/src/configurators.js index 4957f05a9f..8b3d8f7514 100644 --- a/packages/entry/src/configurators.js +++ b/packages/entry/src/configurators.js @@ -1,6 +1,7 @@ const configuratorsMap = new Map() export const addConfigurator = (components) => { + // TODO: 数据结构校验&错误抛出 if (Array.isArray(components)) { for (const { name, component } of components) { configuratorsMap.set(name, component)