@flowgram-vue/type-editor 0.2.0

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@flowgram-vue/type-editor",
+  "version": "0.2.0",
+  "type": "module",
+  "license": "MIT",
+  "homepage": "https://flowgram.ai/",
+  "repository": "https://github.com/Crayon-hua/flowgram-vue",
+  "description": "JSON Schema type editor with Vue + native controls. Semi UI dropped.",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./index.css": "./index.css"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "dependencies": {
+    "classnames": "^2.5.1",
+    "inversify": "^6.0.1",
+    "lodash-es": "^4.17.21",
+    "nanoid": "^5.0.9",
+    "reflect-metadata": "~0.2.2",
+    "@flowgram-vue/json-schema": "0.2.0",
+    "@flowgram-vue/utils": "0.2.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^20",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/test-utils": "^2.4.6",
+    "eslint": "^9.0.0",
+    "jsdom": "^26.1.0",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.4",
+    "vue": "^3.5.18",
+    "@flowgram-vue/build-config": "0.2.0",
+    "@flowgram-vue/eslint-config": "0.2.0",
+    "@flowgram-vue/ts-config": "0.2.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "flowgram-build",
+    "test": "vitest run",
+    "lint": "eslint .",
+    "ts-check": "tsc --noEmit",
+    "type-check": "tsc --noEmit",
+    "build:fast": "flowgram-build --fast",
+    "build:watch": "flowgram-build --watch"
+  }
+}

package/src/components/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './type-editor';
+export * from './type-selector';
+export { columnConfigs as TypeEditorColumnConfigs } from './type-editor/columns';

package/src/components/type-editor/columns/index.ts

