@flowgram-vue/type-editor 0.2.0

package/src/styles.css

@@ -0,0 +1,235 @@
+.fg-type-editor {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  outline: none;
+  width: 100%;
+  font-size: 13px;
+  color: #1c1f23;
+}
+
+.fg-type-editor table {
+  table-layout: fixed;
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.fg-type-editor th,
+.fg-type-editor td {
+  border: 1px solid #e5e6eb;
+  height: 36px;
+  padding: 0 8px;
+  background: #fff;
+  vertical-align: middle;
+  position: relative;
+}
+
+.fg-type-editor th {
+  background: #f7f8fa;
+  text-align: left;
+  font-weight: 600;
+}
+
+.fg-type-toolbar {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.fg-type-btn {
+  border: 1px solid #d9d9d9;
+  background: #fff;
+  border-radius: 4px;
+  height: 24px;
+  padding: 0 8px;
+  cursor: pointer;
+}
+
+.fg-type-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.fg-type-input,
+.fg-type-select,
+.fg-type-textarea {
+  width: 100%;
+  height: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  font: inherit;
+}
+
+.fg-type-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+}
+
+.fg-type-label-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.fg-type-key {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+  min-height: 36px;
+}
+
+.fg-type-key-text {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.fg-type-icon-btn {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  padding: 0 2px;
+  color: #86909c;
+}
+
+.fg-type-icon-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.fg-type-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  gap: 6px;
+}
+
+.fg-type-empty {
+  padding: 40px 0;
+  text-align: center;
+  color: #86909c;
+}
+
+.fg-type-feedback {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -18px;
+  font-size: 11px;
+  color: #f53f3f;
+  z-index: 2;
+}
+
+.fg-type-feedback.is-warning {
+  color: #ff7d00;
+}
+
+.fg-type-error-border {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  box-shadow: inset 0 0 0 1px #f53f3f;
+}
+
+.fg-type-drop-tip {
+  position: absolute;
+  height: 1px;
+  background: #3370ff;
+  right: 0;
+}
+
+.fg-type-row.is-dragging {
+  opacity: 0.4;
+}
+
+.fg-type-selector {
+  position: relative;
+  width: 100%;
+}
+
+.fg-type-selector-panel {
+  position: absolute;
+  z-index: 20;
+  left: 0;
+  top: 100%;
+  min-width: 180px;
+  max-height: 240px;
+  overflow: auto;
+  background: #fff;
+  border: 1px solid #e5e6eb;
+  border-radius: 6px;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+}
+
+.fg-type-selector-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  cursor: pointer;
+}
+
+.fg-type-selector-item:hover,
+.fg-type-selector-item.is-active {
+  background: #f2f3f5;
+}
+
+.fg-type-selector-item.is-disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.fg-type-modal {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.35);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 50;
+}
+
+.fg-type-modal-card {
+  width: 720px;
+  max-width: 90vw;
+  background: #fff;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.fg-type-toast {
+  position: fixed;
+  top: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #1c1f23;
+  color: #fff;
+  padding: 8px 12px;
+  border-radius: 6px;
+  z-index: 100;
+  font-size: 13px;
+}
+
+.fg-type-toast--success {
+  background: #00b42a;
+}
+
+.fg-type-toast--warning {
+  background: #ff7d00;
+}
+
+.fg-type-toast--error {
+  background: #f53f3f;
+}
+
+.fg-type-indent {
+  flex-shrink: 0;
+  height: 100%;
+}

package/src/type-registry/array.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { h } from 'vue';
+import { IJsonSchema, JsonSchemaTypeRegistryCreator } from '@flowgram-vue/json-schema';
+
+export const arrayRegistryCreator: JsonSchemaTypeRegistryCreator = ({ typeManager }) => ({
+  type: 'array',
+  getDisplayLabel: (type: IJsonSchema) => {
+    const config = typeManager.getTypeBySchema(type);
+    return h('span', { class: 'fg-type-label' }, [
+      config?.getDisplayIcon(type) || config?.icon,
+      h('span', { class: 'fg-type-label-text' }, typeManager.getComplexText(type)),
+    ]);
+  },
+});

