@tmagic/editor 1.2.0-beta.2 → 1.2.0-beta.4

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.0-beta.2",
+  "version": "1.2.0-beta.4",
   "name": "@tmagic/editor",
   "sideEffects": [
     "dist/*",
@@ -45,14 +45,14 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.2.0-beta.2",
-    "@tmagic/form": "1.2.0-beta.2",
-    "@tmagic/schema": "1.2.0-beta.2",
-    "@tmagic/stage": "1.2.0-beta.2",
-    "@tmagic/utils": "1.2.0-beta.2",
+    "@tmagic/core": "1.2.0-beta.4",
+    "@tmagic/design": "1.2.0-beta.4",
+    "@tmagic/form": "1.2.0-beta.4",
+    "@tmagic/schema": "1.2.0-beta.4",
+    "@tmagic/stage": "1.2.0-beta.4",
+    "@tmagic/utils": "1.2.0-beta.4",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
-    "element-plus": "^2.2.17",
     "events": "^3.3.0",
     "gesto": "^1.7.0",
     "keycon": "^1.1.2",
@@ -62,8 +62,8 @@
     "vue": "^3.2.37"
   },
   "peerDependencies": {
-    "@tmagic/form": "1.2.0-beta.2",
-    "element-plus": "^2.2.17",
+    "@tmagic/design": "1.2.0-beta.4",
+    "@tmagic/form": "1.2.0-beta.4",
     "monaco-editor": "^0.34.0",
     "vue": "^3.2.37"
   },

package/src/components/ContentMenu.vue

@@ -1,14 +1,14 @@
 <template>
   <div v-if="menuData.length && visible" class="magic-editor-content-menu" ref="menu" :style="menuStyle">
     <div>
-      <tool-button
+      <ToolButton
         v-for="(item, index) in menuData"
         event-type="mouseup"
         :data="item"
         :key="index"
         @mouseup="hide"
         @mouseenter="showSubMenu(item)"
-      ></tool-button>
+      ></ToolButton>
     </div>
     <teleport to="body">
       <content-menu

package/src/components/Icon.vue

@@ -1,16 +1,18 @@
 <template>
-  <el-icon v-if="!icon" class="magic-editor-icon"><Edit></Edit></el-icon>
-  <el-icon v-else-if="typeof icon === 'string' && icon.startsWith('http')" class="magic-editor-icon"
+  <TMagicIcon v-if="!icon" class="magic-editor-icon"><Edit></Edit></TMagicIcon>
+  <TMagicIcon v-else-if="typeof icon === 'string' && icon.startsWith('http')" class="magic-editor-icon"
     ><img :src="icon"
-  /></el-icon>
+  /></TMagicIcon>
   <i v-else-if="typeof icon === 'string'" class="magic-editor-icon" :class="icon"></i>
-  <el-icon v-else class="magic-editor-icon"><component :is="toRaw(icon)"></component></el-icon>
+  <TMagicIcon v-else class="magic-editor-icon"><component :is="toRaw(icon)"></component></TMagicIcon>
 </template>
 
 <script lang="ts" setup>
 import { toRaw } from 'vue';
 import { Edit } from '@element-plus/icons-vue';
 
+import { TMagicIcon } from '@tmagic/design';
+
 defineProps<{
   icon?: any;
 }>();

package/src/components/ToolButton.vue

@@ -7,32 +7,37 @@
     @mousedown="mousedownHandler(data, $event)"
     @mouseup="mouseupHandler(data, $event)"
   >
-    <el-divider v-if="data.type === 'divider'" :direction="data.direction || 'vertical'"></el-divider>
+    <TMagicDivider v-if="data.type === 'divider'" :direction="data.direction || 'vertical'"></TMagicDivider>
     <div v-else-if="data.type === 'text'" class="menu-item-text">{{ data.text }}</div>
 
     <template v-else-if="data.type === 'button'">
-      <el-tooltip v-if="data.tooltip" effect="dark" placement="bottom-start" :content="data.tooltip">
-        <el-button size="small" text :disabled="disabled"
-          ><MIcon v-if="data.icon" :icon="data.icon"></MIcon><span>{{ data.text }}</span></el-button
+      <TMagicTooltip v-if="data.tooltip" effect="dark" placement="bottom-start" :content="data.tooltip">
+        <TMagicButton size="small" text :disabled="disabled"
+          ><MIcon v-if="data.icon" :icon="data.icon"></MIcon><span>{{ data.text }}</span></TMagicButton
         >
-      </el-tooltip>
-      <el-button v-else size="small" text :disabled="disabled"
-        ><MIcon v-if="data.icon" :icon="data.icon"></MIcon><span>{{ data.text }}</span></el-button
+      </TMagicTooltip>
+      <TMagicButton v-else size="small" text :disabled="disabled"
+        ><MIcon v-if="data.icon" :icon="data.icon"></MIcon><span>{{ data.text }}</span></TMagicButton
       >
     </template>
 
