chore: 更新element-plus, tabpane只能是tabs的子元素，不能对tabpane进行二次封装

docs/package.json

@@ -14,7 +14,7 @@
     "@tmagic/form": "1.2.0-beta.9",
     "@tmagic/schema": "1.2.0-beta.9",
     "@tmagic/utils": "1.2.0-beta.9",
-    "element-plus": "^2.2.17",
+    "element-plus": "^2.2.19",
     "highlight.js": "^11.2.0",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",

magic-admin/web/package.json

@@ -17,7 +17,7 @@
     "axios": "^0.27.2",
     "axios-jsonp": "^1.0.4",
     "core-js": "^3.20.0",
-    "element-plus": "^2.2.17",
+    "element-plus": "^2.2.19",
     "js-cookie": "^3.0.0",
     "moment": "^2.29.3",
     "moment-timezone": "^0.5.34",

packages/editor/src/layouts/sidebar/Sidebar.vue

@@ -6,46 +6,91 @@
     type="card"
     tab-position="left"
   >
-    <tab-pane v-for="(item, index) in data.items" :key="index" :data="item">
-      <template #layer-panel-header v-if="item === 'layer'">
-        <slot name="layer-panel-header"></slot>
+    <component :is="uiComponent.component" v-for="(config, index) in sideBarItems" :key="index" :name="config.text">
+      <template #label>
+        <div :key="config.text">
+          <MIcon v-if="config.icon" :icon="config.icon"></MIcon>
+          <div v-if="config.text" class="magic-editor-tab-panel-title">{{ config.text }}</div>
+        </div>
       </template>
 
-      <template #layer-node-content="{ node, data }" v-if="item === 'layer'">
-        <slot name="layer-node-content" :data="data" :node="node"></slot>
+      <component v-if="config" :is="config.component" v-bind="config.props || {}" v-on="config?.listeners || {}">
+        <template
+          #component-list-panel-header
+          v-if="config.$key === 'component-list' || config.slots?.componentListPanelHeader"
+        >
+          <slot v-if="config.$key === 'component-list'" name="component-list-panel-header"></slot>
+          <component v-else-if="config.slots?.componentListPanelHeader" :is="config.slots.componentListPanelHeader" />
         </template>
 
-      <template #component-list-panel-header v-if="item === 'component-list'">
-        <slot name="component-list-panel-header"></slot>
+        <template
+          #component-list-item="{ component }"
+          v-if="config.$key === 'component-list' || config.slots?.componentListItem"
+        >
+          <slot v-if="config.$key === 'component-list'" name="component-list-item" :component="component"></slot>
+          <component
+            v-else-if="config.slots?.componentListItem"
+            :is="config.slots.componentListItem"
+            :component="component"
+          />
         </template>
 
-      <template #component-list-item="{ component }" v-if="item === 'component-list'">
-        <slot name="component-list-item" :component="component"></slot>
+        <template #layer-panel-header v-if="config.$key === 'layer' || config.slots?.layerPanelHeader">
+          <slot v-if="config.$key === 'layer'" name="layer-panel-header"></slot>
+          <component v-else-if="config.slots?.layerPanelHeader" :is="config.slots.layerPanelHeader" />
         </template>
 
-      <template #code-block-panel-header v-if="item === 'code-block'">
-        <slot name="code-block-panel-header"></slot>
+        <template #code-block-panel-header v-if="config.$key === 'code-block' || config.slots?.codeBlockPanelHeader">
+          <slot v-if="config.$key === 'code-block'" name="code-block-panel-header"></slot>
+          <component v-else-if="config.slots?.codeBlockPanelHeader" :is="config.slots.codeBlockPanelHeader" />
         </template>
 
-      <template #code-block-panel-tool="{ id, data }" v-if="item === 'code-block'">
-        <slot name="code-block-panel-tool" :id="id" :data="data"></slot>
+        <template
+          #code-block-panel-tool="{ id, data }"
+          v-if="config.$key === 'code-block' || config.slots?.codeBlockPanelTool"
+        >
+          <slot v-if="config.$key === 'code-block'" name="code-block-panel-tool" :id="id" :data="data"></slot>
+          <component v-else-if="config.slots?.codeBlockPanelTool" :is="config.slots.codeBlockPanelTool" />
         </template>
 
