@tmagic/editor 1.7.5-beta.1 → 1.7.6

package/dist/tmagic-editor.umd.cjs

@@ -2605,7 +2605,7 @@
   var Promise$1 = getNative(root$1, 'Promise');
 
   /* Built-in method references that are verified to be native. */
-  var Set = getNative(root$1, 'Set');
+  var Set$1 = getNative(root$1, 'Set');
 
   /** `Object#toString` result references. */
   var mapTag$5 = '[object Map]',
@@ -2620,7 +2620,7 @@
   var dataViewCtorString = toSource(DataView),
       mapCtorString = toSource(Map$1),
       promiseCtorString = toSource(Promise$1),
-      setCtorString = toSource(Set),
+      setCtorString = toSource(Set$1),
       weakMapCtorString = toSource(WeakMap);
 
   /**
@@ -2636,7 +2636,7 @@
   if ((DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag$3) ||
       (Map$1 && getTag(new Map$1) != mapTag$5) ||
       (Promise$1 && getTag(Promise$1.resolve()) != promiseTag) ||
-      (Set && getTag(new Set) != setTag$5) ||
+      (Set$1 && getTag(new Set$1) != setTag$5) ||
       (WeakMap && getTag(new WeakMap) != weakMapTag$1)) {
     getTag = function(value) {
       var result = baseGetTag(value),
@@ -4737,8 +4737,8 @@
    * @param {Array} values The values to add to the set.
    * @returns {Object} Returns the new set.
    */
-  var createSet = !(Set && (1 / setToArray(new Set([,-0]))[1]) == INFINITY) ? noop : function(values) {
-    return new Set(values);
+  var createSet = !(Set$1 && (1 / setToArray(new Set$1([,-0]))[1]) == INFINITY) ? noop : function(values) {
+    return new Set$1(values);
   };
 
   /** Used as the size to enable large array optimizations. */
@@ -4882,9 +4882,7 @@
   emmetMonacoEs.emmetHTML(monaco__namespace);
   emmetMonacoEs.emmetCSS(monaco__namespace, ["css", "scss"]);
 
-  const _hoisted_1$_ = {
-    class: /* @__PURE__ */ vue.normalizeClass(`magic-code-editor`)
-  };
+  const _hoisted_1$_ = { class: "magic-code-editor" };
   const _hoisted_2$o = {
     ref: "codeEditor",
     class: "magic-code-editor-content"
@@ -4906,13 +4904,15 @@
       autoSave: { type: Boolean, default: true },
       parse: { type: Boolean, default: false },
       disabledFullScreen: { type: Boolean, default: false },
-      autosize: {}
+      autosize: {},
+      editorCustomType: {}
     },
     emits: ["initd", "save"],
     setup(__props, { expose: __expose, emit: __emit }) {
       const props = __props;
       const emit = __emit;
       const autoHeight = vue.ref("");
+      let cachedExtraHeight = null;
       const computeHeight = vue.computed(() => {
         if (fullScreen.value) {
           return "100%";
@@ -4925,6 +4925,30 @@
         }
         return "100%";
       });
+      const calculateExtraHeight = () => {
+        let extraHeight = 10;
+        if (vsEditor && codeEditorEl.value) {
+          try {
+            const editorElement = codeEditorEl.value.querySelector(".monaco-editor");
+            const scrollableElement = codeEditorEl.value.querySelector(".monaco-scrollable-element");
+            if (editorElement && scrollableElement) {
+              const editorRect = editorElement.getBoundingClientRect();
+              const scrollableRect = scrollableElement.getBoundingClientRect();
+              extraHeight = Math.max(editorRect.height - scrollableRect.height, 0);
+              if (extraHeight === 0) {
+                const editorOptions = vsEditor.getOptions();
+                const scrollBeyondLastLine = editorOptions.get(monaco__namespace.editor.EditorOption.scrollBeyondLastLine);
+                const padding = editorOptions.get(monaco__namespace.editor.EditorOption.padding);
+                const lineHeight = editorOptions.get(monaco__namespace.editor.EditorOption.lineHeight) || 20;
+                extraHeight = (scrollBeyondLastLine ? lineHeight : 0) + (padding?.top || 0) + (padding?.bottom || 0) + 10;
+              }
+            }
+          } catch (error) {
+            console.warn("Failed to calculate editor extra height:", error);
+          }
+        }
+        return extraHeight;
+      };
       const setAutoHeight = (v = "") => {
         let lines = Math.max(v.split("\n").length, props.autosize?.minRows || 1);
         if (v) {
@@ -4937,7 +4961,10 @@
           const editorOptions = vsEditor.getOptions();
           lineHeight = editorOptions.get(monaco__namespace.editor.EditorOption.lineHeight) || 20;
         }
-        const newHeight = `${lines * lineHeight + 10}px`;
+        if (cachedExtraHeight === null) {
+          cachedExtraHeight = calculateExtraHeight();
+        }
+        const newHeight = `${lines * lineHeight + cachedExtraHeight}px`;
         if (autoHeight.value !== newHeight) {
           autoHeight.value = newHeight;
           vue.nextTick(() => {
@@ -5028,10 +5055,12 @@
         if (codeEditorEl.value.clientHeight === 0) {
           await vue.nextTick();
         }
+        cachedExtraHeight = null;
         const options = {
           value: values.value,
           language: props.language,
           theme: "vs-dark",
+          editorCustomType: props.editorCustomType,
           ...props.options
         };
         if (props.type === "diff") {
@@ -5096,6 +5125,7 @@
         vsDiffEditor?.dispose();
         vsEditor = null;
         vsDiffEditor = null;
+        cachedExtraHeight = null;
       });
       vue.onUnmounted(() => {
         codeEditorEl.value?.removeEventListener("keydown", handleKeyDown);
@@ -5205,8 +5235,9 @@
           },
           autosize: __props.config.autosize,
           parse: __props.config.parse,
+          "editor-custom-type": __props.config.mFormItemType,
           onSave: save
-        }, null, 8, ["height", "init-values", "language", "options", "autosize", "parse"]);
+        }, null, 8, ["height", "init-values", "language", "options", "autosize", "parse", "editor-custom-type"]);
       };
     }
   });