-    <el-dropdown v-else-if="data.type === 'dropdown'" trigger="click" :disabled="disabled" @command="dropdownHandler">
+    <TMagicDropdown
+      v-else-if="data.type === 'dropdown'"
+      trigger="click"
+      :disabled="disabled"
+      @command="dropdownHandler"
+    >
       <span class="el-dropdown-link menubar-menu-button">
-        {{ data.text }}<el-icon class="el-icon--right"><ArrowDown></ArrowDown></el-icon>
+        {{ data.text }}<TMagicIcon class="el-icon--right"><ArrowDown></ArrowDown></TMagicIcon>
       </span>
       <template #dropdown>
-        <el-dropdown-menu v-if="data.items && data.items.length">
-          <el-dropdown-item v-for="(subItem, index) in data.items" :key="index" :command="{ data, subItem }">{{
+        <TMagicDropdownMenu v-if="data.items && data.items.length">
+          <TMagicDropdownItem v-for="(subItem, index) in data.items" :key="index" :command="{ data, subItem }">{{
             subItem.text
-          }}</el-dropdown-item>
-        </el-dropdown-menu>
+          }}</TMagicDropdownItem>
+        </TMagicDropdownMenu>
       </template>
-    </el-dropdown>
+    </TMagicDropdown>
 
     <component v-else-if="data.type === 'component'" v-bind="data.props || {}" :is="data.component"></component>
   </div>
@@ -42,6 +47,16 @@
 import { computed, inject } from 'vue';
 import { ArrowDown } from '@element-plus/icons-vue';
 
+import {
+  TMagicButton,
+  TMagicDivider,
+  TMagicDropdown,
+  TMagicDropdownItem,
+  TMagicDropdownMenu,
+  TMagicIcon,
+  TMagicTooltip,
+} from '@tmagic/design';
+
 import MIcon from '../components/Icon.vue';
 import type { MenuButton, MenuComponent, Services } from '../type';
 

package/src/fields/CodeSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="m-fields-code-select" :key="fieldKey">
-    <el-card shadow="never">
+    <TMagicCard shadow="never">
       <template #header>
         <m-fields-select
           :config="selectConfig"
@@ -12,7 +12,7 @@
         ></m-fields-select>
       </template>
       <div class="tool-bar">
-        <el-tooltip class="tool-item" effect="dark" content="查看代码块" placement="top">
+        <TMagicTooltip class="tool-item" effect="dark" content="查看代码块" placement="top">
           <svg
             @click="viewHandler"
             preserveAspectRatio="xMidYMid meet"
@@ -26,17 +26,17 @@
               d="m23 12l-7.071 7.071l-1.414-1.414L20.172 12l-5.657-5.657l1.414-1.414L23 12zM3.828 12l5.657 5.657l-1.414 1.414L1 12l7.071-7.071l1.414 1.414L3.828 12z"
             ></path>
           </svg>
-        </el-tooltip>
+        </TMagicTooltip>
       </div>
-    </el-card>
+    </TMagicCard>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed, defineEmits, defineProps, inject, ref, watchEffect } from 'vue';
-import { ElMessage } from 'element-plus';
 import { cloneDeep, map, xor } from 'lodash-es';
 
+import { TMagicCard, tMagicMessage, TMagicTooltip } from '@tmagic/design';
 import { SelectConfig } from '@tmagic/form';
 
 import type { Services } from '../type';
