@flowgram-vue/form-materials 0.2.0

package/src/effects/provide-batch-input/index.ts

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { ASTFactory } from '@flowgram-vue/variable-core';
+import { createEffectFromVariableProvider } from '@flowgram-vue/node-variable-plugin';
+import { type FlowNodeRegistry } from '@flowgram-vue/document';
+import { type EffectOptions } from '@flowgram-vue/node';
+
+import { IFlowRefValue } from '@/shared';
+
+export const provideBatchInputEffect: EffectOptions[] = createEffectFromVariableProvider({
+  private: true,
+  parse: (value: IFlowRefValue, ctx) => [
+    ASTFactory.createVariableDeclaration({
+      key: `${ctx.node.id}_locals`,
+      meta: {
+        title: ctx.form?.getValueIn('title'),
+        icon: ctx.node.getNodeRegistry<FlowNodeRegistry>().info?.icon,
+      },
+      type: ASTFactory.createObject({
+        properties: [
+          ASTFactory.createProperty({
+            key: 'item',
+            initializer: ASTFactory.createEnumerateExpression({
+              enumerateFor: ASTFactory.createKeyPathExpression({
+                keyPath: value.content || [],
+              }),
+            }),
+          }),
+          ASTFactory.createProperty({
+            key: 'index',
+            type: ASTFactory.createNumber(),
+          }),
+        ],
+      }),
+    }),
+  ],
+});

package/src/effects/provide-json-schema-outputs/index.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { JsonSchemaUtils, IJsonSchema } from '@flowgram-vue/json-schema';
+import { ASTFactory } from '@flowgram-vue/variable-core';
+import { createEffectFromVariableProvider } from '@flowgram-vue/node-variable-plugin';
+import { type FlowNodeRegistry } from '@flowgram-vue/document';
+import { type EffectOptions } from '@flowgram-vue/node';
+
+export const provideJsonSchemaOutputs: EffectOptions[] = createEffectFromVariableProvider({
+  parse: (value: IJsonSchema, ctx) => [
+    ASTFactory.createVariableDeclaration({
+      key: `${ctx.node.id}`,
+      meta: {
+        title: ctx.form?.getValueIn('title') || ctx.node.id,
+        icon: ctx.node.getNodeRegistry<FlowNodeRegistry>().info?.icon,
+      },
+      type: JsonSchemaUtils.schemaToAST(value),
+    }),
+  ],
+});

package/src/effects/sync-variable-title/index.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { FlowNodeVariableData } from '@flowgram-vue/variable-layout';
+import { type FlowNodeRegistry } from '@flowgram-vue/document';
+import { DataEvent, type Effect, type EffectOptions } from '@flowgram-vue/node';
+
+export const syncVariableTitle: EffectOptions[] = [
+  {
+    event: DataEvent.onValueChange,
+    effect: (({ value, context }) => {
+      context.node.getData(FlowNodeVariableData).allScopes.forEach((_scope) => {
+        _scope.output.variables.forEach((_var) => {
+          _var.updateMeta({
+            ...(_var.meta || {}),
+            title: value || context.node.id,
+            icon: context.node.getNodeRegistry<FlowNodeRegistry>().info?.icon,
+          });
+        });
+      });
+    }) as Effect,
+  },
+];

package/src/effects/validate-when-variable-sync/index.ts

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { getNodeScope, getNodePrivateScope } from '@flowgram-vue/variable-layout';
+import { DataEvent, type Effect, type EffectOptions } from '@flowgram-vue/node';
+
+export const validateWhenVariableSync = ({
+  scope,
+}: {
+  scope?: 'private' | 'public';
+} = {}): EffectOptions[] => [
+  {
+    event: DataEvent.onValueInit,
+    effect: (({ context, form, name }) => {
+      const nodeScope =
+        scope === 'private' ? getNodePrivateScope(context.node) : getNodeScope(context.node);
+
+      const disposable = nodeScope.available.onListOrAnyVarChange(() => {
+        const errorKeys = Object.entries(form.state.errors || {})
+          .filter(([_, errors]) => errors?.length > 0)
+          .filter(([key]) => key.startsWith(name) || name.startsWith(key))
+          .map(([key]) => key);
+
+        if (errorKeys.length > 0) {
+          form.validate();
+        }
+      });
+
+      return () => disposable.dispose();
+    }) as Effect,
+  },
+];

package/src/env.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<object, object, unknown>;
+  export default component;
+}
+
+declare module '*.css';

package/src/form-plugins/batch-outputs-plugin/index.ts