@@ -6014,6 +6045,23 @@
     }
     return isIncludeDataSource2;
   };
+  const buildChangeRecords = (value, basePath) => {
+    const changeRecords = [];
+    const buildChangeRecords2 = (obj, basePath2) => {
+      Object.entries(obj).forEach(([key, value2]) => {
+        if (value2 !== void 0) {
+          const currentPath = basePath2 ? `${basePath2}.${key}` : key;
+          if (typeof value2 === "object" && value2 !== null && !Array.isArray(value2)) {
+            buildChangeRecords2(value2, currentPath);
+          } else {
+            changeRecords.push({ propPath: currentPath, value: value2 });
+          }
+        }
+      });
+    };
+    buildChangeRecords2(value, basePath);
+    return changeRecords;
+  };
 
   const compose = (middleware, isAsync) => {
     if (!Array.isArray(middleware)) throw new TypeError("Middleware 必须是一个数组!");
@@ -7821,36 +7869,36 @@
     return displayState;
   };
   const getCascaderOptionsFromFields = (fields = [], dataSourceFieldType = ["any"]) => {
-    const child = [];
-    fields.forEach((field) => {
-      if (!dataSourceFieldType.length) {
-        dataSourceFieldType.push("any");
-      }
-      let children = [];
-      if (field.type && ["any", "array", "object"].includes(field.type)) {
-        children = getCascaderOptionsFromFields(field.fields, dataSourceFieldType);
-      }
-      const item = {
-        label: `${field.title || field.name}(${field.type})`,
-        value: field.name,
-        children
-      };
+    const typeSet = new Set(dataSourceFieldType.length ? dataSourceFieldType : ["any"]);
+    const includesAny = typeSet.has("any");
+    const result = [];
+    for (const field of fields) {
       const fieldType = field.type || "any";
-      if (dataSourceFieldType.includes("any") || dataSourceFieldType.includes(fieldType)) {
-        child.push(item);
-        return;
-      }
-      if (!dataSourceFieldType.includes(fieldType) && !["array", "object", "any"].includes(fieldType)) {
-        return;
-      }
-      if (!children.length && ["object", "array", "any"].includes(field.type || "")) {
-        return;
+      const isContainerType = fieldType === "any" || fieldType === "array" || fieldType === "object";
+      const children = isContainerType ? getCascaderOptionsFromFields(field.fields, dataSourceFieldType) : [];
+      const matchesType = includesAny || typeSet.has(fieldType);
+      if (matchesType || isContainerType && children.length) {
+        result.push({
+          label: `${field.title || field.name}(${field.type})`,
+          value: field.name,
+          children
+        });
       }
-      child.push(item);
-    });
-    return child;
+    }
+    return result;
+  };
+  const getFieldType = (ds, fieldNames) => {
+    let fields = ds?.fields;
+    let type = "";
+    for (const fieldName of fieldNames) {
+      if (!fields?.length) return "";
+      const field = fields.find((f) => f.name === fieldName);
+      if (!field) return "";
+      type = field.type || "";
+      fields = field.fields;
+    }
+    return type;
   };
-  const removeDataSourceFieldPrefix = (id) => id?.replace(utils.DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, "") || "";
 
   globalThis.requestIdleCallback = globalThis.requestIdleCallback || function(cb) {
     const start = Date.now();
@@ -8309,17 +8357,11 @@
       const options = vue.computed(() => {
         const [id, ...fieldNames] = [...props.config.parentFields || [], ...props.model.field];
         const ds = dataSourceService.getDataSourceById(id);
-        let fields = ds?.fields || [];
-        let type = "";
-        (fieldNames || []).forEach((fieldName) => {
-          const field = fields.find((f) => f.name === fieldName);
-          fields = field?.fields || [];
-          type = field?.type || "";
-        });
+        const type = getFieldType(ds, fieldNames);
         if (type === "array") {
           return arrayOptions;
         }
-        if (type === "boolean") {
+        if (type === "boolean" || type === "null") {
           return [
             { text: "是", value: "is" },
             { text: "不是", value: "not" }
@@ -8806,7 +8848,12 @@
         }
         return;
       }
-      editorService.update(ev.data.map((data) => ({ id: utils.getIdFromEl()(data.el) || "", style: data.style })));
+      ev.data.forEach((data) => {
+        const id = utils.getIdFromEl()(data.el);
+        if (!id) return;
+        const { style = {} } = data;
+        editorService.update({ id, style }, { changeRecords: buildChangeRecords(style, "style") });
+      });
     });
     stage.on("sort", (ev) => {
       editorService.sort(ev.src, ev.dist);
@@ -9256,6 +9303,7 @@
           name: "defaultValue",
           text: "默认值",
           parse: true,
+          mFormItemType: "data-source-field-defaultValue",
           type: (mForm, { model }) => {
             if (model.type === "number") return "number";
             if (model.type === "boolean") return "select";
@@ -9489,7 +9537,7 @@
         }
       );
       const fieldsOptions = vue.computed(() => {
-        const ds = dataSources.value.find((ds2) => ds2.id === removeDataSourceFieldPrefix(selectDataSourceId.value));
+        const ds = dataSources.value.find((ds2) => ds2.id === utils.removeDataSourceFieldPrefix(selectDataSourceId.value));
         if (!ds) return [];
         return getCascaderOptionsFromFields(ds.fields, props.dataSourceFieldType);
       });
@@ -9517,7 +9565,7 @@
         () => uiService.get("sideBarItems").find((item) => item.$key === SideItemKey.DATA_SOURCE)
       );
       const editHandler = (id) => {
-        eventBus?.emit("edit-data-source", removeDataSourceFieldPrefix(id));
+        eventBus?.emit("edit-data-source", utils.removeDataSourceFieldPrefix(id));
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$W, [
@@ -9684,7 +9732,7 @@
         if (typeof props.config.checkStrictly !== "function") {
           value = props.config.checkStrictly;
         } else {
-          const dsId = removeDataSourceFieldPrefix(props.model[0]);
+          const dsId = utils.removeDataSourceFieldPrefix(props.model[0]);
           const dataSource = dataSources.value.find((ds) => ds.id === dsId);
           value = props.config.checkStrictly(mForm, {
             values: mForm?.initValues || {},
@@ -9704,7 +9752,7 @@
           return;
         }
         const [dsId, ...keys] = value;
-        const dataSource = dataSources.value.find((ds) => ds.id === removeDataSourceFieldPrefix(dsId));
+        const dataSource = dataSources.value.find((ds) => ds.id === utils.removeDataSourceFieldPrefix(dsId));
         if (!dataSource) {
           emit("change", value, eventData);
           return;
@@ -11144,6 +11192,21 @@
       const { dataSourceService } = useServices();
       const mForm = vue.inject("mForm");
       const parentFields = vue.computed(() => formPlugin.filterFunction(mForm, props.config.parentFields, props) || []);
+      const fieldOnChange = (_formState, v, { model }) => {
+        const [id, ...fieldNames] = [...parentFields.value, ...v];
+        const ds = dataSourceService.getDataSourceById(id);
+        const type = getFieldType(ds, fieldNames);
+        if (type === "number") {
+          model.value = Number(model.value);
+        } else if (type === "boolean") {
+          model.value = Boolean(model.value);
+        } else if (type === "null") {
+          model.value = null;
+        } else {
+          model.value = `${model.value}`;
+        }
+        return v;
+      };
       const config = vue.computed(() => ({
         type: "groupList",
         name: props.name,
@@ -11174,14 +11237,16 @@
                 name: "field",
                 value: "key",
                 label: "字段",
-                checkStrictly: false
+                checkStrictly: false,
+                onChange: fieldOnChange
               } : {
                 type: "data-source-field-select",
                 name: "field",
                 value: "key",
                 label: "字段",
                 checkStrictly: false,
-                dataSourceFieldType: ["string", "number", "boolean", "any"]
+                dataSourceFieldType: ["string", "number", "boolean", "any"],
+                onChange: fieldOnChange
               },
               {
                 type: "cond-op-select",
@@ -11196,29 +11261,32 @@
                 items: [
                   {
                     name: "value",
-                    type: (mForm2, { model }) => {
+                    type: (_mForm, { model }) => {
                       const [id, ...fieldNames] = [...parentFields.value, ...model.field];
                       const ds = dataSourceService.getDataSourceById(id);
-                      let fields = ds?.fields || [];
-                      let type = "";
-                      (fieldNames || []).forEach((fieldName) => {
-                        const field = fields.find((f) => f.name === fieldName);
-                        fields = field?.fields || [];
-                        type = field?.type || "";
-                      });
+                      const type = getFieldType(ds, fieldNames);
                       if (type === "number") {
                         return "number";
                       }
                       if (type === "boolean") {
                         return "select";
                       }
+                      if (type === "null") {
+                        return "display";
+                      }
                       return "text";
                     },
                     options: [
                       { text: "true", value: true },
                       { text: "false", value: false }
                     ],
-                    display: (vm, { model }) => !["between", "not_between"].includes(model.op)
+                    display: (_mForm, { model }) => !["between", "not_between"].includes(model.op),
+                    displayText: (_mForm, { model }) => {
+                      if (model.value === null) {
+                        return "null";
+                      }
+                      return model.value;
+                    }
                   },
                   {
                     name: "range",
@@ -11762,8 +11830,9 @@
           ])) : vue.createCommentVNode("v-if", true),
           __props.config.advanced && showCode.value ? (vue.openBlock(), vue.createBlock(_sfc_main$1r, {
             key: 1,
-            "init-values": __props.model[__props.name],
+            "editor-custom-type": "m-fields-key-value",
             language: "javascript",
+            "init-values": __props.model[__props.name],
             options: {
               readOnly: __props.disabled
             },
@@ -14445,6 +14514,7 @@
             showSrc.value ? vue.renderSlot(_ctx.$slots, "src-code", { key: 0 }, () => [
               vue.createVNode(_sfc_main$1r, {
                 class: "m-editor-content",
+                "editor-custom-type": "m-editor-content",
                 "init-values": root.value,
                 options: vue.unref(codeOptions),
                 onSave: saveCode
@@ -14825,6 +14895,7 @@
           showSrc.value ? (vue.openBlock(), vue.createBlock(_sfc_main$1r, {
             key: 1,
             class: "m-editor-props-panel-src-code",
+            "editor-custom-type": "m-editor-props-panel-src-code",
             height: `${vue.unref(editorContentHeight)}px`,
             "init-values": __props.codeValueKey ? __props.values[__props.codeValueKey] : __props.values,
             options: vue.unref(codeOptions),
@@ -21829,6 +21900,7 @@
   exports.advancedTabConfig = advancedTabConfig;
   exports.arrayOptions = arrayOptions;
   exports.beforePaste = beforePaste;
+  exports.buildChangeRecords = buildChangeRecords;
   exports.change2Fixed = change2Fixed;
   exports.codeBlockService = codeBlockService;
   exports.dataSourceService = dataSourceService;
@@ -21851,6 +21923,7 @@
   exports.getDefaultConfig = getDefaultConfig;
   exports.getDisplayField = getDisplayField;
   exports.getEditorConfig = getEditorConfig;
+  exports.getFieldType = getFieldType;
   exports.getFormConfig = getFormConfig;
   exports.getFormValue = getFormValue;
   exports.getGuideLineFromCache = getGuideLineFromCache;
@@ -21868,7 +21941,6 @@
   exports.moveItemsInContainer = moveItemsInContainer;
   exports.numberOptions = numberOptions;
   exports.propsService = propsService;
-  exports.removeDataSourceFieldPrefix = removeDataSourceFieldPrefix;
   exports.serializeConfig = serializeConfig;
   exports.setChildrenLayout = setChildrenLayout;
   exports.setEditorConfig = setEditorConfig;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.5-beta.1",
+  "version": "1.7.6",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -57,11 +57,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^7.0.0",
     "sortablejs": "^1.15.6",
-    "@tmagic/form": "1.7.4",
-    "@tmagic/stage": "1.7.4",
-    "@tmagic/utils": "1.7.4",
-    "@tmagic/design": "1.7.4",
-    "@tmagic/table": "1.7.4"
+    "@tmagic/design": "1.7.6",
+    "@tmagic/form": "1.7.6",
+    "@tmagic/utils": "1.7.6",
+    "@tmagic/stage": "1.7.6",
+    "@tmagic/table": "1.7.6"
   },
   "devDependencies": {
     "@types/events": "^3.0.3",
@@ -75,7 +75,7 @@
     "monaco-editor": "^0.48.0",
     "typescript": "^5.9.3",
     "vue": "^3.5.24",
-    "@tmagic/core": "1.7.4"
+    "@tmagic/core": "1.7.6"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/fields/Code.vue

@@ -9,6 +9,7 @@
     }"
     :autosize="config.autosize"
     :parse="config.parse"
+    :editor-custom-type="config.mFormItemType"
     @save="save"
   ></MagicCodeEditor>
 </template>

package/src/fields/CondOpSelect.vue

@@ -33,7 +33,7 @@ import { getDesignConfig, TMagicSelect } from '@tmagic/design';
 import type { CondOpSelectConfig, FieldProps } from '@tmagic/form';
 
 import { useServices } from '@editor/hooks/use-services';
-import { arrayOptions, eqOptions, numberOptions } from '@editor/utils';
+import { arrayOptions, eqOptions, getFieldType, numberOptions } from '@editor/utils';
 
 defineOptions({
   name: 'MFieldsCondOpSelect',
@@ -54,19 +54,13 @@ const options = computed(() => {
 
   const ds = dataSourceService.getDataSourceById(id);
 
-  let fields = ds?.fields || [];
-  let type = '';
-  (fieldNames || []).forEach((fieldName: string) => {
-    const field = fields.find((f) => f.name === fieldName);
-    fields = field?.fields || [];
-    type = field?.type || '';
-  });
+  const type = getFieldType(ds, fieldNames);
 
   if (type === 'array') {
     return arrayOptions;
   }
 
-  if (type === 'boolean') {
+  if (type === 'boolean' || type === 'null') {
     return [
       { text: '是', value: 'is' },
       { text: '不是', value: 'not' },

package/src/fields/DataSourceFieldSelect/FieldSelect.vue

@@ -72,12 +72,12 @@ import { Edit, View } from '@element-plus/icons-vue';
 import type { DataSourceFieldType } from '@tmagic/core';
 import { getDesignConfig, TMagicButton, TMagicCascader, TMagicSelect, TMagicTooltip } from '@tmagic/design';
 import { type FilterFunction, filterFunction, type FormState, type SelectOption } from '@tmagic/form';
-import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
+import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, removeDataSourceFieldPrefix } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';
 import { useServices } from '@editor/hooks/use-services';
 import { type EventBus, SideItemKey } from '@editor/type';
-import { getCascaderOptionsFromFields, removeDataSourceFieldPrefix } from '@editor/utils';
+import { getCascaderOptionsFromFields } from '@editor/utils';
 
 const props = defineProps<{
   /**

package/src/fields/DataSourceFieldSelect/Index.vue

@@ -48,11 +48,10 @@ import { Coin } from '@element-plus/icons-vue';
 import { DataSchema } from '@tmagic/core';
 import { TMagicButton, tMagicMessage, TMagicTooltip } from '@tmagic/design';
 import type { ContainerChangeEventData, DataSourceFieldSelectConfig, FieldProps, FormState } from '@tmagic/form';
-import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
+import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, removeDataSourceFieldPrefix } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';
 import { useServices } from '@editor/hooks/use-services';
-import { removeDataSourceFieldPrefix } from '@editor/utils';
 
 import FieldSelect from './FieldSelect.vue';
 

package/src/fields/DataSourceFields.vue

@@ -234,6 +234,7 @@ const dataSourceFieldsConfig: FormConfig = [
     name: 'defaultValue',
     text: '默认值',
     parse: true,
+    mFormItemType: 'data-source-field-defaultValue',
     type: (mForm: FormState | undefined, { model }: any) => {
       if (model.type === 'number') return 'number';
       if (model.type === 'boolean') return 'select';

package/src/fields/DisplayConds.vue

@@ -27,7 +27,7 @@ import {
 } from '@tmagic/form';
 
 import { useServices } from '@editor/hooks/use-services';
-import { getCascaderOptionsFromFields } from '@editor/utils';
+import { getCascaderOptionsFromFields, getFieldType } from '@editor/utils';
 
 defineOptions({
   name: 'm-fields-display-conds',
@@ -46,6 +46,22 @@ const mForm = inject<FormState | undefined>('mForm');
 
 const parentFields = computed(() => filterFunction<string[]>(mForm, props.config.parentFields, props) || []);
 
+const fieldOnChange = (_formState: FormState | undefined, v: string[], { model }: { model: Record<string, any> }) => {
+  const [id, ...fieldNames] = [...parentFields.value, ...v];
+  const ds = dataSourceService.getDataSourceById(id);
+  const type = getFieldType(ds, fieldNames);
+  if (type === 'number') {
+    model.value = Number(model.value);
+  } else if (type === 'boolean') {
+    model.value = Boolean(model.value);
+  } else if (type === 'null') {
+    model.value = null;
+  } else {
+    model.value = `${model.value}`;
+  }
+  return v;
+};
+
 const config = computed<GroupListConfig>(() => ({
   type: 'groupList',
   name: props.name,
@@ -80,6 +96,7 @@ const config = computed<GroupListConfig>(() => ({
               value: 'key',
               label: '字段',
               checkStrictly: false,
+              onChange: fieldOnChange,
             }
           : {
               type: 'data-source-field-select',
@@ -88,6 +105,7 @@ const config = computed<GroupListConfig>(() => ({
               label: '字段',
               checkStrictly: false,
               dataSourceFieldType: ['string', 'number', 'boolean', 'any'],
+              onChange: fieldOnChange,
             },
         {
           type: 'cond-op-select',
@@ -102,18 +120,10 @@ const config = computed<GroupListConfig>(() => ({
           items: [
             {
               name: 'value',
-              type: (mForm, { model }) => {
+              type: (_mForm, { model }) => {
                 const [id, ...fieldNames] = [...parentFields.value, ...model.field];
-
                 const ds = dataSourceService.getDataSourceById(id);
-
-                let fields = ds?.fields || [];
-                let type = '';
-                (fieldNames || []).forEach((fieldName: string) => {
-                  const field = fields.find((f) => f.name === fieldName);
-                  fields = field?.fields || [];
-                  type = field?.type || '';
-                });
+                const type = getFieldType(ds, fieldNames);
 
                 if (type === 'number') {
                   return 'number';
@@ -123,13 +133,23 @@ const config = computed<GroupListConfig>(() => ({
                   return 'select';
                 }
 
+                if (type === 'null') {
+                  return 'display';
+                }
+
                 return 'text';
               },
               options: [
                 { text: 'true', value: true },
                 { text: 'false', value: false },
               ],
-              display: (vm, { model }) => !['between', 'not_between'].includes(model.op),
+              display: (_mForm, { model }) => !['between', 'not_between'].includes(model.op),
+              displayText: (_mForm: FormState | undefined, { model }: any) => {
+                if (model.value === null) {
+                  return 'null';
+                }
+                return model.value;
+              },
             },
             {
               name: 'range',

package/src/fields/KeyValue.vue

@@ -37,8 +37,9 @@
 
     <MagicCodeEditor
       v-if="config.advanced && showCode"
-      :init-values="model[name]"
+      editor-custom-type="m-fields-key-value"
       language="javascript"
+      :init-values="model[name]"
       :options="{
         readOnly: disabled,
       }"