@tmagic/editor 1.3.7 → 1.3.8

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.7",
+  "version": "1.3.8",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -42,14 +42,14 @@
   "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.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",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
@@ -62,8 +62,8 @@
     "vue": "^3.3.8"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.7",
-    "@tmagic/form": "1.3.7",
+    "@tmagic/design": "1.3.8",
+    "@tmagic/form": "1.3.8",
     "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/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,

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/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;