@@ -0,0 +1,120 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { set } from 'lodash-es';
+import { JsonSchemaUtils } from '@flowgram-vue/json-schema';
+import { ASTFactory } from '@flowgram-vue/variable-core';
+import {
+  getNodePrivateScope,
+  getNodeScope,
+  ScopeChainTransformService,
+  FlowNodeScopeType,
+} from '@flowgram-vue/variable-layout';
+import { createEffectFromVariableProvider } from '@flowgram-vue/node-variable-plugin';
+import { defineFormPluginCreator, type EffectOptions, type FormPluginCreator } from '@flowgram-vue/node';
+import { type FlowNodeRegistry } from '@flowgram-vue/document';
+
+import { IFlowRefValue } from '@/shared';
+
+export const provideBatchOutputsEffect: EffectOptions[] = createEffectFromVariableProvider({
+  parse: (value: Record<string, IFlowRefValue>, ctx) => [
+    ASTFactory.createVariableDeclaration({
+      key: `${ctx.node.id}`,
+      meta: {
+        title: ctx.form?.getValueIn('title'),
+        icon: ctx.node.getNodeRegistry<FlowNodeRegistry>().info?.icon,
+      },
+      type: ASTFactory.createObject({
+        properties: Object.entries(value).map(([_key, value]) =>
+          ASTFactory.createProperty({
+            key: _key,
+            initializer: ASTFactory.createWrapArrayExpression({
+              wrapFor: ASTFactory.createKeyPathExpression({
+                keyPath: value?.content || [],
+              }),
+            }),
+          })
+        ),
+      }),
+    }),
+  ],
+});
+
+/**
+ * Free Layout only right now
+ */
+export const createBatchOutputsFormPlugin: FormPluginCreator<{
+  outputKey: string;
+  /**
+   * if set, infer json schema to inferTargetKey when submit
+   */
+  inferTargetKey?: string;
+}> = defineFormPluginCreator({
+  name: 'batch-outputs-plugin',
+  onSetupFormMeta({ mergeEffect, addFormatOnSubmit }, { outputKey, inferTargetKey }) {
+    mergeEffect({
+      [outputKey]: provideBatchOutputsEffect,
+    });
+
+    if (inferTargetKey) {
+      addFormatOnSubmit((formData, ctx) => {
+        const outputVariable = getNodeScope(ctx.node).output.variables?.[0];
+
+        if (outputVariable?.type) {
+          set(formData, inferTargetKey, JsonSchemaUtils.astToSchema(outputVariable?.type));
+        }
+
+        return formData;
+      });
+    }
+  },
+  onInit(ctx, { outputKey }) {
+    const chainTransformService = ctx.node.getService(ScopeChainTransformService);
+
+    const batchNodeType = ctx.node.flowNodeType;
+
+    const transformerId = `${batchNodeType}-outputs`;
+
+    if (chainTransformService.hasTransformer(transformerId)) {
+      return;
+    }
+
+    chainTransformService.registerTransformer(transformerId, {
+      transformCovers: (covers, ctx) => {
+        const node = ctx.scope.meta?.node;
+
+        // Child Node's variable can cover parent
+        if (node?.parent?.flowNodeType === batchNodeType) {
+          return [...covers, getNodeScope(node.parent)];
+        }
+
+        return covers;
+      },
+      transformDeps(scopes, ctx) {
+        const scopeMeta = ctx.scope.meta;
+
+        if (scopeMeta?.type === FlowNodeScopeType.private) {
+          return scopes;
+        }
+
+        const node = scopeMeta?.node;
+
+        // Public of Loop Node depends on child Node
+        if (node?.flowNodeType === batchNodeType) {
+          // Get all child blocks
+          const childBlocks = node.blocks;
+
+          // public scope of all child blocks
+          return [
+            getNodePrivateScope(node),
+            ...childBlocks.map((_childBlock) => getNodeScope(_childBlock)),
+          ];
+        }
+
+        return scopes;
+      },
+    });
+  },
+});

package/src/form-plugins/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { createBatchOutputsFormPlugin, provideBatchOutputsEffect } from './batch-outputs-plugin';
+export { createInferAssignPlugin } from './infer-assign-plugin';
+export { createInferInputsPlugin } from './infer-inputs-plugin';

package/src/form-plugins/infer-assign-plugin/index.ts