@@ -0,0 +1,404 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { defineComponent, h, type PropType } from 'vue';
+import { IJsonSchema } from '@flowgram-vue/json-schema';
+
+import { TypeEditorColumnConfig, TypeEditorColumnType, type RenderProps } from '../../../types';
+import { useTypeDefinitionManager } from '../../../contexts';
+import { typeEditorUtils, getComponentId } from '../utils';
+import { useDisabled } from '../hooks/disabled';
+import { toast } from '../../../utils/toast';
+
+const cellProps = {
+  rowData: { type: Object as PropType<RenderProps<IJsonSchema>['rowData']>, required: true },
+  readonly: Boolean,
+  onViewMode: { type: Function as PropType<() => void>, required: true },
+  typeEditor: { type: Object as PropType<RenderProps<IJsonSchema>['typeEditor']>, required: true },
+  onChildrenVisibleChange: {
+    type: Function as PropType<(id: string, val: boolean) => void>,
+    required: true,
+  },
+  onChange: { type: Function as PropType<() => void>, required: true },
+  onEditMode: { type: Function as PropType<() => void>, required: true },
+  unOpenKeys: { type: Object as PropType<Record<string, boolean>>, required: true },
+  error: Boolean,
+} as const;
+
+export const KeyView = defineComponent({
+  name: 'KeyView',
+  props: cellProps,
+  setup(props) {
+    const typeService = useTypeDefinitionManager();
+    return () => {
+      const rowData = props.rowData;
+      const disabled = useDisabled(TypeEditorColumnType.Key, rowData);
+      const config = typeService.getTypeBySchema(rowData.self);
+      const indent = (rowData.level + (config?.canAddField?.(rowData) ? 0 : 1)) * 16;
+      return h(
+        'div',
+        {
+          class: 'fg-type-key',
+          id: getComponentId('key-text'),
+          onClick: disabled ? undefined : () => props.onEditMode(),
+        },
+        [
+          h('span', { class: 'fg-type-indent', style: { width: `${indent}px` } }),
+          rowData.childrenCount
+            ? h(
+                'button',
+                {
+                  class: 'fg-type-icon-btn',
+                  type: 'button',
+                  onClick: (e: Event) => {
+                    props.onChildrenVisibleChange(rowData.id, !props.unOpenKeys[rowData.id]);
+                    e.stopPropagation();
+                  },
+                },
+                props.unOpenKeys[rowData.id] ? '▸' : '▾'
+              )
+            : null,
+          h(
+            'span',
+            { class: 'fg-type-key-text', title: disabled },
+            typeEditorUtils.formateKey(rowData.key)
+          ),
+          !props.readonly && config?.canAddField?.(rowData)
+            ? h(
+                'button',
+                {
+                  class: 'fg-type-icon-btn',
+                  type: 'button',
+                  id: getComponentId('add-field'),
+                  onClick: (e: Event) => {
+                    e.stopPropagation();
+                    const parent = config.getPropertiesParent?.(rowData.self);
+                    if (!parent) {
+                      return;
+                    }
+                    if (!parent.properties) {
+                      parent.properties = {};
+                    }
+                    let index = -1;
+                    Object.values(parent.properties).forEach((val) => {
+                      index = Math.max(index, val.extra?.index || 0);
+                    });
+                    const [key, schema] = typeEditorUtils.genNewTypeSchema(index + 1);
+                    parent.properties[key] = schema as IJsonSchema;
+                    props.onChange();
+                  },
+                },
+                '+'
+              )
+            : null,
+        ]
+      );
+    };
+  },
+});
+
+export const KeyEdit = defineComponent({
+  name: 'KeyEdit',
+  props: cellProps,
+  setup(props) {
+    return () =>
+      h('input', {
+        class: 'fg-type-input',
+        id: getComponentId('key-edit'),
+        autofocus: true,
+        value: typeEditorUtils.formateKey(props.rowData.key),
+        onBlur: (e: Event) => {
+          const value = (e.target as HTMLInputElement).value;
+          const newVal = typeEditorUtils.deFormateKey(value, props.rowData.key);
+          if (newVal !== props.rowData.key && props.rowData.parent?.properties) {
+            if (props.rowData.parent.properties[newVal]) {
+              toast('The same key exists at the current level.', 'error');
+              return;
+            }
+            props.rowData.parent.properties[newVal] =
+              props.rowData.parent.properties[props.rowData.key];
+            delete props.rowData.parent.properties[props.rowData.key];
+          }
+          props.onChange();
+          props.onViewMode();
+        },
+      });
+  },
+});
+
+export const TypeView = defineComponent({
+  name: 'TypeView',
+  props: cellProps,
+  setup(props) {
+    const typeService = useTypeDefinitionManager();
+    return () => {
+      const disabled = useDisabled(TypeEditorColumnType.Type, props.rowData);
+      const typeConfig = typeService.getTypeBySchema(props.rowData.self);
+      return h(
+        'div',
+        {
+          class: 'fg-type-key',
+          title: disabled,
+          onClick: disabled ? undefined : () => props.onEditMode(),
+        },
+        [typeConfig?.getDisplayLabel?.(props.rowData) || 'Unknown']
+      );
+    };
+  },
+});
+
+export const RequiredView = defineComponent({
+  name: 'RequiredView',
+  props: cellProps,
+  setup(props) {
+    return () => {
+      const disabled = useDisabled(TypeEditorColumnType.Required, props.rowData);
+      return h('div', { class: 'fg-type-center' }, [
+        h('input', {
+          type: 'checkbox',
+          disabled: !!disabled,
+          checked: !!props.rowData.isRequired,
+          onChange: () => {
+            const { parent } = props.rowData;
+            if (!parent) {
+              return;
+            }
+            if (!parent.required) {
+              parent.required = [];
+            }
+            const idx = parent.required.findIndex((key) => key === props.rowData.key);
+            if (idx !== -1) {
+              parent.required.splice(idx, 1);
+            } else {
+              parent.required.push(props.rowData.key);
+            }
+            props.onChange();
+          },
+        }),
+      ]);
+    };
+  },
+});
+
+export const DescriptionView = defineComponent({
+  name: 'DescriptionView',
+  props: cellProps,
+  setup(props) {
+    return () => {
+      const disabled = useDisabled(TypeEditorColumnType.Description, props.rowData);
+      return h(
+        'div',
+        {
+          class: 'fg-type-key',
+          title: disabled,
+          onClick: disabled ? undefined : () => props.onEditMode(),
+        },
+        props.rowData.description || ''
+      );
+    };
+  },
+});
+
+export const DescriptionEdit = defineComponent({
+  name: 'DescriptionEdit',
+  props: cellProps,
+  setup(props) {
+    return () =>
+      h('input', {
+        class: 'fg-type-input',
+        autofocus: true,
+        value: props.rowData.description,
+        onBlur: (e: Event) => {
+          props.rowData.self.description = (e.target as HTMLInputElement).value;
+          props.onChange();
+          props.onViewMode();
+        },
+      });
+  },
+});
+
+export const DefaultView = defineComponent({
+  name: 'DefaultView',
+  props: cellProps,
+  setup(props) {
+    const typeService = useTypeDefinitionManager();
+    return () => {
+      const disabled = useDisabled(TypeEditorColumnType.Default, props.rowData);
+      const config = typeService.getTypeBySchema(props.rowData.self);
+      const text = config?.getValueText
+        ? config.getValueText(props.rowData.self.default)
+        : String(props.rowData.self.default ?? '');
+      return h(
+        'div',
+        {
+          class: 'fg-type-key',
+          title: disabled,
+          onClick: disabled ? undefined : () => props.onEditMode(),
+        },
+        text
+      );
+    };
+  },
+});
+
+export const DefaultEdit = defineComponent({
+  name: 'DefaultEdit',
+  props: cellProps,
+  setup(props) {
+    const typeService = useTypeDefinitionManager();
+    return () => {
+      const config = typeService.getTypeBySchema(props.rowData.self);
+      return (
+        config?.getInputNode?.({
+          value: props.rowData.self.default,
+          type: props.rowData.self,
+          onChange: (v) => {
+            props.rowData.self.default = v;
+          },
+          onSubmit: () => {
+            props.onChange();
+            props.onViewMode();
+          },
+        }) || null
+      );
+    };
+  },
+});
+
+export const ValueView = defineComponent({
+  name: 'ValueView',
+  props: cellProps,
+  setup(props) {
+    return () =>
+      h(
+        'div',
+        { class: 'fg-type-key', onClick: () => props.onEditMode() },
+        String(props.rowData.self?.extra?.value ?? '')
+      );
+  },
+});
+
+export const OperateView = defineComponent({
+  name: 'OperateView',
+  props: cellProps,
+  setup(props) {
+    return () => {
+      const disabled = useDisabled(TypeEditorColumnType.Operate, props.rowData);
+      return h('div', { class: 'fg-type-center' }, [
+        h(
+          'button',
+          {
+            class: 'fg-type-icon-btn',
+            type: 'button',
+            id: getComponentId('remove-field'),
+            disabled: !!disabled,
+            onClick: () => {
+              if (!props.rowData.parent?.properties) {
+                return;
+              }
+              delete props.rowData.parent.properties[props.rowData.key];
+              typeEditorUtils.sortProperties(props.rowData.parent);
+              props.onChange();
+            },
+          },
+          '✕'
+        ),
+      ]);
+    };
+  },
+});
+
+export const PrivateView = defineComponent({
+  name: 'PrivateView',
+  props: cellProps,
+  setup(props) {
+    return () =>
+      h('div', { class: 'fg-type-center' }, [
+        h('input', {
+          type: 'checkbox',
+          checked: !!props.rowData.extra?.private,
+          onChange: () => {
+            if (!props.rowData.extra) {
+              props.rowData.extra = {};
+            }
+            props.rowData.extra.private = !props.rowData.extra.private;
+            props.onChange();
+          },
+        }),
+      ]);
+  },
+});
+
+export const keyColumnConfig: TypeEditorColumnConfig<IJsonSchema> = {
+  type: TypeEditorColumnType.Key,
+  label: 'Key',
+  width: 43,
+  viewRender: KeyView,
+  editRender: KeyEdit,
+};
+
+export const typeColumnConfig: TypeEditorColumnConfig<IJsonSchema> = {
+  type: TypeEditorColumnType.Type,
+  label: 'Type',
+  width: 20,
+  viewRender: TypeView,
+};
+
+export const requiredColumnConfig: TypeEditorColumnConfig<IJsonSchema> = {
+  type: TypeEditorColumnType.Required,
+  label: 'Required',
+  width: 11,
+  viewRender: RequiredView,
+};
+
+export const descriptionColumnConfig: TypeEditorColumnConfig<IJsonSchema> = {
+  type: TypeEditorColumnType.Description,
+  width: 15,
+  label: 'Description',
+  viewRender: DescriptionView,
+  editRender: DescriptionEdit,
+};
+
+export const defaultColumnConfig: TypeEditorColumnConfig<IJsonSchema> = {
+  type: TypeEditorColumnType.Default,
+  width: 15,
+  label: 'Default',
+  viewRender: DefaultView,
+  editRender: DefaultEdit,
+};
+
+export const valueColumnConfig: TypeEditorColumnConfig<IJsonSchema> = {
+  type: TypeEditorColumnType.Value,
+  width: 15,
+  label: 'Value',
+  viewRender: ValueView,
+};
+
+export const operateColumnConfig: TypeEditorColumnConfig<IJsonSchema> = {
+  type: TypeEditorColumnType.Operate,
+  label: 'Operate',
+  width: 11,
+  focusable: false,
+  viewRender: OperateView,
+};
+
+export const privateColumnConfig: TypeEditorColumnConfig<IJsonSchema> = {
+  type: TypeEditorColumnType.Private,
+  label: 'Private',
+  width: 11,
+  viewRender: PrivateView,
+  info: () => 'Private under the current project.',
+};
+
+export const columnConfigs = [
+  keyColumnConfig,
+  typeColumnConfig,
+  requiredColumnConfig,
+  descriptionColumnConfig,
+  privateColumnConfig,
+  valueColumnConfig,
+  defaultColumnConfig,
+  operateColumnConfig,
+];