-      <template #code-block-edit-panel-header="{ id }" v-if="item === 'code-block'">
-        <slot name="code-block-edit-panel-header" :id="id"></slot>
+        <template
+          #code-block-edit-panel-header="{ id }"
+          v-if="config.$key === 'code-block' || config.slots?.codeBlockEditPanelHeader"
+        >
+          <slot v-if="config.$key === 'code-block'" name="code-block-edit-panel-header" :id="id"></slot>
+          <component v-else-if="config.slots?.codeBlockEditPanelHeader" :is="config.slots.codeBlockEditPanelHeader" />
         </template>
-    </tab-pane>
+
+        <template
+          #layer-node-content="{ data: nodeData, node }"
+          v-if="config.$key === 'layer' || config.slots?.layerNodeContent"
+        >
+          <slot v-if="config.$key === 'layer'" name="layer-node-content" :data="nodeData" :node="node"></slot>
+          <component
+            v-else-if="config.slots?.layerNodeContent"
+            :is="config.slots.layerNodeContent"
+            :data="nodeData"
+            :node="node"
+          />
+        </template>
+      </component>
+    </component>
   </TMagicTabs>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
+import { Coin, EditPen, Files } from '@element-plus/icons-vue';
 
-import { TMagicTabs } from '@tmagic/design';
+import { getConfig, TMagicTabs } from '@tmagic/design';
 
+import MIcon from '../../components/Icon.vue';
+import type { SideComponent, SideItem } from '../../type';
 import { SideBarData } from '../../type';
 
