@tmagic/editor 1.5.0-beta.9 → 1.5.1

package/src/fields/DataSourceFields.vue

@@ -51,7 +51,13 @@ import { inject, Ref, ref } from 'vue';
 
 import type { DataSchema } from '@tmagic/core';
 import { TMagicButton, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
-import { type FieldProps, type FormConfig, type FormState, MFormBox } from '@tmagic/form';
+import {
+  type ContainerChangeEventData,
+  type FieldProps,
+  type FormConfig,
+  type FormState,
+  MFormBox,
+} from '@tmagic/form';
 import { type ColumnConfig, MagicTable } from '@tmagic/table';
 import { getDefaultValueFromFields } from '@tmagic/utils';
 
@@ -75,7 +81,9 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits(['change']);
+const emit = defineEmits<{
+  change: [v: any, eventData?: ContainerChangeEventData];
+}>();
 
 const services = inject<Services>('services');
 
@@ -91,16 +99,29 @@ const newHandler = () => {
   addDialogVisible.value = true;
 };
 
-const fieldChange = ({ index, ...value }: Record<string, any>) => {
+const fieldChange = ({ index, ...value }: Record<string, any>, data: ContainerChangeEventData) => {
+  addDialogVisible.value = false;
+
   if (index > -1) {
-    props.model[props.name][index] = value;
+    emit('change', value, {
+      modifyKey: index,
+      changeRecords: (data.changeRecords || []).map((item) => ({
+        propPath: `${props.prop}.${index}.${item.propPath}`,
+        value: item.value,
+      })),
+    });
   } else {
-    props.model[props.name].push(value);
+    const modifyKey = props.model[props.name].length;
+    emit('change', value, {
+      modifyKey,
+      changeRecords: [
+        {
+          propPath: `${props.prop}.${modifyKey}`,
+          value,
+        },
+      ],
+    });
   }
-
-  addDialogVisible.value = false;
-
-  emit('change', props.model[props.name]);
 };
 
 const fieldColumns: ColumnConfig[] = [
@@ -310,11 +331,9 @@ const addFromJsonFromChange = ({ data }: { data: string }) => {
   try {
     const value = JSON.parse(data);
 
-    props.model[props.name] = getFieldsConfig(value, props.model[props.name]);
-
     addFromJsonDialogVisible.value = false;
 
-    emit('change', props.model[props.name]);
+    emit('change', getFieldsConfig(value, props.model[props.name]));
   } catch (e: any) {
     tMagicMessage.error(e.message);
   }

package/src/fields/DataSourceInput.vue

@@ -48,7 +48,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, nextTick, ref, watch } from 'vue';
+import { computed, inject, nextTick, ref, useTemplateRef, watch } from 'vue';
 import { Coin } from '@element-plus/icons-vue';
 
 import type { DataSchema, DataSourceSchema } from '@tmagic/core';
@@ -83,7 +83,7 @@ const emit = defineEmits<{
 
 const { dataSourceService } = inject<Services>('services') || {};
 
-const autocomplete = ref<InstanceType<typeof TMagicAutocomplete>>();
+const autocomplete = useTemplateRef<InstanceType<typeof TMagicAutocomplete>>('autocomplete');
 const isFocused = ref(false);
 const state = ref('');
 const displayState = ref<{ value: string; type: 'var' | 'text' }[]>([]);

package/src/fields/DataSourceMethods.vue

@@ -21,14 +21,17 @@
 </template>
 
 <script setup lang="ts">
+import { nextTick, ref, useTemplateRef } from 'vue';
+import { cloneDeep } from 'lodash-es';
+
 import type { CodeBlockContent } from '@tmagic/core';
-import { TMagicButton } from '@tmagic/design';
-import type { FieldProps } from '@tmagic/form';
+import { TMagicButton, tMagicMessageBox } from '@tmagic/design';
+import type { ContainerChangeEventData, FieldProps } from '@tmagic/form';
 import { type ColumnConfig, MagicTable } from '@tmagic/table';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
-import { useDataSourceMethod } from '@editor/hooks/use-data-source-method';
 import type { CodeParamStatement } from '@editor/type';
+import { getEditorConfig } from '@editor/utils/config';
 
 defineOptions({
   name: 'MFieldsDataSourceMethods',
@@ -47,7 +50,10 @@ const props = withDefaults(
 
 const emit = defineEmits(['change']);
 
-const { codeConfig, codeBlockEditor, createCode, editCode, deleteCode, submitCode } = useDataSourceMethod();
+const codeConfig = ref<CodeBlockContent>();
+const codeBlockEditor = useTemplateRef<InstanceType<typeof CodeBlockEditor>>('codeBlockEditor');
+
+let editIndex = -1;
 
 const methodColumns: ColumnConfig[] = [
   {
@@ -73,16 +79,31 @@ const methodColumns: ColumnConfig[] = [
     actions: [
       {
         text: '编辑',
-        handler: (row: CodeBlockContent) => {
-          editCode(props.model, row.name);
-          emit('change', props.model[props.name]);
+        handler: (method: CodeBlockContent, index: number) => {
+          let codeContent = method.content || `({ params, dataSource, app }) => {\n  // place your code here\n}`;
+
+          if (typeof codeContent !== 'string') {
+            codeContent = codeContent.toString();
+          }
+
+          codeConfig.value = {
+            ...cloneDeep(method),
+            content: codeContent,
+          };
+
+          editIndex = index;
+
+          nextTick(() => {
+            codeBlockEditor.value?.show();
+          });
         },
       },
       {
         text: '删除',
         buttonType: 'danger',
-        handler: (row: CodeBlockContent) => {
-          deleteCode(props.model, row.name);
+        handler: async (row: CodeBlockContent, index: number) => {
+          await tMagicMessageBox.confirm(`确定删除${row.name}?`, '提示');
+          props.model[props.name].splice(index, 1);
           emit('change', props.model[props.name]);
         },
       },
@@ -91,14 +112,51 @@ const methodColumns: ColumnConfig[] = [
 ];
 
 const createCodeHandler = () => {
-  createCode(props.model);
+  codeConfig.value = {
+    name: '',
+    content: `({ params, dataSource, app, flowState }) => {\n  // place your code here\n}`,
+    params: [],
+  };
+
+  editIndex = -1;
 
-  emit('change', props.model[props.name]);
+  nextTick(() => {
+    codeBlockEditor.value?.show();
+  });
 };
 
-const submitCodeHandler = (values: CodeBlockContent) => {
-  submitCode(values);
+const submitCodeHandler = (value: CodeBlockContent, data: ContainerChangeEventData) => {
+  if (value.content) {
+    // 在保存的时候转换代码内容
+    const parseDSL = getEditorConfig('parseDSL');
+    if (typeof value.content === 'string') {
+      value.content = parseDSL<(...args: any[]) => any>(value.content);
+    }
+  }
+  if (editIndex > -1) {
+    emit('change', value, {
+      modifyKey: editIndex,
+      changeRecords: (data.changeRecords || []).map((item) => ({
+        propPath: `${props.prop}.${editIndex}.${item.propPath}`,
+        value: item.value,
+      })),
+    });
+  } else {
+    const modifyKey = props.model[props.name].length;
+    emit('change', value, {
+      modifyKey,
+      changeRecords: [
+        {
+          propPath: `${props.prop}.${modifyKey}`,
+          value,
+        },
+      ],
+    });
+  }
+
+  editIndex = -1;
+  codeConfig.value = void 0;
 
-  emit('change', props.model[props.name]);
+  codeBlockEditor.value?.hide();
 };
 </script>

package/src/fields/DataSourceMocks.vue

@@ -15,7 +15,6 @@
     >
       <template #body>
         <MFormBox
-          ref="addDialog"
           label-width="120px"
           :config="formConfig"
           :values="formValues"

package/src/fields/DisplayConds.vue

@@ -17,6 +17,7 @@ import { computed, inject } from 'vue';
 
 import type { DisplayCond } from '@tmagic/core';
 import {
+  type ContainerChangeEventData,
   type FieldProps,
   type FilterFunction,
   filterFunction,
@@ -33,7 +34,7 @@ defineOptions({
 });
 
 const emit = defineEmits<{
-  change: [value: DisplayCond[]];
+  change: [value: DisplayCond[], eventData?: ContainerChangeEventData];
 }>();
 
 const props = withDefaults(
@@ -149,7 +150,11 @@ const config = computed<GroupListConfig>(() => ({
   ],
 }));
 
-const changeHandler = (v: DisplayCond[]) => {
-  emit('change', v);
+const changeHandler = (v: DisplayCond[], eventData?: ContainerChangeEventData) => {
+  if (!Array.isArray(props.model[props.name])) {
+    props.model[props.name] = [];
+  }
+
+  emit('change', v, eventData);
 };
 </script>

package/src/fields/EventSelect.vue

@@ -2,7 +2,6 @@
   <div class="m-fields-event-select">
     <m-form-table
       v-if="isOldVersion"
-      ref="eventForm"
       name="events"
       :size="size"
       :disabled="disabled"
@@ -20,6 +19,7 @@
         :key="index"
         :disabled="disabled"
         :size="size"
+        :prop="`${prop}.${index}`"
         :config="actionsConfig"
         :model="cardItem"
         :label-width="config.labelWidth || '100px'"
@@ -32,7 +32,8 @@
             :model="cardItem"
             :disabled="disabled"
             :size="size"
-            @change="onChangeHandler"
+            :prop="`${prop}.${index}`"
+            @change="eventNameChangeHandler"
           ></MFormContainer>
           <TMagicButton
             style="color: #f56c6c"
@@ -56,12 +57,19 @@ import { has } from 'lodash-es';
 import type { EventOption, MComponent, MContainer } from '@tmagic/core';
 import { ActionType } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
-import type { CascaderOption, ChildConfig, FieldProps, FormState, PanelConfig } from '@tmagic/form';
+import type {
+  CascaderOption,
+  ChildConfig,
+  ContainerChangeEventData,
+  FieldProps,
+  FormState,
+  PanelConfig,
+} from '@tmagic/form';
 import { MContainer as MFormContainer, MPanel } from '@tmagic/form';
-import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX } from '@tmagic/utils';
+import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, traverseNode } from '@tmagic/utils';
 
 import type { CodeSelectColConfig, DataSourceMethodSelectConfig, EventSelectConfig, Services } from '@editor/type';
-import { getCascaderOptionsFromFields, traverseNode } from '@editor/utils';
+import { getCascaderOptionsFromFields } from '@editor/utils';
 
 defineOptions({
   name: 'MFieldsEventSelect',
@@ -69,7 +77,9 @@ defineOptions({
 
 const props = defineProps<FieldProps<EventSelectConfig>>();
 
-const emit = defineEmits(['change']);
+const emit = defineEmits<{
+  change: [v: any, eventData?: ContainerChangeEventData];
+}>();
 
 const services = inject<Services>('services');
 
@@ -108,7 +118,7 @@ const eventNameConfig = computed(() => {
           if (pageFragment) {
             events = [
               {
-                label: pageFragment.name || '迭代器容器',
+                label: pageFragment.name || '页面片容器',
                 value: pageFragment.id,
                 children: events,
               },
@@ -355,21 +365,27 @@ const addEvent = () => {
     name: '',
     actions: [],
   };
+
   if (!props.model[props.name]) {
     props.model[props.name] = [];
   }
-  props.model[props.name].push(defaultEvent);
-  onChangeHandler();
+
+  emit('change', defaultEvent, {
+    modifyKey: props.model[props.name].length,
+  });
 };
 
 // 删除事件
 const removeEvent = (index: number) => {
   if (!props.name) return;
   props.model[props.name].splice(index, 1);
-  onChangeHandler();
+  emit('change', props.model[props.name]);
 };
 
-const onChangeHandler = () => {
-  emit('change', props.model);
+const eventNameChangeHandler = (v: any, eventData: ContainerChangeEventData) => {
+  emit('change', props.model[props.name], eventData);
 };
+
+const onChangeHandler = (v: any, eventData: ContainerChangeEventData) =>
+  emit('change', props.model[props.name], eventData);
 </script>

package/src/fields/KeyValue.vue

@@ -9,7 +9,7 @@
           :size="size"
           @change="keyChangeHandler"
         ></TMagicInput>
-        <span class="m-fileds-key-value-delimiter">:</span>
+        <span class="m-fields-key-value-delimiter">:</span>
         <TMagicInput
           placeholder="value"
           v-model="records[index][1]"
@@ -19,7 +19,7 @@
         ></TMagicInput>
 
         <TMagicButton
-          class="m-fileds-key-value-delete"
+          class="m-fields-key-value-delete"
           type="danger"
           :size="size"
           :disabled="disabled"
@@ -39,7 +39,7 @@
       v-if="config.advanced && showCode"
       height="200px"
       :init-values="model[name]"
-      language="json"
+      language="javascript"
       :options="{
         readOnly: disabled,
       }"
@@ -86,22 +86,27 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits<(e: 'change', value: Record<string, any>) => void>();
+const emit = defineEmits<{
+  change: [value: Record<string, any>];
+}>();
 
 const records = ref<[string, string][]>([]);
 const showCode = ref(false);
 
 watchEffect(() => {
-  const initValues: [string, any][] = Object.entries(props.model[props.name] || {});
-
-  for (const [, value] of initValues) {
-    if (typeof value !== 'string') {
-      showCode.value = true;
-      break;
+  if (typeof props.model[props.name] === 'function') {
+    showCode.value = true;
+  } else {
+    const initValues: [string, any][] = Object.entries(props.model[props.name] || {});
+
+    for (const [, value] of initValues) {
+      if (typeof value !== 'string') {
+        showCode.value = true;
+        break;
+      }
     }
+    records.value = initValues;
   }
-
-  records.value = initValues;
 });
 
 const getValue = () => {

package/src/fields/UISelect.vue

@@ -45,7 +45,7 @@ import { computed, inject, ref } from 'vue';
 import { Close, Delete } from '@element-plus/icons-vue';
 import { throttle } from 'lodash-es';
 
-import type { Id } from '@tmagic/core';
+import type { Id, MNode } from '@tmagic/core';
 import { TMagicButton, TMagicTooltip } from '@tmagic/design';
 import type { FieldProps, FormItem, FormState } from '@tmagic/form';
 import { getIdFromEl } from '@tmagic/utils';
@@ -72,8 +72,11 @@ const cancelHandler = () => {
   globalThis.document.removeEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler as EventListener);
 };
 
-const clickHandler = ({ detail }: Event & { detail: HTMLElement }) => {
-  const id = getIdFromEl()(detail);
+const clickHandler = ({ detail }: Event & { detail: HTMLElement | MNode }) => {
+  let { id } = detail;
+  if (detail.nodeType) {
+    id = getIdFromEl()(detail as HTMLElement) || id;
+  }
   if (id) {
     props.model[props.name] = id;
     emit('change', id);

package/src/hooks/index.ts

@@ -17,7 +17,6 @@
  */
 
 export * from './use-code-block-edit';
-export * from './use-data-source-method';
 export * from './use-stage';
 export * from './use-float-box';
 export * from './use-window-rect';

package/src/hooks/use-code-block-edit.ts

@@ -1,4 +1,4 @@
-import { nextTick, ref } from 'vue';
+import { nextTick, ref, useTemplateRef } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
 import type { CodeBlockContent } from '@tmagic/core';
@@ -10,7 +10,7 @@ import type { CodeBlockService } from '@editor/services/codeBlock';
 export const useCodeBlockEdit = (codeBlockService?: CodeBlockService) => {
   const codeConfig = ref<CodeBlockContent>();
   const codeId = ref<string>();
-  const codeBlockEditor = ref<InstanceType<typeof CodeBlockEditor>>();
+  const codeBlockEditor = useTemplateRef<InstanceType<typeof CodeBlockEditor>>('codeBlockEditor');
 
   // 新增代码块
   const createCodeBlock = async () => {
@@ -21,7 +21,7 @@ export const useCodeBlockEdit = (codeBlockService?: CodeBlockService) => {
 
     codeConfig.value = {
       name: '',
-      content: `({app, params}) => {\n  // place your code here\n}`,
+      content: `({app, params, flowState}) => {\n  // place your code here\n}`,
       params: [],
     };
 

package/src/hooks/use-data-source-edit.ts

@@ -1,6 +1,7 @@
 import { computed, ref } from 'vue';
 
 import type { DataSourceSchema } from '@tmagic/core';
+import type { ContainerChangeEventData } from '@tmagic/form';
 
 import DataSourceConfigPanel from '@editor/layouts/sidebar/data-source/DataSourceConfigPanel.vue';
 import type { DataSourceService } from '@editor/services/dataSource';
@@ -24,9 +25,9 @@ export const useDataSourceEdit = (dataSourceService?: DataSourceService) => {
     editDialog.value.show();
   };
 
-  const submitDataSourceHandler = (value: DataSourceSchema) => {
+  const submitDataSourceHandler = (value: DataSourceSchema, eventData: ContainerChangeEventData) => {
     if (value.id) {
-      dataSourceService?.update(value);
+      dataSourceService?.update(value, { changeRecords: eventData.changeRecords });
     } else {
       dataSourceService?.add(value);
     }

package/src/hooks/use-filter.ts

@@ -1,9 +1,9 @@
 import { type Ref, ref } from 'vue';
 
 import type { Id, MNode } from '@tmagic/core';
+import { traverseNode } from '@tmagic/utils';
 
 import type { LayerNodeStatus, TreeNodeData } from '@editor/type';
-import { traverseNode } from '@editor/utils';
 import { updateStatus } from '@editor/utils/tree';
 
 export const useFilter = (

package/src/hooks/use-getso.ts

@@ -1,9 +1,9 @@
-import { onBeforeUnmount, onMounted, type Ref, ref } from 'vue';
+import { onBeforeUnmount, onMounted, ref, type ShallowRef } from 'vue';
 import Gesto, { type OnDrag } from 'gesto';
 
-export const useGetSo = (target: Ref<HTMLElement | undefined>, emit: (evt: 'change', e: OnDrag<Gesto>) => void) => {
+export const useGetSo = (target: ShallowRef<HTMLElement | null>, emit: (evt: 'change', e: OnDrag<Gesto>) => void) => {
   let getso: Gesto;
-  const isDraging = ref(false);
+  const isDragging = ref(false);
 
   onMounted(() => {
     if (!target.value) return;
@@ -17,19 +17,19 @@ export const useGetSo = (target: Ref<HTMLElement | undefined>, emit: (evt: 'chan
         emit('change', e);
       })
       .on('dragStart', () => {
-        isDraging.value = true;
+        isDragging.value = true;
       })
       .on('dragEnd', () => {
-        isDraging.value = false;
+        isDragging.value = false;
       });
   });
 
   onBeforeUnmount(() => {
     getso?.unset();
-    isDraging.value = false;
+    isDragging.value = false;
   });
 
   return {
-    isDraging,
+    isDragging,
   };
 };

package/src/hooks/use-node-status.ts

@@ -1,9 +1,9 @@
-import { ComputedRef, ref, watch } from 'vue';
+import { type ComputedRef, ref, watch } from 'vue';
 
 import type { Id, MNode } from '@tmagic/core';
+import { traverseNode } from '@tmagic/utils';
 
 import { LayerNodeStatus, TreeNodeData } from '@editor/type';
-import { traverseNode } from '@editor/utils';
 
 const createPageNodeStatus = (nodeData: TreeNodeData[], initialLayerNodeStatus?: Map<Id, LayerNodeStatus>) => {
   const map = new Map<Id, LayerNodeStatus>();

package/src/index.ts

@@ -91,7 +91,8 @@ export { default as KeyValue } from './fields/KeyValue.vue';
 export { default as CodeBlockList } from './layouts/sidebar/code-block/CodeBlockList.vue';
 export { default as CodeBlockListPanel } from './layouts/sidebar/code-block/CodeBlockListPanel.vue';
 export { default as DataSourceConfigPanel } from './layouts/sidebar/data-source/DataSourceConfigPanel.vue';
-export { default as PropsPanel } from './layouts/PropsPanel.vue';
+export { default as PropsPanel } from './layouts/props-panel/PropsPanel.vue';
+export { default as PropsFormPanel } from './layouts/props-panel/FormPanel.vue';
 export { default as ToolButton } from './components/ToolButton.vue';
 export { default as ContentMenu } from './components/ContentMenu.vue';
 export { default as Icon } from './components/Icon.vue';