package/src/components/type-editor/common.ts

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * empty key 前缀
+ */
+export const SUFFIX = '___empty___';
+
+/**
+ * 表格 header 高度
+ */
+export const HEADER_HIGHT = 36;
+/**
+ * 表格 cell 高度
+ * 36 高度 + 1px border
+ */
+export const CELL_HIGHT = 36 + 1;
+
+/**
+ * cell padding 宽度
+ */
+export const CELL_PADDING = 8;
+
+/**
+ * 单个缩进的宽度
+ */
+export const INDENT_WIDTH = 16;
+
+/**
+ * 操作栏高度
+ */
+export const TAB_BRA_HIGHT = 0;
+
+/**
+ * test id 前缀
+ */
+export const COMPONENT_ID_PREFIX = 'type-editor-component-id';
+
+/**
+ * root 字段 id
+ */
+export const ROOT_FIELD_ID = 'root';

package/src/components/type-editor/formatter/index.ts

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { IJsonSchema } from '@flowgram-vue/json-schema';
+
+import { SUFFIX } from '../common';
+export type Formatter = (typeSchema: Partial<IJsonSchema>) => void;
+
+export const extraFormatter: Formatter = (type) => {
+  if (type.extra !== undefined) {
+    type.extra = type.extra;
+
+    delete type.extra;
+  }
+};
+
+export const extraDeFormatter: Formatter = (type) => {
+  if (type.extra !== undefined) {
+    type.extra = type.extra;
+    delete type.extra;
+  }
+};
+
+export const emptyKeyFormatter: Formatter = (type) => {
+  if (type.properties) {
+    Object.keys(type.properties).forEach((k) => {
+      if (k.startsWith(SUFFIX)) {
+        delete type.properties![k];
+      }
+    });
+  }
+};
+
+export const disableFixIndexFormatter: Formatter = (type) => {
+  if (type.extra) {
+    delete type.extra.index;
+
+    if (Object.keys(type.extra).length === 0) {
+      delete type.extra;
+    }
+  }
+};