-import TabPane from './TabPane.vue';
+import CodeBlockList from './code-block/CodeBlockList.vue';
+import ComponentListPanel from './ComponentListPanel.vue';
+import LayerPanel from './LayerPanel.vue';
 
 const props = withDefaults(
   defineProps<{
@@ -56,8 +101,43 @@ const props = withDefaults(
   },
 );
 
+const uiComponent = getConfig('components').tabPane;
+
 const activeTabName = ref(props.data?.status);
 
+const getItemConfig = (data: SideItem): SideComponent => {
+  const map: Record<string, SideComponent> = {
+    'component-list': {
+      $key: 'component-list',
+      type: 'component',
+      icon: Coin,
+      text: '组件',
+      component: ComponentListPanel,
+      slots: {},
+    },
+    layer: {
+      $key: 'layer',
+      type: 'component',
+      icon: Files,
+      text: '已选组件',
+      component: LayerPanel,
+      slots: {},
+    },
+    'code-block': {
+      $key: 'code-block',
+      type: 'component',
+      icon: EditPen,
+      text: '代码编辑',
+      component: CodeBlockList,
+      slots: {},
+    },
+  };
+
+  return typeof data === 'string' ? map[data] : data;
+};
+
+const sideBarItems = computed(() => props.data.items.map((item) => getItemConfig(item)));
+
 watch(
   () => props.data.status,
   (status) => {

packages/editor/src/layouts/sidebar/TabPane.vue

@@ -1,118 +0,0 @@
-<template>
-  <TMagicTabPane v-if="config" :name="config.text">
-    <template #label>
-      <div :key="config.text">
-        <m-icon v-if="config.icon" :icon="config.icon"></m-icon>
-        <div v-if="config.text" class="magic-editor-tab-panel-title">{{ config.text }}</div>
-      </div>
-    </template>
-
-    <component :is="config.component" v-bind="config.props || {}" v-on="config?.listeners || {}">
-      <template #component-list-panel-header v-if="data === 'component-list' || config.slots?.componentListPanelHeader">
-        <slot v-if="data === 'component-list'" name="component-list-panel-header"></slot>
-        <component v-else-if="config.slots?.componentListPanelHeader" :is="config.slots.componentListPanelHeader" />
-      </template>
-
-      <template
-        #component-list-item="{ component }"
-        v-if="data === 'component-list' || config.slots?.componentListItem"
-      >
-        <slot v-if="data === 'component-list'" name="component-list-item" :component="component"></slot>
-        <component
-          v-else-if="config.slots?.componentListItem"
-          :is="config.slots.componentListItem"
-          :component="component"
-        />
-      </template>
-
-      <template #layer-panel-header v-if="data === 'layer' || config.slots?.layerPanelHeader">
-        <slot v-if="data === 'layer'" name="layer-panel-header"></slot>
-        <component v-else-if="config.slots?.layerPanelHeader" :is="config.slots.layerPanelHeader" />
-      </template>
-
-      <template #code-block-panel-header v-if="data === 'code-block' || config.slots?.codeBlockPanelHeader">
-        <slot v-if="data === 'code-block'" name="code-block-panel-header"></slot>
-        <component v-else-if="config.slots?.codeBlockPanelHeader" :is="config.slots.codeBlockPanelHeader" />
-      </template>
-
-      <template #code-block-panel-tool="{ id, data }" v-if="data === 'code-block' || config.slots?.codeBlockPanelTool">
-        <slot v-if="data === 'code-block'" name="code-block-panel-tool" :id="id" :data="data"></slot>
-        <component v-else-if="config.slots?.codeBlockPanelTool" :is="config.slots.codeBlockPanelTool" />
-      </template>
-
-      <template
-        #code-block-edit-panel-header="{ id }"
-        v-if="data === 'code-block' || config.slots?.codeBlockEditPanelHeader"
-      >
-        <slot v-if="data === 'code-block'" name="code-block-edit-panel-header" :id="id"></slot>
-        <component v-else-if="config.slots?.codeBlockEditPanelHeader" :is="config.slots.codeBlockEditPanelHeader" />
-      </template>
-
-      <template
-        #layer-node-content="{ data: nodeData, node }"
-        v-if="data === 'layer' || config.slots?.layerNodeContent"
-      >
-        <slot v-if="data === 'layer'" name="layer-node-content" :data="nodeData" :node="node"></slot>
-        <component
-          v-else-if="config.slots?.layerNodeContent"
-          :is="config.slots.layerNodeContent"
-          :data="nodeData"
-          :node="node"
-        />
-      </template>
-    </component>
-  </TMagicTabPane>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { Coin, EditPen, Files } from '@element-plus/icons-vue';
-
-import { TMagicTabPane } from '@tmagic/design';
-
-import MIcon from '../../components/Icon.vue';
-import { SideComponent, SideItem } from '../../type';
-
-import CodeBlockList from './code-block/CodeBlockList.vue';
-import ComponentListPanel from './ComponentListPanel.vue';
-import LayerPanel from './LayerPanel.vue';
-
-const props = defineProps<{
-  data?: SideItem;
-}>();
-
-const config = computed<SideComponent | undefined>(() => {
-  if (typeof props.data !== 'string') {
-    return props.data;
-  }
-
-  switch (props.data) {
-    case 'component-list':
-      return {
-        type: 'component',
-        icon: Coin,
-        text: '组件',
-        component: ComponentListPanel,
-        slots: {},
-      };
-    case 'layer':
-      return {
-        type: 'component',
-        icon: Files,
-        text: '已选组件',
-        component: LayerPanel,
-        slots: {},
-      };
-    case 'code-block':
-      return {
-        type: 'component',
-        icon: EditPen,
-        text: '代码编辑',
-        component: CodeBlockList,
-        slots: {},
-      };
-    default:
-      return undefined;
-  }
-});
-</script>

packages/editor/src/type.ts

@@ -200,6 +200,7 @@ export interface MenuComponent {
   /** 是否显示，默认为true */
   className?: string;
   display?: boolean | ((data?: Services) => Promise<boolean> | boolean);
+  [key: string]: any;
 }
 
 /**

packages/element-plus-adapter/package.json

@@ -34,11 +34,11 @@
     "typescript"
   ],
   "dependencies": {
-    "element-plus": "^2.2.17",
+    "element-plus": "^2.2.19",
     "vue": "^3.2.37"
   },
   "peerDependencies": {
-    "element-plus": "^2.2.17",
+    "element-plus": "^2.2.19",
     "vue": "^3.2.37"
   },
   "devDependencies": {

packages/form/src/containers/Tabs.vue

@@ -10,8 +10,9 @@
     @tab-remove="onTabRemove"
   >
     <template v-for="(tab, tabIndex) in tabs">
-      <TMagicTabPane
+      <component
         v-if="display(tab.display) && tabItems(tab).length"
+        :is="uiComponent.component"
         :key="tab[mForm?.keyProp || '__key'] ?? tabIndex"
         :name="filter(tab.status) || tabIndex.toString()"
         :label="filter(tab.title)"
@@ -36,7 +37,7 @@
           :expand-more="expandMore"
           @change="changeHandler"
         ></Container>
-      </TMagicTabPane>
+      </component>
     </template>
   </TMagicTabs>
 </template>
@@ -45,13 +46,15 @@
 import { computed, inject, ref, watchEffect } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
-import { TMagicTabPane, TMagicTabs } from '@tmagic/design';
+import { getConfig, TMagicTabs } from '@tmagic/design';
 
 import { FormState, TabConfig, TabPaneConfig } from '../schema';
 import { display as displayFunc, filterFunction } from '../utils/form';
 
 import Container from './Container.vue';
 
+const uiComponent = getConfig('components').tabPane;
+
 const getActive = (mForm: FormState | undefined, props: any, activeTabName: string) => {
   const { config, model, prop } = props;
   const { active } = config;

playground/package.json

@@ -19,7 +19,7 @@
     "@tmagic/schema": "1.2.0-beta.9",
     "@tmagic/stage": "1.2.0-beta.9",
     "@tmagic/utils": "1.2.0-beta.9",
-    "element-plus": "^2.2.17",
+    "element-plus": "^2.2.19",
     "monaco-editor": "^0.34.0",
     "serialize-javascript": "^6.0.0",
     "terser": "^5.14.2",

pnpm-lock.yaml

@@ -87,7 +87,7 @@ importers:
       '@vuepress/client': ^2.0.0-beta.51
       '@vuepress/plugin-search': ^2.0.0-beta.51
       '@vuepress/theme-default': ^2.0.0-beta.51
-      element-plus: ^2.2.17
+      element-plus: ^2.2.19
       highlight.js: ^11.2.0
       lodash: ^4.17.21
       lodash-es: ^4.17.21
@@ -102,7 +102,7 @@ importers:
       '@tmagic/form': link:../packages/form
       '@tmagic/schema': link:../packages/schema
       '@tmagic/utils': link:../packages/utils
-      element-plus: 2.2.17_vue@3.2.37
+      element-plus: 2.2.19_vue@3.2.37
       highlight.js: 11.5.1
       lodash: 4.17.21
       lodash-es: 4.17.21
@@ -250,13 +250,13 @@ importers:
   packages/element-plus-adapter:
     specifiers:
       '@types/node': ^15.12.4
-      element-plus: ^2.2.17
+      element-plus: ^2.2.19
       rimraf: ^3.0.2
       typescript: ^4.7.4
       vite: ^3.1.3
       vue: ^3.2.37
     dependencies:
-      element-plus: 2.2.17_vue@3.2.37
+      element-plus: 2.2.19_vue@3.2.37
       vue: 3.2.37
     devDependencies:
       '@types/node': 15.14.9
@@ -491,7 +491,7 @@ importers:
       '@vitejs/plugin-vue': ^3.1.0
       '@vitejs/plugin-vue-jsx': ^1.3.10
       '@vue/compiler-sfc': ^3.2.37
-      element-plus: ^2.2.17
+      element-plus: ^2.2.19
       monaco-editor: ^0.34.0
       sass: ^1.35.1
       serialize-javascript: ^6.0.0
@@ -510,7 +510,7 @@ importers:
       '@tmagic/schema': link:../packages/schema
       '@tmagic/stage': link:../packages/stage
       '@tmagic/utils': link:../packages/utils
-      element-plus: 2.2.17_vue@3.2.37
+      element-plus: 2.2.19_vue@3.2.37
       monaco-editor: 0.34.0
       serialize-javascript: 6.0.0
       terser: 5.14.2
@@ -3528,8 +3528,8 @@ packages:
     resolution: {integrity: sha512-H+mFNKow6gi2P5Gi2d1Fvd3TUEJlB9CF7zYaIV9T83BE3wP1xZ0mRPbNTm0KUjyd1QiVy7iKXuIcjlDtBQMiAQ==}
     dev: true
 
-  /element-plus/2.2.17_vue@3.2.37:
-    resolution: {integrity: sha512-MGwMIE/q+FFD3kgS23x8HIe5043tmD1cTRwjhIX9o6fim1avFnUkrsfYRvybbz4CkyqSb185EheZS5AUPpXh2g==}
+  /element-plus/2.2.19_vue@3.2.37:
+    resolution: {integrity: sha512-uN0gt9lUus/IHzu5J6vkbYoYJgUtU05osdtFv9RO27bHKOG5GN7dH6uA3OKfkQQ6R2sV8ZxY1rc9PH1X8Dgrow==}
     peerDependencies:
       vue: ^3.2.0
     dependencies: