@tmagic/editor 1.3.8 → 1.3.10

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.8",
+  "version": "1.3.10",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -42,16 +42,17 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.3.1",
-    "@tmagic/core": "1.3.8",
-    "@tmagic/dep": "1.3.8",
-    "@tmagic/design": "1.3.8",
-    "@tmagic/form": "1.3.8",
-    "@tmagic/schema": "1.3.8",
-    "@tmagic/stage": "1.3.8",
-    "@tmagic/table": "1.3.8",
-    "@tmagic/utils": "1.3.8",
+    "@tmagic/core": "1.3.10",
+    "@tmagic/dep": "1.3.10",
+    "@tmagic/design": "1.3.10",
+    "@tmagic/form": "1.3.10",
+    "@tmagic/schema": "1.3.10",
+    "@tmagic/stage": "1.3.10",
+    "@tmagic/table": "1.3.10",
+    "@tmagic/utils": "1.3.10",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
+    "emmet-monaco-es": "^5.3.0",
     "events": "^3.3.0",
     "gesto": "^1.19.1",
     "keycon": "^1.4.0",
@@ -62,8 +63,8 @@
     "vue": "^3.3.8"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.8",
-    "@tmagic/form": "1.3.8",
+    "@tmagic/design": "1.3.10",
+    "@tmagic/form": "1.3.10",
     "monaco-editor": "^0.41.0",
     "vue": "^3.3.8"
   },

package/src/components/CodeBlockEditor.vue

@@ -18,7 +18,7 @@
     @closed="closedHandler"
   >
     <template #left>
-      <TMagicButton type="primary" text @click="difVisible = true">查看修改</TMagicButton>
+      <TMagicButton type="primary" link @click="difVisible = true">查看修改</TMagicButton>
     </template>
   </component>
 

package/src/components/FloatingBox.vue

@@ -6,7 +6,7 @@
           <span>{{ title }}</span>
         </slot>
         <div>
-          <TMagicButton text size="small" :icon="Close" @click="closeHandler"></TMagicButton>
+          <TMagicButton link size="small" :icon="Close" @click="closeHandler"></TMagicButton>
         </div>
       </div>
       <div class="m-editor-float-box-body">

package/src/components/ToolButton.vue

@@ -12,11 +12,11 @@
 
     <template v-else-if="data.type === 'button'">
       <TMagicTooltip v-if="data.tooltip" effect="dark" placement="bottom-start" :content="data.tooltip">
-        <TMagicButton size="small" text :disabled="disabled"
+        <TMagicButton size="small" link :disabled="disabled"
           ><MIcon v-if="data.icon" :icon="data.icon"></MIcon><span>{{ data.text }}</span></TMagicButton
         >
       </TMagicTooltip>
-      <TMagicButton v-else size="small" text :disabled="disabled" :title="data.text"
+      <TMagicButton v-else size="small" link :disabled="disabled" :title="data.text"
         ><MIcon v-if="data.icon" :icon="data.icon"></MIcon><span>{{ data.text }}</span></TMagicButton
       >
     </template>

package/src/fields/EventSelect.vue

@@ -36,7 +36,7 @@
           ></m-form-container>
           <TMagicButton
             style="color: #f56c6c"
-            text
+            link
             :icon="Delete"
             :disabled="disabled"
             :size="size"

package/src/fields/KeyValue.vue

@@ -51,7 +51,7 @@
       v-if="config.advanced"
       size="default"
       :disabled="disabled"
-      text
+      link
       :icon="CodeIcon"
       @click="showCode = !showCode"
     ></TMagicButton>

package/src/fields/UISelect.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="m-fields-ui-select" v-if="uiSelectMode" @click="cancelHandler">
-    <TMagicButton type="danger" :icon="Delete" :disabled="disabled" :size="size" text style="padding: 0"
+    <TMagicButton type="danger" :icon="Delete" :disabled="disabled" :size="size" link style="padding: 0"
       >取消</TMagicButton
     >
   </div>
@@ -13,14 +13,14 @@
           :icon="Close"
           :disabled="disabled"
           :size="size"
-          text
+          link
           @click.stop="deleteHandler"
         ></TMagicButton>
       </TMagicTooltip>
 
       <TMagicTooltip content="点击选中组件" placement="top">
         <TMagicButton
-          text
+          link
           style="padding: 0; margin: 0"
           :disabled="disabled"
           :size="size"
@@ -33,7 +33,7 @@
     </template>
 
     <TMagicTooltip v-else content="点击此处选择" placement="top">
-      <TMagicButton text style="padding: 0; margin: 0" :disabled="disabled" :size="size" @click="startSelect"
+      <TMagicButton link style="padding: 0; margin: 0" :disabled="disabled" :size="size" @click="startSelect"
         >点击此处选择</TMagicButton
       >
     </TMagicTooltip>

package/src/layouts/CodeEditor.vue

@@ -22,12 +22,12 @@
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { FullScreen } from '@element-plus/icons-vue';
 import { throttle } from 'lodash-es';
-import * as monaco from 'monaco-editor';
 import serialize from 'serialize-javascript';
 
 import { TMagicButton } from '@tmagic/design';
 
 import { getConfig } from '@editor/utils/config';