package/src/components/type-editor/hooks/active-pos.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { onBeforeUnmount, ref } from 'vue';
+import { IJsonSchema } from '@flowgram-vue/json-schema';
+
+import { TypeEditorService } from '../../../services';
+import { useService } from '../../../contexts';
+
+export const useActivePos = (): { x: number; y: number } => {
+  const typeEditorService = useService<TypeEditorService<IJsonSchema>>(TypeEditorService);
+  const activePos = ref(typeEditorService.activePos);
+  const dispose = typeEditorService.onActivePosChange.event((v) => {
+    activePos.value = v;
+  });
+  onBeforeUnmount(() => dispose.dispose());
+  return activePos.value;
+};

package/src/components/type-editor/hooks/disabled.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { IJsonSchema } from '@flowgram-vue/json-schema';
+
+import { TypeEditorColumnType, TypeEditorRowData } from '../../../types';
+
+export const useDisabled = <TypeSchema extends Partial<IJsonSchema>>(
+  type: TypeEditorColumnType,
+  rowData: TypeEditorRowData<TypeSchema>
+): string | undefined => {
+  const disabled = (rowData.disableEditColumn || []).find((r) => r.column === type);
+  if (disabled?.reason) {
+    return disabled.reason;
+  }
+  if (typeof rowData.extra?.editable === 'string') {
+    return rowData.extra.editable;
+  }
+  return rowData.extra?.editable === false ? `${type}  is not editable.` : undefined;
+};

