refactor: migrate meta components

packages/canvas/render/src/builtin/builtin.json

@@ -108,7 +108,7 @@
                           }
                         },
                         "widget": {
-                          "component": "MetaCodeEditor",
+                          "component": "CodeConfigurator",
                           "props": {
                             "language": "json",
                             "tips": {
@@ -186,7 +186,7 @@
                         "cols": 12,
                         "rules": [],
                         "widget": {
-                          "component": "MetaCodeEditor",
+                          "component": "CodeConfigurator",
                           "props": {}
                         }
                       },
@@ -203,7 +203,7 @@
                         "cols": 12,
                         "rules": [],
                         "widget": {
-                          "component": "MetaCollection",
+                          "component": "CollectionConfigurator",
                           "props": {}
                         }
                       }

packages/common/component/ConfigItem.vue

@@ -70,7 +70,7 @@
 
         <div class="action-icon">
           <slot name="suffix"></slot>
-          <meta-code-editor
+          <code-configurator
             v-if="showCodeEditIcon"
             ref="editorModalRef"
             v-bind="widget.props"
@@ -85,13 +85,13 @@
                 <icon-writing class="code-icon" @click="editorModalRef?.open && editorModalRef.open()"></icon-writing>
               </tiny-tooltip>
             </template>
-          </meta-code-editor>
-          <meta-bind-variable
+          </code-configurator>
+          <variable-configurator
             v-if="isTopLayer && !onlyEdit && property.bindState !== false && !isRelatedComponents(widget.component)"
             :model-value="widget.props.modelValue"
             :name="widget.props.name"
             @update:modelValue="onModelUpdate"
-          ></meta-bind-variable>
+          ></variable-configurator>
         </div>
       </div>
     </div>
@@ -104,9 +104,7 @@ import { Popover, Tooltip } from '@opentiny/vue'
 import { IconWriting, IconHelpCircle, IconPlusCircle } from '@opentiny/vue-icon'
 import { typeOf } from '@opentiny/vue-renderless/common/type'
 import i18n from '@opentiny/tiny-engine-controller/js/i18n'
-import { MetaComponents } from '../index'
-import MetaBindVariable from './MetaBindVariable.vue'
-import MetaCodeEditor from './MetaCodeEditor.vue'
+import { CodeConfigurator, VariableConfigurator } from '@opentiny/tiny-engine-configurator'
 import MultiTypeSelector from './MultiTypeSelector.vue'
 import { useHistory, useProperties, useResource, useLayout, useCanvas } from '@opentiny/tiny-engine-controller'
 import { generateFunction } from '@opentiny/tiny-engine-controller/utils'
@@ -123,8 +121,8 @@ const hasRule = (required, rules) => {
 export default {
   components: {
     MultiTypeSelector,
-    MetaCodeEditor,
-    MetaBindVariable,
+    CodeConfigurator,
+    VariableConfigurator,
     TinyPopover: Popover,
     TinyTooltip: Tooltip,
     IconWriting: IconWriting(),
@@ -464,7 +462,6 @@ export default {
       editorModalRef,
       isBindingState,
       component,
-      MetaComponents,
       hidden,
       widget,
       required,

packages/common/component/MetaRelatedEditor.vue

@@ -3,7 +3,7 @@
     <div v-if="isBindingState" class="meta-binding-state">
       {{ `已绑定：${modelValue?.value}` }}
     </div>
-    <meta-code-editor
+    <code-configurator
       v-else
       :modelValue="modelValue"
       :language="language"
@@ -14,21 +14,20 @@
       :showFormatBtn="showFormatBtn"
       :showErrorMsg="showErrorMsg"
       @update:modelValue="saveValue"
-    ></meta-code-editor>
-    <meta-bind-variable :modelValue="bindValue" :name="name" @update:modelValue="saveValue"></meta-bind-variable>
+    ></code-configurator>
+    <variable-configurator :modelValue="bindValue" :name="name" @update:modelValue="saveValue"></variable-configurator>
   </div>
 </template>
 
 <script>
 import { onMounted, ref, watchEffect } from 'vue'
 import { useMessage, useCanvas } from '@opentiny/tiny-engine-controller'
-import MetaCodeEditor from './MetaCodeEditor.vue'
-import MetaBindVariable from './MetaBindVariable.vue'
+import { CodeConfigurator, VariableConfigurator } from '@opentiny/tiny-engine-configurator'
 
 export default {
   components: {
-    MetaCodeEditor,
-    MetaBindVariable
+    CodeConfigurator,
+    VariableConfigurator
   },
   props: {
     buttonText: {

packages/common/component/MultiTypeSelector.vue

@@ -29,7 +29,6 @@
 <script>
 import { reactive } from 'vue'
 import { Tooltip, Popover, Radio, RadioGroup } from '@opentiny/vue'
-import MetaBindVariable from './MetaBindVariable.vue'
 import { MetaComponents } from '../index'
 
 export default {
@@ -38,14 +37,13 @@ export default {
     TinyTooltip: Tooltip,
     TinyPopover: Popover,
     TinyRadio: Radio,
-    TinyRadioGroup: RadioGroup,
-    MetaBindVariable
+    TinyRadioGroup: RadioGroup
   },
   inheritAttrs: false,
   props: {
     meta: {
       type: Object,
-      default: {}
+      default: () => {}
     },
     label: {
       type: String,
@@ -69,15 +67,16 @@ export default {
       return result
     }
 
+    const currentType = getModelValueType(props.meta.type, props.meta.widget?.props?.modelValue)
+    const defaultType = getModelValueType(props.meta.type, props.meta.defaultValue)
+
     const initModelValue = () =>
       props.meta.type.map((type) => {
         if (type === currentType) return { modelValue: props.meta.widget?.props?.modelValue }
         if (type === defaultType) return { modelValue: props.meta.defaultValue }
         return { modelValue: null }
       })
 
-    const currentType = getModelValueType(props.meta.type, props.meta.widget?.props?.modelValue)
-    const defaultType = getModelValueType(props.meta.type, props.meta.defaultValue)
     const state = reactive({
       type: currentType, // 当前选中的组件类型
       typesValue: initModelValue() // 保存多个组件的modelValue

packages/common/index.js

@@ -15,10 +15,15 @@ import {
   CascaderConfigurator,
   CheckBoxConfigurator,
   CheckboxGroupConfigurator,
+  CodeConfigurator,
+  CodeListConfigurator,
+  CollectionConfigurator,
+  ColorConfigurator,
   DatePickerConfigurator,
   FormConfigurator,
   HtmlAttributesConfigurator,
   HtmlTextConfigurator,
+  I18nConfigurator,
   InputConfigurator,
   IpSectionConfigurator,
   JsSlotConfigurator,
@@ -29,7 +34,8 @@ import {
   SelectIconConfigurator,
   SliderConfigurator,
   SlotConfigurator,
-  SwitchConfigurator
+  SwitchConfigurator,
+  VariableConfigurator
 } from '@opentiny/tiny-engine-configurator'
 
 import PluginSetting from './component/PluginSetting.vue'
@@ -43,22 +49,16 @@ import ConfigItem from './component/ConfigItem.vue'
 import ConfigRender from './component/ConfigRender.vue'
 
 import MetaArrayItem from './component/MetaArrayItem.vue'
-import MetaBindI18n from './component/MetaBindI18n.vue'
-import MetaBindVariable from './component/MetaBindVariable.vue'
 import MetaListActions from './component/MetaListActions.vue'
-import MetaCodeEditor from './component/MetaCodeEditor.vue'
-import MetaCodeEditorList from './component/MetaCodeEditorList.vue'
-import MetaCollection from './component/MetaCollection.vue'
-import MetaColor from './component/MetaColor.vue'
 import MetaGroupItem from './component/MetaGroupItem.vue'
 import MetaLayoutGrid from './component/MetaLayoutGrid.vue'
 import MetaListTitle from './component/MetaListTitle.vue'
 import MetaListItems from './component/MetaListItems.vue'
 import MetaListItem from './component/MetaListItem.vue'
 import MetaModal, { useModal } from './component/MetaModal.vue'
 import MetaPopover from './component/MetaPopover.vue'
-import MetaContainer from './component/MetaContainer.vue'
 import VideoGuide from './component/VideoGuide.vue'
+import MetaContainer from './component/MetaContainer.vue'
 import MonacoEditor from './component/MonacoEditor.vue'
 import BlockHistoryList from './component/BlockHistoryList.vue'
 import BlockHistoryTemplate from './component/BlockHistoryTemplate.vue'
@@ -111,14 +111,14 @@ export const injectGlobalComponents = {
 // TODO: 后面由各自所需代码各自引入，然后删除
 export const MetaComponents = {
   MetaArrayItem,
-  MetaBindI18n,
-  MetaBindVariable,
+  MetaBindI18n: I18nConfigurator,
+  MetaBindVariable: VariableConfigurator,
   MetaButtonGroup: ButtonGroupConfigurator,
   MetaCheckBox: CheckBoxConfigurator,
   MetaCascader: CascaderConfigurator,
-  MetaCodeEditor,
-  MetaCodeEditorList,
-  MetaColor,
+  MetaCodeEditor: CodeConfigurator,
+  MetaCodeEditorList: CodeListConfigurator,
+  MetaColor: ColorConfigurator,
   MetaDatePicker: DatePickerConfigurator,
   MetaGroupItem,
   MetaInput: InputConfigurator,
@@ -138,7 +138,7 @@ export const MetaComponents = {
   MetaListItems,
   MetaListItem,
   MetaForm: FormConfigurator,
-  MetaCollection,
+  MetaCollection: CollectionConfigurator,
   MetaContainer,
   MetaJsSlot: JsSlotConfigurator,
   MetaSlot: SlotConfigurator,
@@ -153,12 +153,12 @@ export const MetaComponents = {
 }
 
 export {
-  MetaBindI18n,
-  MetaBindVariable,
+  I18nConfigurator as MetaBindI18n,
+  VariableConfigurator as MetaBindVariable,
   CheckBoxConfigurator as MetaCheckBox,
-  MetaCodeEditor,
-  MetaCodeEditorList,
-  MetaColor,
+  CodeConfigurator as MetaCodeEditor,
+  CodeListConfigurator as MetaCodeEditorList,
+  ColorConfigurator as MetaColor,
   DatePickerConfigurator as MetaDatePicker,
   MetaDescription,
   InputConfigurator as MetaInput,
@@ -195,7 +195,7 @@ export {
   BlockLinkEvent,
   BlockDescription,
   PluginBlockList,
-  MetaCollection,
+  CollectionConfigurator as MetaCollection,
   ButtonGroup,
   CloseIcon,
   LifeCycles,

packages/configurator/package.json

@@ -21,10 +21,15 @@
   },
   "peerDependencies": {
     "@opentiny/vue": "^3.14.0",
+    "@opentiny/vue-icon": "^3.14.0",
     "vue": "^3.4.15"
   },
   "dependencies": {
-    "@opentiny/tiny-engine-controller": "workspace:*"
+    "@opentiny/tiny-engine-controller": "workspace:*",
+    "@opentiny/tiny-engine-http": "workspace:*",
+    "@opentiny/tiny-engine-utils": "workspace:*",
+    "@vue/shared": "^3.3.4",
+    "monaco-editor": "0.33.0"
   },
   "publishConfig": {
     "access": "public"

packages/common/component/MetaCodeEditor.vue → packages/configurator/src/code-configurator/CodeConfigurator.vue

@@ -66,12 +66,12 @@
 </template>
 
 <script>
-import { reactive, ref, computed, watchEffect, nextTick } from 'vue'
+import { VueMonaco } from '../components' // TODO 等 common 包移除了 configurator 依赖后再更换成 @opentiny/tiny-engine-common
+import { formatString } from '@opentiny/tiny-engine-controller/js/ast'
+import i18n from '@opentiny/tiny-engine-controller/js/i18n'
 import { Button, DialogBox } from '@opentiny/vue'
 import { iconChevronDown, iconChevronUp } from '@opentiny/vue-icon'
-import VueMonaco from './VueMonaco.vue'
-import i18n from '@opentiny/tiny-engine-controller/js/i18n'
-import { formatString } from '@opentiny/tiny-engine-controller/js/ast'
+import { computed, nextTick, reactive, ref, watchEffect } from 'vue'
 
 export default {
   components: {

packages/common/component/MetaCodeEditorList.vue → packages/configurator/src/code-list-configurator/CodeListConfigurator.vue

@@ -44,7 +44,7 @@ import { getCurrentInstance, reactive, ref, watchEffect } from 'vue'
 import { Button, Tabs, TabItem, Input, ButtonGroup, Switch, Select } from '@opentiny/vue'
 import { IconClose } from '@opentiny/vue-icon'
 import { theme } from '@opentiny/tiny-engine-controller/adapter'
-import VueMonaco from './VueMonaco.vue'
+import { VueMonaco } from '../components'
 
 export default {
   components: {
@@ -76,7 +76,7 @@ export default {
     }
   },
   emits: ['save'],
-  setup(props, { emit, attrs: { meta } }) {
+  setup(props, { emit }) {
     const editorState = reactive({
       show: false,
       created: false,

packages/common/component/MetaCollection.vue → packages/configurator/src/collection-configurator/CollectionConfigurator.vue

@@ -10,11 +10,11 @@
 </template>
 
 <script lang="jsx">
-import { ref, nextTick } from 'vue'
 import { useApp, useModal } from '@opentiny/tiny-engine-controller'
-import { Select, Option, Tooltip } from '@opentiny/vue'
 import { useHttp } from '@opentiny/tiny-engine-http'
+import { Option, Select, Tooltip } from '@opentiny/vue'
 import { IconConmentRefresh } from '@opentiny/vue-icon'
+import { nextTick, ref } from 'vue'
 
 export default {
   components: {

packages/common/component/MetaColor.vue → packages/configurator/src/color-configurator/ColorConfigurator.vue

@@ -9,8 +9,8 @@
 </template>
 
 <script>
-import { ref, watchEffect } from 'vue'
 import { Input } from '@opentiny/vue'
+import { ref, watchEffect } from 'vue'
 
 export default {
   components: {
@@ -30,10 +30,6 @@ export default {
   setup(props, { emit }) {
     const color = ref(props.modelValue)
 
-    const changeColor = (event) => {
-      change(event.target.value)
-    }
-
     const change = (value) => {
       emit('update:modelValue', value)
       emit('change', value)
@@ -43,6 +39,10 @@ export default {
       color.value = props.modelValue
     })
 
+    const changeColor = (event) => {
+      change(event.target.value)
+    }
+
     return {
       color,
       change,