@tmagic/editor 1.3.7 → 1.3.9

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.7",
+  "version": "1.3.9",
   "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.7",
-    "@tmagic/dep": "1.3.7",
-    "@tmagic/design": "1.3.7",
-    "@tmagic/form": "1.3.7",
-    "@tmagic/schema": "1.3.7",
-    "@tmagic/stage": "1.3.7",
-    "@tmagic/table": "1.3.7",
-    "@tmagic/utils": "1.3.7",
+    "@tmagic/core": "1.3.9",
+    "@tmagic/dep": "1.3.9",
+    "@tmagic/design": "1.3.9",
+    "@tmagic/form": "1.3.9",
+    "@tmagic/schema": "1.3.9",
+    "@tmagic/stage": "1.3.9",
+    "@tmagic/table": "1.3.9",
+    "@tmagic/utils": "1.3.9",
     "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.7",
-    "@tmagic/form": "1.3.7",
+    "@tmagic/design": "1.3.9",
+    "@tmagic/form": "1.3.9",
     "monaco-editor": "^0.41.0",
     "vue": "^3.3.8"
   },

package/src/Editor.vue

@@ -70,6 +70,8 @@
         <PropsPanel
           :extend-state="extendFormState"
           @mounted="(instance: any) => $emit('props-panel-mounted', instance)"
+          @form-error="(e: any) => $emit('props-form-error', e)"
+          @submit-error="(e: any) => $emit('props-submit-error', e)"
         >
           <template #props-panel-header>
             <slot name="props-panel-header"></slot>
@@ -88,6 +90,7 @@
       <slot name="footer"></slot>
     </template>
 
+    <template #page-bar><slot name="page-bar"></slot></template>
     <template #page-bar-title="{ page }"><slot name="page-bar-title" :page="page"></slot></template>
     <template #page-bar-popover="{ page }"><slot name="page-bar-popover" :page="page"></slot></template>
   </Framework>