@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { set, uniqBy } from 'lodash-es';
+import { JsonSchemaUtils } from '@flowgram-vue/json-schema';
+import { ASTFactory } from '@flowgram-vue/variable-core';
+import { getNodeScope } from '@flowgram-vue/variable-layout';
+import { createEffectFromVariableProvider } from '@flowgram-vue/node-variable-plugin';
+import { defineFormPluginCreator } from '@flowgram-vue/node';
+import { type FlowNodeRegistry } from '@flowgram-vue/document';
+
+import { IFlowRefValue, IFlowValue } from '@/shared';
+
+type AssignValueType =
+  | {
+      operator: 'assign';
+      left?: IFlowRefValue;
+      right?: IFlowValue;
+    }
+  | {
+      operator: 'declare';
+      left?: string;
+      right?: IFlowValue;
+    };
+
+interface InputConfig {
+  assignKey: string;
+  outputKey: string;
+}
+
+export const createInferAssignPlugin = defineFormPluginCreator<InputConfig>({
+  onSetupFormMeta({ addFormatOnSubmit, mergeEffect }, { assignKey, outputKey }) {
+    if (!assignKey || !outputKey) {
+      return;
+    }
+
+    mergeEffect({
+      [assignKey]: createEffectFromVariableProvider({
+        parse: (value: AssignValueType[], ctx) => {
+          const declareRows = uniqBy(
+            value.filter((_v) => _v.operator === 'declare' && _v.left && _v.right),
+            'left'
+          );
+
+          return [
+            ASTFactory.createVariableDeclaration({
+              key: `${ctx.node.id}`,
+              meta: {
+                title: ctx.form?.getValueIn('title'),
+                icon: ctx.node.getNodeRegistry<FlowNodeRegistry>().info?.icon,
+              },
+              type: ASTFactory.createObject({
+                properties: declareRows.map((_v) =>
+                  ASTFactory.createProperty({
+                    key: _v.left as string,
+                    type:
+                      _v.right?.type === 'constant'
+                        ? JsonSchemaUtils.schemaToAST(_v.right?.schema || {})
+                        : undefined,
+                    initializer:
+                      _v.right?.type === 'ref'
+                        ? ASTFactory.createKeyPathExpression({
+                            keyPath: _v.right?.content || [],
+                          })
+                        : {},
+                  })
+                ),
+              }),
+            }),
+          ];
+        },
+      }),
+    });
+
+    addFormatOnSubmit((formData, ctx) => {
+      set(
+        formData,
+        outputKey,
+        JsonSchemaUtils.astToSchema(getNodeScope(ctx.node).output.variables?.[0]?.type)
+      );
+
+      return formData;
+    });
+  },
+});

package/src/form-plugins/infer-inputs-plugin/index.ts

@@ -0,0 +1,85 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { get, omit, set } from 'lodash-es';
+import { Immer } from 'immer';
+import { getNodePrivateScope, getNodeScope } from '@flowgram-vue/variable-layout';
+import { defineFormPluginCreator } from '@flowgram-vue/node';
+
+import { FlowValueUtils } from '@/shared';
+
+const { produce } = new Immer({ autoFreeze: false });
+
+interface InputConfig {
+  sourceKey: string;
+  targetKey: string;
+  scope?: 'private' | 'public';
+  /**
+   * For backend runtime, constant schema is redundant, so we can choose to ignore it
+   */
+  ignoreConstantSchema?: boolean;
+}
+
+export const createInferInputsPlugin = defineFormPluginCreator<InputConfig>({
+  onSetupFormMeta(
+    { addFormatOnSubmit, addFormatOnInit },
+    { sourceKey, targetKey, scope, ignoreConstantSchema }
+  ) {
+    if (!sourceKey || !targetKey) {
+      return;
+    }
+
+    addFormatOnSubmit((formData, ctx) =>
+      produce(formData, (draft: any) => {
+        const sourceData = get(formData, sourceKey);
+
+        set(
+          draft,
+          targetKey,
+          FlowValueUtils.inferJsonSchema(
+            sourceData,
+            scope === 'private' ? getNodePrivateScope(ctx.node) : getNodeScope(ctx.node)
+          )
+        );
+
+        if (ignoreConstantSchema) {
+          for (const { value, path } of FlowValueUtils.traverse(sourceData, {
+            includeTypes: ['constant'],
+          })) {
+            if (FlowValueUtils.isConstant(value) && value?.schema) {
+              set(formData, `${sourceKey}.${path}`, omit(value, ['schema']));
+            }
+          }
+        }
+      })
+    );
+
+    if (ignoreConstantSchema) {
+      // Revert Schema in frontend
+      addFormatOnInit((formData, ctx) => {
+        const targetSchema = get(formData, targetKey);
+
+        if (!targetSchema) {
+          return formData;
+        }
+
+        // For backend data, it's not necessary to use immer
+        for (const { value, pathArr } of FlowValueUtils.traverse(get(formData, sourceKey), {
+          includeTypes: ['constant'],
+        })) {
+          if (FlowValueUtils.isConstant(value) && !value?.schema) {
+            const schemaPath = pathArr.map((_item) => `properties.${_item}`).join('.');
+            const schema = get(targetSchema, schemaPath);
+            if (schema) {
+              set(value, 'schema', schema);
+            }
+          }
+        }
+
+        return formData;
+      });
+    }
+  },
+});