package/src/components/type-editor/hooks/formatter-value.ts

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { IJsonSchema } from '@flowgram-vue/json-schema';
+
+import { ModeValueConfig, TypeEditorMode, TypeEditorProp, TypeEditorValue } from '../type';
+import { modeValueConfig } from '../mode';
+import { extraDeFormatter, extraFormatter, Formatter } from '../formatter';
+import { traverseIJsonSchema } from '../../../services/utils';
+
+export const useFormatter = <Mode extends TypeEditorMode, TypeSchema extends Partial<IJsonSchema>>({
+  extraConfig = {},
+  mode,
+}: Pick<TypeEditorProp<Mode, TypeSchema>, 'mode' | 'extraConfig'>) => {
+  const { useExtra } = extraConfig;
+  const modeConfig = modeValueConfig.find((v) => v.mode === mode)! as unknown as ModeValueConfig<
+    Mode,
+    TypeSchema
+  >;
+
+  const formatter = (value: TypeEditorValue<Mode, TypeSchema> | undefined) => {
+    const originSchema = value && modeConfig.convertValueToSchema(value as never);
+    let res = originSchema ? JSON.parse(JSON.stringify(originSchema)) : originSchema;
+    const formatters: Formatter[] = [];
+    if (useExtra) {
+      formatters.push(extraFormatter);
+    }
+    if (formatters.length !== 0 && res) {
+      traverseIJsonSchema(res, (type) => {
+        formatters.forEach((f) => f(type));
+      });
+    }
+    return res;
+  };
+
+  const deFormatter = (originSchema: TypeSchema | undefined) => {
+    let schema = originSchema ? JSON.parse(JSON.stringify(originSchema)) : originSchema;
+    const formatters: Formatter[] = [];
+    if (useExtra) {
+      formatters.push(extraDeFormatter);
+    }
+    if (formatters.length !== 0 && schema) {
+      traverseIJsonSchema(schema, (type) => {
+        formatters.forEach((f) => f(type));
+      });
+    }
+    return schema && modeConfig.convertSchemaToValue(schema as TypeSchema);
+  };
+
+  return { formatter, deFormatter, modeConfig };
+};

package/src/components/type-editor/hooks/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { useActivePos } from './active-pos';
+export { useDisabled } from './disabled';
+export { useFormatter } from './formatter-value';

package/src/components/type-editor/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './type';
+export { columnConfigs as TypeEditorColumnConfigs } from './columns';
+export { default as TypeEditor } from './type-editor.vue';
+export { default as TypeEditorTable } from './table.vue';