+import monaco from '@editor/utils/monaco-editor';
 
 defineOptions({
   name: 'MEditorCodeEditor',

package/src/layouts/page-bar/SwitchTypeButton.vue

@@ -4,7 +4,7 @@
     class="m-editor-page-bar-switch-type-button"
     size="small"
     :key="item.type"
-    text
+    link
     :class="{ active: modelValue === item.type }"
     :type="modelValue === item.type ? 'primary' : ''"
     @click="clickHandler(item.type)"

package/src/layouts/workspace/Breadcrumb.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="nodes.length === 1" class="m-editor-breadcrumb">
     <template v-for="(item, index) in path" :key="item.id">
-      <TMagicButton text :disabled="item.id === node?.id" @click="select(item)">{{ item.name }}</TMagicButton
+      <TMagicButton link :disabled="item.id === node?.id" @click="select(item)">{{ item.name }}</TMagicButton
       ><span v-if="index < path.length - 1">/</span>
     </template>
   </div>

package/src/services/editor.ts

@@ -775,17 +775,23 @@ class Editor extends BaseService {
     const layout = await this.getLayout(parent, node);
     const isRelative = layout === Layout.RELATIVE;
 
-    brothers.splice(index, 1);
-
+    let offsetIndex: number;
     if (offset === LayerOffset.TOP) {
-      brothers.splice(isRelative ? 0 : brothers.length, 0, node);
+      offsetIndex = isRelative ? 0 : brothers.length;
     } else if (offset === LayerOffset.BOTTOM) {
-      brothers.splice(isRelative ? brothers.length : 0, 0, node);
+      offsetIndex = isRelative ? brothers.length : 0;
     } else {
-      brothers.splice(index + (isRelative ? -offset : offset), 0, node);
+      offsetIndex = index + (isRelative ? -offset : offset);
     }
 
+    if ((offsetIndex > 0 && offsetIndex > brothers.length) || offsetIndex < 0) {
+      return;
+    }
+    brothers.splice(index, 1);
+    brothers.splice(offsetIndex, 0, node);
+
     const grandparent = this.getParentById(parent.id);
+
     this.get('stage')?.update({
       config: cloneDeep(toRaw(parent)),
       parentId: grandparent?.id,
@@ -794,6 +800,8 @@ class Editor extends BaseService {
 
     this.addModifiedNodeId(parent.id);
     this.pushHistoryState();
+
+    this.emit('move-layer', offset);
   }
 
   /**

package/src/services/props.ts

@@ -17,12 +17,12 @@
  */
 
 import { reactive } from 'vue';
-import { cloneDeep, get, mergeWith, set } from 'lodash-es';
+import { cloneDeep, mergeWith } from 'lodash-es';
 
 import { DepTargetType } from '@tmagic/dep';
 import type { FormConfig } from '@tmagic/form';
 import type { Id, MComponent, MNode } from '@tmagic/schema';
-import { guid, toLine } from '@tmagic/utils';
+import { getValueByKeyPath, guid, setValueByKeyPath, toLine } from '@tmagic/utils';
 
 import depService from '@editor/services/dep';
 import editorService from '@editor/services/editor';
@@ -194,17 +194,22 @@ class Props extends BaseService {
   public replaceRelateId(originConfigs: MNode[], targetConfigs: MNode[]) {
     const relateIdMap = this.getRelateIdMap();
     if (Object.keys(relateIdMap).length === 0) return;
+
     const target = depService.getTarget(DepTargetType.RELATED_COMP_WHEN_COPY, DepTargetType.RELATED_COMP_WHEN_COPY);
     if (!target) return;
+
     originConfigs.forEach((config: MNode) => {
       const newId = relateIdMap[config.id];
       const targetConfig = targetConfigs.find((targetConfig) => targetConfig.id === newId);
+
       if (!targetConfig) return;
+
       target.deps[config.id]?.keys?.forEach((fullKey) => {
-        const relateOriginId = get(config, fullKey);
+        const relateOriginId = getValueByKeyPath(fullKey, config);
         const relateTargetId = relateIdMap[relateOriginId];
         if (!relateTargetId) return;
-        set(targetConfig, fullKey, relateTargetId);
+
+        setValueByKeyPath(fullKey, relateTargetId, targetConfig);
       });
     });
   }

package/src/utils/monaco-editor.ts

@@ -0,0 +1,8 @@
+import { emmetCSS, emmetHTML } from 'emmet-monaco-es';
+import * as monaco from 'monaco-editor';
+
+// 注册emmet插件
+emmetHTML(monaco);
+emmetCSS(monaco, ['css', 'scss']);
+
+export default monaco;

package/types/layouts/CodeEditor.vue.d.ts

@@ -1,4 +1,4 @@
-import * as monaco from 'monaco-editor';
+import monaco from '../utils/monaco-editor';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     initValues?: any;
     modifiedValues?: any;

package/types/utils/monaco-editor.d.ts

@@ -0,0 +1,2 @@
+import * as monaco from 'monaco-editor';
+export default monaco;