@tmagic/editor 1.4.1 → 1.4.3

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.1",
+  "version": "1.4.3",
   "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.4.1",
-    "@tmagic/dep": "1.4.1",
-    "@tmagic/design": "1.4.1",
-    "@tmagic/form": "1.4.1",
-    "@tmagic/schema": "1.4.1",
-    "@tmagic/stage": "1.4.1",
-    "@tmagic/table": "1.4.1",
-    "@tmagic/utils": "1.4.1",
+    "@tmagic/core": "1.4.3",
+    "@tmagic/dep": "1.4.3",
+    "@tmagic/design": "1.4.3",
+    "@tmagic/form": "1.4.3",
+    "@tmagic/schema": "1.4.3",
+    "@tmagic/stage": "1.4.3",
+    "@tmagic/table": "1.4.3",
+    "@tmagic/utils": "1.4.3",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "emmet-monaco-es": "^5.3.0",
@@ -63,8 +63,8 @@
     "vue": "^3.4.21"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.4.1",
-    "@tmagic/form": "1.4.1",
+    "@tmagic/design": "1.4.3",
+    "@tmagic/form": "1.4.3",
     "monaco-editor": "^0.47.0",
     "vue": "^3.4.21"
   },

package/src/components/SplitView.vue

@@ -169,6 +169,11 @@ const changeRight = ({ deltaX }: OnDrag) => {
 defineExpose({
   updateWidth() {
     clientWidth = props.width ?? el.value?.clientWidth ?? clientWidth;
+
+    if (clientWidth <= 0) {
+      return;
+    }
+
     const columnWidth = getCenterWidth(props.left, props.right);
 
     emit('change', {

package/src/fields/CodeSelect.vue

@@ -1,7 +1,16 @@
 <template>
   <div class="m-fields-code-select" :class="config.className">
     <TMagicCard>
-      <m-form-container :config="codeConfig" :model="model[name]" @change="changeHandler"> </m-form-container>
+      <MContainer
+        :config="codeConfig"
+        :size="size"
+        :prop="prop"
+        :disabled="disabled"
+        :lastValues="lastValues"
+        :model="model[name]"
+        @change="changeHandler"
+      >
+      </MContainer>
     </TMagicCard>
   </div>
 </template>
@@ -12,7 +21,7 @@ import { isEmpty } from 'lodash-es';
 
 import { TMagicCard } from '@tmagic/design';
 import type { FieldProps, FormItem } from '@tmagic/form';
-import { FormState } from '@tmagic/form';
+import { FormState, MContainer } from '@tmagic/form';
 import { HookCodeType, HookType } from '@tmagic/schema';
 
 import type { Services } from '@editor/type';

package/src/fields/DataSourceFieldSelect.vue

@@ -14,21 +14,35 @@
       :prop="`${prop}${prop ? '.' : ''}${name}`"
       @change="onChangeHandler"
     ></component>
+    <TMagicButton
+      v-if="(showDataSourceFieldSelect || !config.fieldConfig) && selectedDataSourceId"
+      style="margin-left: 5px"
+      :size="size"
+      @click="editHandler(selectedDataSourceId)"
+      ><MIcon :icon="Edit"></MIcon
+    ></TMagicButton>
     <TMagicButton
       v-if="config.fieldConfig"
       style="margin-left: 5px"
-      link
       :type="showDataSourceFieldSelect ? 'primary' : 'default'"
       :size="size"
       @click="showDataSourceFieldSelect = !showDataSourceFieldSelect"
       ><MIcon :icon="Coin"></MIcon
     ></TMagicButton>
+
+    <DataSourceConfigPanel
+      ref="editDialog"
+      :disabled="!editable"
+      :values="dataSourceValues"
+      :title="dialogTitle"
+      @submit="submitDataSourceHandler"
+    ></DataSourceConfigPanel>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, inject, onMounted, ref, resolveComponent } from 'vue';
-import { Coin } from '@element-plus/icons-vue';
+import { computed, inject, ref, resolveComponent, watch } from 'vue';
+import { Coin, Edit } from '@element-plus/icons-vue';
 
 import { TMagicButton } from '@tmagic/design';
 import type { CascaderConfig, CascaderOption, FieldProps, FormState } from '@tmagic/form';
@@ -37,6 +51,8 @@ import type { DataSchema, DataSourceFieldType } from '@tmagic/schema';
 import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';
+import { useDataSourceEdit } from '@editor/hooks/use-data-source-edit';
+import DataSourceConfigPanel from '@editor/layouts/sidebar/data-source/DataSourceConfigPanel.vue';
 import type { DataSourceFieldSelectConfig, Services } from '@editor/type';
 
 defineOptions({
@@ -50,6 +66,15 @@ const props = withDefaults(defineProps<FieldProps<DataSourceFieldSelectConfig>>(
   disabled: false,
 });
 
+const selectedDataSourceId = computed(() => {
+  const value = props.model[props.name];
+  if (!Array.isArray(value) || !value.length) {
+    return '';
+  }
+
+  return value[0].replace(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, '');
+});
+
 const dataSources = computed(() => services?.dataSourceService.get('dataSources'));
 
 const getOptionChildren = (
@@ -76,7 +101,7 @@ const getOptionChildren = (
       return;
     }
 
-    if (!dataSourceFieldType.includes(fieldType) && fieldType !== 'object') {
+    if (!dataSourceFieldType.includes(fieldType) && !['array', 'object', 'any'].includes(fieldType)) {
       return;
     }
 
@@ -110,16 +135,23 @@ const cascaderConfig = computed<CascaderConfig>(() => {
 
 const showDataSourceFieldSelect = ref(false);
 
-onMounted(() => {
-  const value = props.model[props.name];
-  if (
-    Array.isArray(value) &&
-    typeof value[0] === 'string' &&
-    value[0].startsWith(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX)
-  ) {
-    return (showDataSourceFieldSelect.value = true);
-  }
-});
+watch(
+  () => props.model[props.name],
+  (value) => {
+    if (
+      Array.isArray(value) &&
+      typeof value[0] === 'string' &&
+      value[0].startsWith(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX)
+    ) {
+      showDataSourceFieldSelect.value = true;
+    } else {
+      showDataSourceFieldSelect.value = false;
+    }
+  },
+  {
+    immediate: true,
+  },
+);
 
 const mForm = inject<FormState | undefined>('mForm');
 
@@ -148,4 +180,8 @@ const tagName = computed(() => {
 const onChangeHandler = (value: any) => {
   emit('change', value);
 };
+
+const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } = useDataSourceEdit(
+  services?.dataSourceService,
+);
 </script>

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

@@ -0,0 +1,46 @@
+import { computed, ref } from 'vue';
+
+import type { DataSourceSchema } from '@tmagic/schema';
+
+import DataSourceConfigPanel from '@editor/layouts/sidebar/data-source/DataSourceConfigPanel.vue';
+import type { DataSourceService } from '@editor/services/dataSource';
+
+export const useDataSourceEdit = (dataSourceService?: DataSourceService) => {
+  const dialogTitle = ref('');
+  const editDialog = ref<InstanceType<typeof DataSourceConfigPanel>>();
+  const dataSourceValues = ref<Record<string, any>>({});
+
+  const editable = computed(() => dataSourceService?.get('editable') ?? true);
+
+  const editHandler = (id: string) => {
+    if (!editDialog.value) return;
+
+    dataSourceValues.value = {
+      ...dataSourceService?.getDataSourceById(id),
+    };
+
+    dialogTitle.value = `编辑${dataSourceValues.value.title || ''}`;
+
+    editDialog.value.show();
+  };
+
+  const submitDataSourceHandler = (value: DataSourceSchema) => {
+    if (value.id) {
+      dataSourceService?.update(value);
+    } else {
+      dataSourceService?.add(value);
+    }
+
+    editDialog.value?.hide();
+  };
+
+  return {
+    dialogTitle,
+    editDialog,
+    dataSourceValues,
+    editable,
+
+    editHandler,
+    submitDataSourceHandler,
+  };
+};

package/src/layouts/Framework.vue

@@ -102,10 +102,13 @@ const RIGHT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorRightColumnWidthData';
 const getLeftColumnWidthCacheData = () =>
   Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH;
 
+const getRightColumnWidthCacheData = () =>
+  Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH;
+
 const columnWidth = ref<Partial<GetColumnWidth>>({
   left: getLeftColumnWidthCacheData(),
   center: 0,
-  right: Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH,
+  right: getRightColumnWidthCacheData(),
 });
 
 watch(pageLength, () => {

package/src/layouts/sidebar/data-source/DataSourceListPanel.vue

@@ -42,10 +42,10 @@ import { computed, inject, ref } from 'vue';
 import { mergeWith } from 'lodash-es';
 
 import { TMagicButton, TMagicPopover, TMagicScrollbar } from '@tmagic/design';
-import type { DataSourceSchema } from '@tmagic/schema';
 
 import SearchInput from '@editor/components/SearchInput.vue';
 import ToolButton from '@editor/components/ToolButton.vue';
+import { useDataSourceEdit } from '@editor/hooks/use-data-source-edit';
 import type { DataSourceListSlots, Services } from '@editor/type';
 
 import DataSourceConfigPanel from './DataSourceConfigPanel.vue';
@@ -59,13 +59,9 @@ defineOptions({
 
 const { dataSourceService } = inject<Services>('services') || {};
 
-const editDialog = ref<InstanceType<typeof DataSourceConfigPanel>>();
+const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } =
+  useDataSourceEdit(dataSourceService);
 
-const dataSourceValues = ref<Record<string, any>>({});
-
-const dialogTitle = ref('');
-
-const editable = computed(() => dataSourceService?.get('editable') ?? true);
 const datasourceTypeList = computed(() =>
   [
     { text: '基础', type: 'base' },
@@ -93,32 +89,10 @@ const addHandler = (type: string) => {
   editDialog.value.show();
 };
 
-const editHandler = (id: string) => {
-  if (!editDialog.value) return;
-
-  dataSourceValues.value = {
-    ...dataSourceService?.getDataSourceById(id),
-  };
-
-  dialogTitle.value = `编辑${dataSourceValues.value.title || ''}`;
-
-  editDialog.value.show();
-};
-
 const removeHandler = (id: string) => {
   dataSourceService?.remove(id);
 };
 
-const submitDataSourceHandler = (value: DataSourceSchema) => {
-  if (value.id) {
-    dataSourceService?.update(value);
-  } else {
-    dataSourceService?.add(value);
-  }
-
-  editDialog.value?.hide();
-};
-
 const dataSourceList = ref<InstanceType<typeof DataSourceList>>();
 
 const filterTextChangeHandler = (val: string) => {

package/src/services/editor.ts

@@ -533,7 +533,11 @@ class Editor extends BaseService {
 
     let newConfig = await this.toggleFixedPosition(toRaw(config), node, root);
 
-    newConfig = mergeWith(cloneDeep(node), newConfig, (objValue, srcValue) => {
+    newConfig = mergeWith(cloneDeep(node), newConfig, (objValue, srcValue, key) => {
+      if (typeof srcValue === 'undefined' && Object.hasOwn(newConfig, key)) {
+        return '';
+      }
+
       if (isObject(srcValue) && Array.isArray(objValue)) {
         // 原来的配置是数组，新的配置是对象，则直接使用新的值
         return srcValue;

package/types/hooks/use-data-source-edit.d.ts

@@ -0,0 +1,81 @@
+import type { DataSourceSchema } from '@tmagic/schema';
+import type { DataSourceService } from '../services/dataSource';
+export declare const useDataSourceEdit: (dataSourceService?: DataSourceService) => {
+    dialogTitle: import("vue").Ref<string>;
+    editDialog: import("vue").Ref<import("vue").CreateComponentPublicInstance<Readonly<import("vue").ExtractPropTypes<{
+        visible: import("vue").PropType<boolean>;
+        width: import("vue").PropType<number>;
+        title: {
+            type: import("vue").PropType<string>;
+        };
+        values: {
+            type: import("vue").PropType<any>;
+            required: true;
+        };
+        disabled: {
+            type: import("vue").PropType<boolean>;
+            required: true;
+        };
+    }>> & {
+        onSubmit?: ((...args: any[]) => any) | undefined;
+        "onUpdate:width"?: ((width: number) => any) | undefined;
+        "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+    }, {
+        show(): void;
+        hide(): void;
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        "update:width": (width: number) => void;
+        "update:visible": (visible: boolean) => void;
+        submit: (...args: any[]) => void;
+    }, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
+        visible: import("vue").PropType<boolean>;
+        width: import("vue").PropType<number>;
+        title: {
+            type: import("vue").PropType<string>;
+        };
+        values: {
+            type: import("vue").PropType<any>;
+            required: true;
+        };
+        disabled: {
+            type: import("vue").PropType<boolean>;
+            required: true;
+        };
+    }>> & {
+        onSubmit?: ((...args: any[]) => any) | undefined;
+        "onUpdate:width"?: ((width: number) => any) | undefined;
+        "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+    }, {}, true, {}, {}, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("vue").ExtractPropTypes<{
+        visible: import("vue").PropType<boolean>;
+        width: import("vue").PropType<number>;
+        title: {
+            type: import("vue").PropType<string>;
+        };
+        values: {
+            type: import("vue").PropType<any>;
+            required: true;
+        };
+        disabled: {
+            type: import("vue").PropType<boolean>;
+            required: true;
+        };
+    }>> & {
+        onSubmit?: ((...args: any[]) => any) | undefined;
+        "onUpdate:width"?: ((width: number) => any) | undefined;
+        "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+    }, {
+        show(): void;
+        hide(): void;
+    }, {}, {}, {}, {}> | undefined>;
+    dataSourceValues: import("vue").Ref<Record<string, any>>;
+    editable: import("vue").ComputedRef<boolean>;
+    editHandler: (id: string) => void;
+    submitDataSourceHandler: (value: DataSourceSchema) => void;
+};