package/src/type-registry/boolean.ts

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { h } from 'vue';
+import { IJsonSchema, JsonSchemaTypeRegistryCreator } from '@flowgram-vue/json-schema';
+
+import { TypeInputContext } from '../types';
+
+export const booleanRegistryCreator: JsonSchemaTypeRegistryCreator = () => ({
+  type: 'boolean',
+  getInputNode({ value, onChange, onSubmit }: TypeInputContext<IJsonSchema>) {
+    return h(
+      'select',
+      {
+        class: 'fg-type-select',
+        value: Number(value),
+        onChange: (e: Event) => {
+          onChange(Boolean(Number((e.target as HTMLSelectElement).value)));
+          onSubmit();
+        },
+      },
+      [
+        h('option', { value: 1 }, 'True'),
+        h('option', { value: 0 }, 'False'),
+      ]
+    );
+  },
+});

package/src/type-registry/index.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { JsonSchemaTypeRegistryCreator } from '@flowgram-vue/json-schema';
+
+import { stringRegistryCreator } from './string';
+import { objectRegistryCreator } from './object';
+import { numberRegistryCreator } from './number';
+import { integerRegistryCreator } from './integer';
+import { booleanRegistryCreator } from './boolean';
+import { arrayRegistryCreator } from './array';
+
+export const defaultTypeRegistryCreators: JsonSchemaTypeRegistryCreator[] = [
+  stringRegistryCreator,
+  numberRegistryCreator,
+  integerRegistryCreator,
+  booleanRegistryCreator,
+  objectRegistryCreator,
+  arrayRegistryCreator,
+];

package/src/type-registry/integer.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { h } from 'vue';
+import { IJsonSchema, JsonSchemaTypeRegistryCreator } from '@flowgram-vue/json-schema';
+
+import { TypeInputContext } from '../types';
+
+export const integerRegistryCreator: JsonSchemaTypeRegistryCreator = () => ({
+  type: 'integer',
+  getInputNode({ value, onChange, onSubmit }: TypeInputContext<IJsonSchema>) {
+    return h('input', {
+      class: 'fg-type-input',
+      type: 'number',
+      step: 1,
+      autofocus: true,
+      value: value as number,
+      onInput: (e: Event) => onChange(parseInt((e.target as HTMLInputElement).value, 10)),
+      onBlur: onSubmit,
+    });
+  },
+});

package/src/type-registry/number.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { h } from 'vue';
+import { IJsonSchema, JsonSchemaTypeRegistryCreator } from '@flowgram-vue/json-schema';
+
+import { TypeInputContext } from '../types';
+
+export const numberRegistryCreator: JsonSchemaTypeRegistryCreator = () => ({
+  type: 'number',
+  getInputNode({ value, onChange, onSubmit }: TypeInputContext<IJsonSchema>) {
+    return h('input', {
+      class: 'fg-type-input',
+      type: 'number',
+      autofocus: true,
+      value: value as number,
+      onInput: (e: Event) => onChange(Number((e.target as HTMLInputElement).value)),
+      onBlur: onSubmit,
+    });
+  },
+});

package/src/type-registry/object.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { h } from 'vue';
+import { JsonSchemaTypeRegistryCreator } from '@flowgram-vue/json-schema';
+
+export const objectRegistryCreator: JsonSchemaTypeRegistryCreator = () => ({
+  type: 'object',
+  getInputNode: () =>
+    h('div', { class: 'fg-type-unsupported' }, 'Not Supported'),
+});

package/src/type-registry/string.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { h } from 'vue';
+import { IJsonSchema, JsonSchemaTypeRegistryCreator } from '@flowgram-vue/json-schema';
+
+import { TypeInputContext } from '../types';
+
+export const stringRegistryCreator: JsonSchemaTypeRegistryCreator = () => ({
+  type: 'string',
+  getInputNode: ({ value, onChange, onSubmit }: TypeInputContext<IJsonSchema>) =>
+    h('input', {
+      class: 'fg-type-input',
+      autofocus: true,
+      value: value as string,
+      onInput: (e: Event) => onChange((e.target as HTMLInputElement).value),
+      onBlur: onSubmit,
+    }),
+});

package/src/types/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './type-editor';
+export * from './registry';