package/src/hooks/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { useObjectList } from './use-object-list';

package/src/hooks/use-object-list/index.ts

@@ -0,0 +1,161 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { ref, watch, type Ref } from 'vue';
+
+import { nanoid } from 'nanoid';
+import { difference, get, isObject, set } from 'lodash-es';
+
+function genId() {
+  return nanoid();
+}
+
+interface ListItem<ValueType> {
+  id: string;
+  key?: string;
+  value?: ValueType;
+}
+
+type ObjectType<ValueType> = Record<string, ValueType | undefined>;
+
+export function useObjectList<ValueType>({
+  value,
+  onChange,
+  sortIndexKey,
+}: {
+  value?: ObjectType<ValueType>;
+  onChange: (value?: ObjectType<ValueType>) => void;
+  sortIndexKey?: string | ((item: ValueType | undefined) => string);
+}): {
+  list: Ref<ListItem<ValueType>[]>;
+  add: (defaultValue?: ValueType) => void;
+  updateKey: (itemId: string, key: string) => void;
+  updateValue: (itemId: string, value: ValueType) => void;
+  remove: (itemId: string) => void;
+} {
+  const list = ref<ListItem<ValueType>[]>([]) as Ref<ListItem<ValueType>[]>;
+  const effectVersion = ref(0);
+  const changeVersion = ref(0);
+
+  const getSortIndex = (item?: ValueType) => {
+    if (typeof sortIndexKey === 'function') {
+      return get(item, sortIndexKey(item)) || 0;
+    }
+    return get(item, sortIndexKey || '') || 0;
+  };
+
+  watch(
+    () => value,
+    () => {
+      effectVersion.value = effectVersion.value + 1;
+      if (effectVersion.value === changeVersion.value) {
+        return;
+      }
+      effectVersion.value = changeVersion.value;
+
+      const newKeys = Object.entries(value || {})
+        .sort((a, b) => getSortIndex(a[1]) - getSortIndex(b[1]))
+        .map(([key]) => key);
+
+      const oldKeys = list.value.map((item) => item.key).filter(Boolean) as string[];
+      const addKeys = difference(newKeys, oldKeys);
+
+      list.value = list.value
+        .filter((item) => !item.key || newKeys.includes(item.key))
+        .map((item) => ({
+          id: item.id,
+          key: item.key,
+          value: item.key ? value?.[item.key!] : item.value,
+        }))
+        .concat(
+          addKeys.map((_key) => ({
+            id: genId(),
+            key: _key,
+            value: value?.[_key],
+          }))
+        );
+    },
+    { immediate: true, deep: true }
+  );
+
+  const add = (defaultValue?: ValueType) => {
+    list.value = [
+      ...list.value,
+      {
+        id: genId(),
+        value: defaultValue,
+      },
+    ];
+  };
+
+  const updateValue = (itemId: string, nextValue: ValueType) => {
+    changeVersion.value = changeVersion.value + 1;
+
+    const nextList = list.value.map((_item) => {
+      if (_item.id === itemId) {
+        return {
+          ..._item,
+          value: nextValue,
+        };
+      }
+      return _item;
+    });
+
+    onChange(
+      Object.fromEntries(
+        nextList
+          .filter((item) => item.key)
+          .map((item) => [item.key!, item.value])
+          .map((_res, idx) => {
+            const indexKey =
+              typeof sortIndexKey === 'function'
+                ? sortIndexKey(_res[1] as ValueType | undefined)
+                : sortIndexKey;
+
+            if (isObject(_res[1]) && indexKey) {
+              set(_res[1], indexKey, idx);
+            }
+            return _res;
+          })
+      )
+    );
+
+    list.value = nextList;
+  };
+
+  const updateKey = (itemId: string, key: string) => {
+    changeVersion.value = changeVersion.value + 1;
+
+    const nextList = list.value.map((_item) => {
+      if (_item.id === itemId) {
+        return {
+          ..._item,
+          key,
+        };
+      }
+      return _item;
+    });
+
+    onChange(
+      Object.fromEntries(nextList.filter((item) => item.key).map((item) => [item.key!, item.value]))
+    );
+
+    list.value = nextList;
+  };
+
+  const remove = (itemId: string) => {
+    changeVersion.value = changeVersion.value + 1;
+
+    const nextList = list.value.filter((_item) => _item.id !== itemId);
+
+    onChange(
+      Object.fromEntries(nextList.filter((item) => item.key).map((item) => [item.key!, item.value]))
+    );
+
+    list.value = nextList;
+  };
+
+  return { list, add, updateKey, updateValue, remove };
+}