@@ -136,6 +139,8 @@ defineOptions({
 const emit = defineEmits<{
   'props-panel-mounted': [instance: InstanceType<typeof PropsPanel>];
   'update:modelValue': [value: MApp | null];
+  'props-form-error': [e: any];
+  'props-submit-error': [e: any];
 }>();
 
 const props = withDefaults(defineProps<EditorProps>(), defaultEditorProps);

package/src/components/Tree.vue

@@ -15,7 +15,7 @@
         </template>
       </TreeNode>
     </template>
-    <div v-else>
+    <div v-else class="m-editor-tree-empty">
       <p>{{ emptyText }}</p>
     </div>
   </div>

package/src/fields/PageFragmentSelect.vue

@@ -9,16 +9,20 @@
         :size="size"
         @change="changeHandler"
       ></m-form-container>
+      <!-- 编辑按钮 -->
+      <Icon v-if="model[name]" class="icon" :icon="Edit" @click="editPageFragment(model[name])"></Icon>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed, inject } from 'vue';
+import { Edit } from '@element-plus/icons-vue';
 
 import { FieldProps } from '@tmagic/form';
-import { NodeType } from '@tmagic/schema';
+import { Id, NodeType } from '@tmagic/schema';
 
+import Icon from '@editor/components/Icon.vue';
 import type { PageFragmentSelectConfig, Services } from '@editor/type';
 
 defineOptions({
@@ -41,8 +45,8 @@ const selectConfig = {
   options: () => {
     if (pageList.value) {
       return pageList.value.map((item) => ({
-        text: `${item.name}（${item.id}）`,
-        label: `${item.name}（${item.id}）`,
+        text: `${item.devconfig?.tabName || item.title || item.name}（${item.id}）`,
+        label: `${item.devconfig?.tabName || item.title || item.name}（${item.id}）`,
         value: item.id,
       }));
     }
@@ -52,4 +56,8 @@ const selectConfig = {
 const changeHandler = async () => {
   emit('change', props.model[props.name]);
 };
+
+const editPageFragment = (id: Id) => {
+  services?.editorService.select(id);
+};
 </script>

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/Framework.vue

@@ -36,10 +36,12 @@
           <AddPageBox :disabled-page-fragment="disabledPageFragment"></AddPageBox>
         </slot>
 
-        <PageBar :disabled-page-fragment="disabledPageFragment">
-          <template #page-bar-title="{ page }"><slot name="page-bar-title" :page="page"></slot></template>
-          <template #page-bar-popover="{ page }"><slot name="page-bar-popover" :page="page"></slot></template>
-        </PageBar>
+        <slot name="page-bar">
+          <PageBar :disabled-page-fragment="disabledPageFragment">
+            <template #page-bar-title="{ page }"><slot name="page-bar-title" :page="page"></slot></template>
+            <template #page-bar-popover="{ page }"><slot name="page-bar-popover" :page="page"></slot></template>
+          </PageBar>
+        </slot>
       </template>
 
       <template v-if="page" #right>

package/src/layouts/PropsPanel.vue

@@ -10,6 +10,7 @@
       :config="curFormConfig"
       :extend-state="extendState"
       @change="submit"
+      @error="errorHandler"
     ></MForm>
   </div>
 </template>
@@ -17,7 +18,6 @@
 <script lang="ts" setup>
 import { computed, getCurrentInstance, inject, onBeforeUnmount, onMounted, ref, watchEffect } from 'vue';
 
-import { tMagicMessage } from '@tmagic/design';
 import type { FormState, FormValue } from '@tmagic/form';
 import { MForm } from '@tmagic/form';
 
@@ -33,7 +33,7 @@ defineProps<{
   extendState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
 }>();
 
-const emit = defineEmits(['mounted']);
+const emit = defineEmits(['mounted', 'submit-error', 'form-error']);
 
 const internalInstance = getCurrentInstance();
 const values = ref<FormValue>({});
@@ -79,11 +79,13 @@ const submit = async () => {
     const values = await configForm.value?.submitForm();
     services?.editorService.update(values);
   } catch (e: any) {
-    console.error(e);
-    tMagicMessage.closeAll();
-    tMagicMessage.error(e.message);
+    emit('submit-error', e);
   }
 };
 
+const errorHandler = (e: any) => {
+  emit('form-error', e);
+};
+
 defineExpose({ configForm, submit });
 </script>

package/src/services/dataSource.ts

@@ -33,6 +33,23 @@ class DataSource extends BaseService {
     methods: {},
   });
 
+  constructor() {
+    super([
+      { name: 'getFormConfig', isAsync: false },
+      { name: 'setFormConfig', isAsync: false },
+      { name: 'getFormValue', isAsync: false },
+      { name: 'setFormValue', isAsync: false },
+      { name: 'getFormEvent', isAsync: false },
+      { name: 'setFormEvent', isAsync: false },
+      { name: 'getFormMethod', isAsync: false },
+      { name: 'setFormMethod', isAsync: false },
+      { name: 'add', isAsync: false },
+      { name: 'update', isAsync: false },
+      { name: 'remove', isAsync: false },
+      { name: 'createId', isAsync: false },
+    ]);
+  }
+
   public set<K extends StateKey, T extends State[K]>(name: K, value: T) {
     this.state[name] = value;
   }

package/src/services/dep.ts

@@ -62,6 +62,10 @@ class Dep extends BaseService {
     return this.watcher.clear(nodes);
   }
 
+  public clearByType(type: DepTargetType, nodes?: MNode[]) {
+    return this.watcher.clearByType(type, nodes);
+  }
+
   public hasTarget(id: Id, type: string = DepTargetType.DEFAULT) {
     return this.watcher.hasTarget(id, type);
   }

package/src/services/editor.ts

@@ -644,7 +644,7 @@ class Editor extends BaseService {
   public copyWithRelated(config: MNode | MNode[]): void {
     const copyNodes: MNode[] = Array.isArray(config) ? config : [config];
     // 关联的组件也一并复制
-    depService.getTarget(DepTargetType.RELATED_COMP_WHEN_COPY, DepTargetType.RELATED_COMP_WHEN_COPY)?.removeDep();
+    depService.clearByType(DepTargetType.RELATED_COMP_WHEN_COPY);
     depService.collect(copyNodes, true, DepTargetType.RELATED_COMP_WHEN_COPY);
     const customTarget = depService.getTarget(
       DepTargetType.RELATED_COMP_WHEN_COPY,
@@ -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/theme/page-fragment-select.scss

@@ -0,0 +1,14 @@
+.m-fields-page-fragment-select {
+  width: 100%;
+  .page-fragment-select-container {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    .select {
+      flex: 1;
+    }
+    .icon {
+      margin-left: 10px;
+    }
+  }
+}

package/src/theme/theme.scss

@@ -24,3 +24,4 @@
 @import "./floatbox.scss";
 @import "./tree.scss";
 @import "./floating-box.scss";
+@import "./page-fragment-select.scss";

package/src/theme/tree.scss

@@ -80,4 +80,10 @@
       }
     }
   }
+
+  .m-editor-tree-empty {
+    text-align: center;
+    color: #909399;
+    font-size: 14px;
+  }
 }

package/src/type.ts

@@ -54,6 +54,7 @@ export interface FrameworkSlots {
   workspace(props: {}): any;
   'props-panel'(props: {}): any;
   'footer'(props: {}): any;
+  'page-bar'(props: {}): any;
   'page-bar-title'(props: { page: MPage | MPageFragment }): any;
   'page-bar-popover'(props: { page: MPage | MPageFragment }): any;
 }

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/layouts/PropsPanel.vue.d.ts

@@ -36,6 +36,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
             readonly popperClass?: string | undefined;
             readonly extendState?: ((state: FormState) => Record<string, any> | Promise<Record<string, any>>) | undefined;
             onChange?: ((...args: any[]) => any) | undefined;
+            onError?: ((...args: any[]) => any) | undefined;
             "onField-input"?: ((...args: any[]) => any) | undefined;
             "onField-change"?: ((...args: any[]) => any) | undefined;
         } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
@@ -100,6 +101,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
             };
         }>> & {
             onChange?: ((...args: any[]) => any) | undefined;
+            onError?: ((...args: any[]) => any) | undefined;
             "onField-input"?: ((...args: any[]) => any) | undefined;
             "onField-change"?: ((...args: any[]) => any) | undefined;
         }, "labelWidth" | "disabled" | "height" | "config" | "initValues" | "lastValues" | "isCompare" | "parentValues" | "stepActive" | "inline" | "labelPosition" | "keyProp">;