package/src/types/registry.ts

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { VNode } from 'vue';
+import { IJsonSchema, JsonSchemaTypeRegistry } from '@flowgram-vue/json-schema';
+
+export interface TypeInputConfig<TypeSchema extends Partial<IJsonSchema>> {
+  canEnter?: boolean;
+  getProps?: (typeSchema: TypeSchema) => Record<string, unknown>;
+}
+
+export interface FlowSchemaInitCtx {
+  enum?: string[];
+}
+
+export interface TypeInputContext<TypeSchema extends Partial<IJsonSchema>> {
+  value?: unknown;
+  onChange: (newVal: unknown) => void;
+  type: TypeSchema;
+  onSubmit: () => void;
+}
+
+export interface TypeCascaderConfig<TypeSchema extends Partial<IJsonSchema>> {
+  customCascaderPanel?: (ctx: {
+    typeSchema: TypeSchema;
+    onChange: (typeSchema: TypeSchema) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+  }) => VNode;
+  unClosePanelAfterSelect?: boolean;
+  generateInitCtx?: (typeSchema: TypeSchema) => FlowSchemaInitCtx;
+}
+
+export interface TypeEditorRegistry<TypeSchema extends Partial<IJsonSchema>>
+  extends JsonSchemaTypeRegistry<TypeSchema> {
+  defaultEditable?: true | string;
+  customDisabled?: (ctx: { level: number; parentType: string; parentTypes: string[] }) => string;
+  typeInputConfig?: TypeInputConfig<TypeSchema>;
+  typeCascaderConfig?: TypeCascaderConfig<TypeSchema>;
+  formatDefault?: (val: unknown, type: IJsonSchema) => IJsonSchema;
+  deFormatDefault?: (val: unknown) => unknown;
+  childrenDefaultEditable?: (type: TypeSchema) => true | string;
+  childrenValueEditable?: (type: TypeSchema) => true | string;
+  getInputNode?: (ctx: TypeInputContext<TypeSchema>) => VNode;
+  customChildOptionValue?: () => string[];
+  getItemTypes?: (ctx: {
+    level: number;
+    parentTypes?: string[];
+  }) => Array<{ type: string; disabled?: string }>;
+}

package/src/types/type-editor.ts

@@ -0,0 +1,150 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { Component, VNode } from 'vue';
+import { IJsonSchema } from '@flowgram-vue/json-schema';
+
+import { TypeEditorRegistryManager } from '../services/type-registry-manager';
+import { type TypeEditorService } from '../services';
+
+export interface TypeEditorPos {
+  x: number;
+  y: number;
+}
+
+export interface TypeEditorDropInfo {
+  rowDataId: string;
+  indent: number;
+  index: number;
+}
+
+export interface TypeChangeContext {
+  type: TypeEditorColumnType;
+  oldValue: unknown;
+  newValue: unknown;
+}
+
+export interface RenderProps<TypeSchema extends Partial<IJsonSchema>> {
+  rowData: TypeEditorRowData<TypeSchema>;
+  readonly?: boolean;
+  onViewMode: () => void;
+  typeEditor: TypeEditorService<TypeSchema>;
+  onChildrenVisibleChange: (rowDataKey: string, newVal: boolean) => void;
+  onChange: () => void;
+  onPaste?: (typeSchema?: TypeSchema) => TypeSchema | undefined;
+  onFieldChange?: (ctx: TypeChangeContext) => void;
+  onEditMode: () => void;
+  dragSource?: HTMLElement | null;
+  error: boolean;
+  onError?: (msg: string[]) => void;
+  unOpenKeys: Record<string, boolean>;
+  config: Omit<TypeEditorColumnViewConfig, 'type' | 'visible'>;
+}
+
+export interface ShortcutContext<TypeSchema extends Partial<IJsonSchema>> {
+  value: unknown;
+  rowData: TypeEditorRowData<TypeSchema>;
+  onChange: () => void;
+  onRemoveEmptyLine: (id: string) => void;
+  typeEditor: TypeEditorService<TypeSchema>;
+  onError?: (msg?: string) => void;
+  typeDefinitionService: TypeEditorRegistryManager<TypeSchema>;
+}
+
+export interface TypeEditorColumnConfig<TypeSchema extends Partial<IJsonSchema>> {
+  type: TypeEditorColumnType;
+  label: string;
+  width?: number;
+  focusable?: boolean;
+  info?: () => string;
+  viewRender?: Component;
+  editRender?: Component;
+  customDrop?: boolean;
+  validateCell?: (
+    rowData: TypeEditorRowData<TypeSchema>,
+    extra: TypeEditorSpecialConfig<TypeSchema>
+  ) =>
+    | {
+        level: 'error' | 'warning';
+        msg?: string;
+      }
+    | undefined;
+  shortcuts?: {
+    onEnter?: (ctx: ShortcutContext<TypeSchema>) => void;
+    onTab?: (ctx: ShortcutContext<TypeSchema>) => void;
+    onUp?: (ctx: ShortcutContext<TypeSchema>) => void;
+    onDown?: (ctx: ShortcutContext<TypeSchema>) => void;
+    onLeft?: (ctx: ShortcutContext<TypeSchema>) => void;
+    onRight?: (ctx: ShortcutContext<TypeSchema>) => void;
+    onCopy?: (ctx: ShortcutContext<TypeSchema>) => void;
+    onPaste?: (ctx: ShortcutContext<TypeSchema>) => void;
+    onDelete?: (ctx: ShortcutContext<TypeSchema>) => void;
+  };
+}
+
+export interface TypeEditorColumnViewConfig {
+  type: TypeEditorColumnType;
+  visible: boolean;
+}
+
+export interface DisableTypeInfo {
+  type: string;
+  reason: string;
+}
+
+export enum TypeEditorColumnType {
+  Key = 'key',
+  Type = 'type',
+  Required = 'required',
+  Description = 'description',
+  Default = 'default',
+  Operate = 'operate',
+  Value = 'value',
+  Private = 'private',
+}
+
+export interface TypeEditorExtraInfo {
+  value?: unknown;
+}
+
+export type TypeEditorSchema<TypeSchema extends Partial<IJsonSchema>> = TypeSchema & {
+  extra?: TypeEditorExtraInfo;
+};
+
+export interface TypeEditorSpecialConfig<TypeSchema extends Partial<IJsonSchema>> {
+  defaultMode?: 'default' | 'server';
+  customValidateName?: (name: string) => string;
+  disableFixIndex?: boolean;
+  editorVisible?: boolean | string;
+  hiddenDrag?: boolean;
+  useExtra?: boolean;
+  customDisabledTypes?: Array<DisableTypeInfo>;
+  disabledAdd?: (rowData: TypeEditorRowData<TypeSchema>) => string;
+  customDefaultView?: (ctx: {
+    rowData: TypeEditorRowData<TypeSchema>;
+    value: unknown;
+    disabled?: string;
+    onChange: (value: unknown) => void;
+    onSubmit: (value: unknown) => void;
+  }) => VNode;
+  customDefaultEditable?: (rowData: TypeEditorRowData<TypeSchema>) => true | string;
+}
+
+export type TypeEditorRowData<TypeSchema extends Partial<IJsonSchema>> = TypeSchema & {
+  id: string;
+  key: string;
+  isRequired: boolean;
+  level: number;
+  self: TypeEditorSchema<TypeSchema>;
+  parent?: TypeEditorSchema<TypeSchema>;
+  childrenCount: number;
+  deepChildrenCount: number;
+  disableEditColumn?: Array<{ column: TypeEditorColumnType; reason: string }>;
+  cannotDrag?: boolean;
+  index: number;
+  extraConfig: TypeEditorSpecialConfig<TypeSchema>;
+  parentId?: string;
+  path: string[];
+};