@@ -128,7 +128,7 @@ const setCombineIds = async (codeIds: string[]) => {
 
 const viewHandler = async () => {
   if (props.model[props.name].length === 0) {
-    ElMessage.error('请先绑定代码块');
+    tMagicMessage.error('请先绑定代码块');
     return;
   }
   // 记录当前已被绑定的代码块，为查看弹窗的展示内容

package/src/fields/UISelect.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="m-fields-ui-select" v-if="uiSelectMode" @click="cancelHandler">
-    <el-button type="danger" :icon="Delete" text style="padding: 0">取消</el-button>
+    <TMagicButton type="danger" :icon="Delete" text style="padding: 0">取消</TMagicButton>
   </div>
   <div class="m-fields-ui-select" v-else @click="startSelect" style="display: flex">
-    <el-tooltip v-if="val" content="清除">
-      <el-button style="padding: 0" type="danger" :icon="Close" text @click.stop="deleteHandler"></el-button>
-    </el-tooltip>
-    <el-tooltip :content="val ? toName + '_' + val : '点击此处选择'">
-      <el-button text style="padding: 0; margin: 0">{{ val ? toName + '_' + val : '点击此处选择' }}</el-button>
-    </el-tooltip>
+    <TMagicTooltip v-if="val" content="清除">
+      <TMagicButton style="padding: 0" type="danger" :icon="Close" text @click.stop="deleteHandler"></TMagicButton>
+    </TMagicTooltip>
+    <TMagicTooltip :content="val ? toName + '_' + val : '点击此处选择'">
+      <TMagicButton text style="padding: 0; margin: 0">{{ val ? toName + '_' + val : '点击此处选择' }}</TMagicButton>
+    </TMagicTooltip>
   </div>
 </template>
 
@@ -16,6 +16,7 @@
 import { computed, inject, ref } from 'vue';
 import { Close, Delete } from '@element-plus/icons-vue';
 
+import { TMagicButton, TMagicTooltip } from '@tmagic/design';
 import { FormState } from '@tmagic/form';
 
 import { Services } from '../type';

package/src/layouts/AddPageBox.vue

@@ -3,7 +3,7 @@
     <div class="m-editor-empty-content">
       <div class="m-editor-empty-button" @click="clickHandler">
         <div>
-          <el-icon><plus /></el-icon>
+          <MIcon :icon="Plus"></MIcon>
         </div>
         <p>新增页面</p>
       </div>
@@ -17,6 +17,7 @@ import { Plus } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/schema';
 
+import MIcon from '../components/Icon.vue';
 import type { Services } from '../type';
 import { generatePageNameByApp } from '../utils';
 

package/src/layouts/Framework.vue

@@ -34,9 +34,9 @@
       </template>
 
       <template v-if="pageLength > 0" #right>
-        <el-scrollbar>
+        <TMagicScrollbar>
           <slot name="props-panel"></slot>
-        </el-scrollbar>
+        </TMagicScrollbar>
       </template>
     </layout>
   </div>
@@ -45,6 +45,7 @@
 <script lang="ts" setup>
 import { computed, inject, ref, watchEffect } from 'vue';
 
+import { TMagicScrollbar } from '@tmagic/design';
 import type { MApp } from '@tmagic/schema';
 
 import { GetColumnWidth, Services } from '../type';

package/src/layouts/PropsPanel.vue

@@ -15,8 +15,8 @@
 
 <script lang="ts" setup>
 import { computed, getCurrentInstance, inject, onMounted, ref, watchEffect } from 'vue';
-import { ElMessage } from 'element-plus';
 
+import { tMagicMessage } from '@tmagic/design';
 import type { FormValue, MForm } from '@tmagic/form';
 import type { MNode } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
@@ -65,13 +65,8 @@ const submit = async () => {
     services?.editorService.update(values);
   } catch (e: any) {
     console.error(e);
-    ElMessage.closeAll();
-    ElMessage.error({
-      duration: 10000,
-      showClose: true,
-      message: e.message,
-      dangerouslyUseHTMLString: true,
-    });
+    tMagicMessage.closeAll();
+    tMagicMessage.error(e.message);
   }
 };
 

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -1,9 +1,9 @@
 <template>
-  <el-scrollbar>
+  <TMagicScrollbar>
     <slot name="component-list-panel-header"></slot>
 
-    <el-collapse class="ui-component-panel" :model-value="collapseValue">
-      <el-input
+    <TMagicCollapse class="ui-component-panel" :model-value="collapseValue">
+      <TMagicInput
         prefix-icon="el-icon-search"
         placeholder="输入关键字进行过滤"
         class="search-input"
@@ -12,8 +12,8 @@
         v-model="searchText"
       />
       <template v-for="(group, index) in list">
-        <el-collapse-item v-if="group.items && group.items.length" :key="index" :name="index">
-          <template #title><i class="el-icon-s-grid"></i>{{ group.title }}</template>
+        <TMagicCollapseItem v-if="group.items && group.items.length" :key="index" :name="`${index}`">
+          <template #title><MIcon :icon="Grid"></MIcon>{{ group.title }}</template>
           <div
             v-for="item in group.items"
             class="component-item"
@@ -27,21 +27,23 @@
             <slot name="component-list-item" :component="item">
               <MIcon :icon="item.icon"></MIcon>
 
-              <el-tooltip effect="dark" placement="bottom" :content="item.text">
+              <TMagicTooltip effect="dark" placement="bottom" :content="item.text">
                 <span>{{ item.text }}</span>
-              </el-tooltip>
+              </TMagicTooltip>
             </slot>
           </div>
-        </el-collapse-item>
+        </TMagicCollapseItem>
       </template>
-    </el-collapse>
-  </el-scrollbar>
+    </TMagicCollapse>
+  </TMagicScrollbar>
 </template>
 
 <script lang="ts" setup>
 import { computed, inject, ref } from 'vue';
+import { Grid } from '@element-plus/icons-vue';
 import serialize from 'serialize-javascript';
 
+import { TMagicCollapse, TMagicCollapseItem, TMagicInput, TMagicScrollbar, TMagicTooltip } from '@tmagic/design';
 import type StageCore from '@tmagic/stage';
 import { removeClassNameByClassName } from '@tmagic/utils';
 
@@ -62,7 +64,7 @@ const list = computed(() =>
 const collapseValue = computed(() =>
   Array(list.value?.length)
     .fill(1)
-    .map((x, i) => i),
+    .map((x, i) => `${i}`),
 );
 
 let timeout: NodeJS.Timeout | undefined;