@@ -114,7 +116,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         }>;
         $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
         $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
-        $emit: ((event: "change", ...args: any[]) => void) & ((event: "field-input", ...args: any[]) => void) & ((event: "field-change", ...args: any[]) => void);
+        $emit: ((event: "change", ...args: any[]) => void) & ((event: "error", ...args: any[]) => void) & ((event: "field-input", ...args: any[]) => void) & ((event: "field-change", ...args: any[]) => void);
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
             labelWidth: {
@@ -178,6 +180,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
             };
         }>> & {
             onChange?: ((...args: any[]) => any) | undefined;
+            onError?: ((...args: any[]) => any) | undefined;
             "onField-input"?: ((...args: any[]) => any) | undefined;
             "onField-change"?: ((...args: any[]) => any) | undefined;
         }, {
@@ -190,6 +193,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
             submitForm: (native?: boolean | undefined) => Promise<any>;
         }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
             change: (...args: any[]) => void;
+            error: (...args: any[]) => void;
             "field-input": (...args: any[]) => void;
             "field-change": (...args: any[]) => void;
         }, string, {
@@ -287,6 +291,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         };
     }>> & {
         onChange?: ((...args: any[]) => any) | undefined;
+        onError?: ((...args: any[]) => any) | undefined;
         "onField-input"?: ((...args: any[]) => any) | undefined;
         "onField-change"?: ((...args: any[]) => any) | undefined;
     } & import("vue").ShallowUnwrapRef<{
@@ -301,10 +306,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     submit: () => Promise<void>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     mounted: (...args: any[]) => void;
+    "submit-error": (...args: any[]) => void;
+    "form-error": (...args: any[]) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     extendState?: ((state: FormState) => Record<string, any> | Promise<Record<string, any>>) | undefined;
 }>>> & {
     onMounted?: ((...args: any[]) => any) | undefined;
+    "onSubmit-error"?: ((...args: any[]) => any) | undefined;
+    "onForm-error"?: ((...args: any[]) => any) | undefined;
 }, {}, {}>, Readonly<PropsPanelSlots>>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/types/services/dataSource.d.ts

@@ -15,6 +15,7 @@ interface State {
 type StateKey = keyof State;
 declare class DataSource extends BaseService {
     private state;
+    constructor();
     set<K extends StateKey, T extends State[K]>(name: K, value: T): void;
     get<K extends StateKey>(name: K): State[K];
     getFormConfig(type?: string): FormConfig;

package/types/services/dep.d.ts

@@ -14,6 +14,7 @@ declare class Dep extends BaseService {
     clearTargets(): void;
     collect(nodes: MNode[], deep?: boolean, type?: DepTargetType): void;
     clear(nodes?: MNode[]): void;
+    clearByType(type: DepTargetType, nodes?: MNode[]): void;
     hasTarget(id: Id, type?: string): boolean;
     hasSpecifiedTypeTarget(type?: string): boolean;
 }

package/types/type.d.ts

@@ -26,6 +26,7 @@ export interface FrameworkSlots {
     workspace(props: {}): any;
     'props-panel'(props: {}): any;
     'footer'(props: {}): any;
+    'page-bar'(props: {}): any;
     'page-bar-title'(props: {
         page: MPage | MPageFragment;
     }): any;

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

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