package/src/utils/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './monitor-data';

package/src/utils/monitor-data/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { MonitorData } from './monitor-data';
+export { useMonitorData } from './use-monitor-data';

package/src/utils/monitor-data/monitor-data.ts

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { Emitter, type Event } from '@flowgram-vue/utils';
+
+/**
+ * 定义用于在 service 的一些需要被监听 onChange 的 data
+ * 搭配 useMonitorData 使用
+ */
+export class MonitorData<Type> {
+  private _data: Type;
+
+  protected readonly onDataChangeEmitter = new Emitter<{
+    prev: Type;
+    next: Type;
+  }>();
+
+  readonly onDataChange: Event<{
+    prev: Type;
+    next: Type;
+  }> = this.onDataChangeEmitter.event;
+
+  public get data(): Type {
+    return this._data;
+  }
+
+  public constructor(initialValue?: Type) {
+    if (initialValue !== undefined) {
+      this._data = initialValue;
+    }
+  }
+
+  public update(data: Type) {
+    const prev = this._data;
+    this._data = data;
+    this.onDataChangeEmitter.fire({
+      prev,
+      next: data,
+    });
+  }
+}

package/src/utils/monitor-data/use-monitor-data.ts

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { onBeforeUnmount, ref } from 'vue';
+
+import { type MonitorData } from './monitor-data';
+
+export const useMonitorData = <Type>(
+  monitorData: MonitorData<Type> | undefined
+): { data: Type | undefined } => {
+  const data = ref(monitorData?.data) as { value: Type | undefined };
+
+  if (monitorData) {
+    const dispose = monitorData.onDataChange(({ next }) => {
+      data.value = next;
+    });
+    onBeforeUnmount(() => {
+      dispose.dispose();
+    });
+  }
+
+  return {
+    get data() {
+      return data.value;
+    },
+  };
+};