@flowgram-vue/form-materials 0.2.0

package/src/index.ts

@@ -0,0 +1,125 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export {
+  AssignRow,
+  AssignRows,
+  BaseCodeEditor,
+  BatchOutputs,
+  BatchVariableSelector,
+  BlurInput,
+  CodeEditor,
+  CodeEditorMini,
+  ConditionPresetOp,
+  ConditionProvider,
+  ConditionRow,
+  ConstantInput,
+  DBConditionRow,
+  DisplayFlowValue,
+  DisplayInputsValueAllInTag,
+  DisplayInputsValues,
+  DisplayOutputs,
+  DisplaySchemaTag,
+  DisplaySchemaTree,
+  DynamicValueInput,
+  EditorInputsTree,
+  EditorVariableTagInject,
+  EditorVariableTree,
+  InjectDynamicValueInput,
+  InjectTypeSelector,
+  InjectVariableSelector,
+  InputsValues,
+  InputsValuesTree,
+  JsonCodeEditor,
+  JsonEditorWithVariables,
+  JsonSchemaCreator,
+  JsonSchemaEditor,
+  PromptEditor,
+  PromptEditorWithInputs,
+  PromptEditorWithVariables,
+  PythonCodeEditor,
+  SQLCodeEditor,
+  SQLEditorWithVariables,
+  ShellCodeEditor,
+  TypeScriptCodeEditor,
+  TypeSelector,
+  VariableSelector,
+  VariableSelectorProvider,
+  getTypeSelectValue,
+  parseTypeSelectValue,
+  type AssignValueType,
+  type CodeEditorPropsType,
+  type ConditionOpConfig,
+  type ConditionOpConfigs,
+  type ConditionRowValueType,
+  type ConstantInputStrategy,
+  type DBConditionOptionType,
+  type DBConditionRowValueType,
+  type IConditionRule,
+  type IConditionRuleFactory,
+  type JsonEditorWithVariablesProps,
+  type JsonSchemaCreatorProps,
+  type PromptEditorPropsType,
+  type PromptEditorWithInputsProps,
+  type PromptEditorWithVariablesProps,
+  type SQLEditorWithVariablesProps,
+  type TypeSelectorProps,
+  type VariableSelectorProps,
+  useCondition,
+  useConditionContext,
+  useVariableTree,
+} from './components';
+export {
+  autoRenameRefEffect,
+  listenRefSchemaChange,
+  listenRefValueChange,
+  provideBatchInputEffect,
+  provideJsonSchemaOutputs,
+  syncVariableTitle,
+  validateWhenVariableSync,
+} from './effects';
+export {
+  createBatchOutputsFormPlugin,
+  createInferAssignPlugin,
+  createInferInputsPlugin,
+  provideBatchOutputsEffect,
+} from './form-plugins';
+export { useObjectList } from './hooks';
+export {
+  JsonSchemaTypePresetProvider,
+  JsonSchemaUtils,
+  createDisableDeclarationPlugin,
+  createTypePresetPlugin,
+  type ConstantRendererProps,
+  type IJsonSchema,
+  type JsonSchemaBasicType,
+  type JsonSchemaTypeRegistry,
+  useTypeManager,
+} from './plugins';
+export {
+  FlowValueUtils,
+  createInjectMaterial,
+  formatLegacyRefOnInit,
+  formatLegacyRefOnSubmit,
+  formatLegacyRefToNewRef,
+  formatNewRefToLegacyRef,
+  isLegacyFlowRefValueSchema,
+  isNewFlowRefValueSchema,
+  lazySuspense,
+  polyfillCreateRoot,
+  type FlowValueType,
+  type IFlowConstantRefValue,
+  type IFlowConstantValue,
+  type IFlowExpressionValue,
+  type IFlowRefValue,
+  type IFlowTemplateValue,
+  type IFlowValue,
+  type IFlowValueExtra,
+  type IInputsValues,
+  type IPolyfillRoot,
+  unstableSetCreateRoot,
+  withSuspense,
+} from './shared';
+export { validateFlowValue } from './validate';

package/src/plugins/disable-declaration-plugin/create-disable-declaration-plugin.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { ASTMatch, type GlobalEventActionType, VariableEngine } from '@flowgram-vue/variable-core';
+import { definePluginCreator } from '@flowgram-vue/core';
+
+export const createDisableDeclarationPlugin = definePluginCreator<void>({
+  onInit(ctx) {
+    const variableEngine = ctx.get(VariableEngine);
+
+    const handleEvent = (action: GlobalEventActionType) => {
+      if (ASTMatch.isVariableDeclaration(action.ast)) {
+        if (!action.ast.meta?.disabled) {
+          action.ast.updateMeta({
+            ...(action.ast.meta || {}),
+            disabled: true,
+          });
+        }
+      }
+    };
+
+    variableEngine.onGlobalEvent('NewAST', handleEvent);
+    variableEngine.onGlobalEvent('UpdateAST', handleEvent);
+  },
+});

package/src/plugins/disable-declaration-plugin/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { createDisableDeclarationPlugin } from './create-disable-declaration-plugin';

package/src/plugins/index.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { createDisableDeclarationPlugin } from './disable-declaration-plugin';
+export {
+  JsonSchemaTypePresetProvider,
+  JsonSchemaUtils,
+  createTypePresetPlugin,
+  type ConstantRendererProps,
+  type IJsonSchema,
+  type JsonSchemaBasicType,
+  type JsonSchemaTypeRegistry,
+  useTypeManager,
+} from './json-schema-preset';

package/src/plugins/json-schema-preset/create-type-preset-plugin.ts

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import {
+  BaseTypeManager,
+  jsonSchemaContainerModule,
+  JsonSchemaTypeManager,
+} from '@flowgram-vue/json-schema';
+import { definePluginCreator, type PluginCreator } from '@flowgram-vue/core';
+
+import { JsonSchemaTypeRegistry } from './types';
+import { initRegistries, jsonSchemaTypePreset } from './type-definition';
+
+initRegistries();
+
+type TypePresetRegistry = Partial<JsonSchemaTypeRegistry> & Pick<JsonSchemaTypeRegistry, 'type'>;
+
+interface TypePresetPluginOptions {
+  types?: TypePresetRegistry[];
+  unregisterTypes?: string[];
+}
+
+export const createTypePresetPlugin: PluginCreator<TypePresetPluginOptions> =
+  definePluginCreator<TypePresetPluginOptions>({
+    onInit(ctx, opts) {
+      const typeManager = ctx.get(BaseTypeManager) as unknown as JsonSchemaTypeManager;
+      jsonSchemaTypePreset.forEach((_type) => typeManager.register(_type));
+
+      opts.types?.forEach((_type) => typeManager.register(_type));
+      opts.unregisterTypes?.forEach((_type) => typeManager.unregister(_type));
+    },
+    containerModules: [jsonSchemaContainerModule],
+  });

package/src/plugins/json-schema-preset/index.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import {
+  type JsonSchemaBasicType,
+  JsonSchemaUtils,
+  type IJsonSchema,
+} from '@flowgram-vue/json-schema';
+
+import { type ConstantRendererProps, type JsonSchemaTypeRegistry } from './types';
+import { useTypeManager, JsonSchemaTypePresetProvider } from './vue';
+import { createTypePresetPlugin } from './create-type-preset-plugin';
+
+export {
+  createTypePresetPlugin,
+  useTypeManager,
+  JsonSchemaTypePresetProvider,
+  JsonSchemaUtils,
+  type IJsonSchema,
+  type JsonSchemaTypeRegistry,
+  type ConstantRendererProps,
+  type JsonSchemaBasicType,
+};

package/src/plugins/json-schema-preset/type-definition/array.ts

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { defineComponent, h } from 'vue';
+import { I18n } from '@flowgram-vue/i18n';
+
+import { JsonCodeEditor } from '@/components/code-editor';
+import { ConditionPresetOp } from '@/components/condition-context/op';
+
+import { type JsonSchemaTypeRegistry } from '../types';
+
+export const arrayRegistry: Partial<JsonSchemaTypeRegistry> = {
+  type: 'array',
+  ConstantRenderer: defineComponent({
+    name: 'ArrayConstantRenderer',
+    props: ['value', 'onChange', 'readonly'],
+    setup(props) {
+      return () =>
+        h(JsonCodeEditor, {
+          mini: true,
+          value: props.value,
+          readonly: props.readonly,
+          placeholder: I18n.t('Please Input Array'),
+          onChange: (v: string) => props.onChange?.(v),
+        });
+    },
+  }),
+  conditionRule: {
+    [ConditionPresetOp.IS_EMPTY]: null,
+    [ConditionPresetOp.IS_NOT_EMPTY]: null,
+    [ConditionPresetOp.CONTAINS]: { type: 'array', extra: { weak: true } },
+    [ConditionPresetOp.NOT_CONTAINS]: { type: 'array', extra: { weak: true } },
+    [ConditionPresetOp.EQ]: { type: 'array', extra: { weak: true } },
+    [ConditionPresetOp.NEQ]: { type: 'array', extra: { weak: true } },
+  },
+};

package/src/plugins/json-schema-preset/type-definition/boolean.ts

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { defineComponent, h } from 'vue';
+import { I18n } from '@flowgram-vue/i18n';
+
+import { FgSelect } from '@/ui';
+import { ConditionPresetOp } from '@/components/condition-context/op';
+
+import { type JsonSchemaTypeRegistry } from '../types';
+
+export const booleanRegistry: Partial<JsonSchemaTypeRegistry> = {
+  type: 'boolean',
+  ConstantRenderer: defineComponent({
+    name: 'BooleanConstantRenderer',
+    props: ['value', 'onChange', 'readonly', 'schema'],
+    setup(props) {
+      return () =>
+        h(FgSelect, {
+          value: props.value ? 1 : 0,
+          disabled: props.readonly,
+          placeholder: I18n.t('Please Select Boolean'),
+          options: [
+            { label: I18n.t('True'), value: 1 },
+            { label: I18n.t('False'), value: 0 },
+          ],
+          onChange: (v: string | number) => props.onChange?.(!!v),
+        });
+    },
+  }),
+  conditionRule: {
+    [ConditionPresetOp.EQ]: { type: 'boolean' },
+    [ConditionPresetOp.NEQ]: { type: 'boolean' },
+    [ConditionPresetOp.IS_TRUE]: null,
+    [ConditionPresetOp.IS_FALSE]: null,
+    [ConditionPresetOp.IN]: {
+      type: 'array',
+      items: { type: 'boolean' },
+    },
+    [ConditionPresetOp.NIN]: {
+      type: 'array',
+      items: { type: 'boolean' },
+    },
+  },
+};

package/src/plugins/json-schema-preset/type-definition/date-time.ts

@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { defineComponent, h } from 'vue';
+import { format } from 'date-fns';
+
+import { FgInput } from '@/ui';
+import { ConditionPresetOp } from '@/components/condition-context/op';
+
+import { type JsonSchemaTypeRegistry } from '../types';
+
+const DATE_TIME_FORMAT = "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'";
+
+const stringifyDateTime = (value: unknown) => {
+  if (value === null || value === undefined || value === '') {
+    return '';
+  }
+
+  const date =
+    value instanceof Date
+      ? value
+      : typeof value === 'number'
+        ? new Date(value)
+        : new Date(String(value));
+
+  if (Number.isNaN(date.getTime())) {
+    return '';
+  }
+
+  return format(date, DATE_TIME_FORMAT);
+};
+
+export const dateTimeRegistry: Partial<JsonSchemaTypeRegistry> = {
+  type: 'date-time',
+  ConstantRenderer: defineComponent({
+    name: 'DateTimeConstantRenderer',
+    props: ['value', 'onChange', 'readonly', 'schema'],
+    setup(props) {
+      return () =>
+        h(FgInput, {
+          type: 'datetime-local',
+          value: props.value,
+          disabled: props.readonly,
+          onChange: (v: string) => props.onChange?.(stringifyDateTime(v)),
+        });
+    },
+  }),
+  conditionRule: {
+    [ConditionPresetOp.EQ]: { type: 'date-time' },
+    [ConditionPresetOp.NEQ]: { type: 'date-time' },
+    [ConditionPresetOp.GT]: { type: 'date-time' },
+    [ConditionPresetOp.GTE]: { type: 'date-time' },
+    [ConditionPresetOp.LT]: { type: 'date-time' },
+    [ConditionPresetOp.LTE]: { type: 'date-time' },
+    [ConditionPresetOp.IS_EMPTY]: null,
+    [ConditionPresetOp.IS_NOT_EMPTY]: null,
+  },
+};

package/src/plugins/json-schema-preset/type-definition/enum.ts

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { defineComponent, h } from 'vue';
+
+import { FgSelect } from '@/ui';
+
+import { type JsonSchemaTypeRegistry } from '../types';
+
+export const enumRegistry: Partial<JsonSchemaTypeRegistry> = {
+  type: 'enum',
+  parentType: [],
+  ConstantRenderer: defineComponent({
+    name: 'EnumConstantRenderer',
+    props: ['value', 'onChange', 'readonly', 'schema'],
+    setup(props) {
+      return () =>
+        h(FgSelect, {
+          value: props.value,
+          disabled: props.readonly,
+          options: (props.schema?.enum || []).map((value: string | number) => ({
+            label: `${value}`,
+            value,
+          })),
+          onChange: (v: string | number) => props.onChange?.(v),
+        });
+    },
+  }),
+};

package/src/plugins/json-schema-preset/type-definition/index.ts

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { jsonSchemaTypeManager } from '@flowgram-vue/json-schema';
+
+import { stringRegistry } from './string';
+import { objectRegistry } from './object';
+import { numberRegistry } from './number';
+import { mapRegistry } from './map';
+import { integerRegistry } from './integer';
+import { enumRegistry } from './enum';
+import { dateTimeRegistry } from './date-time';
+import { booleanRegistry } from './boolean';
+import { arrayRegistry } from './array';
+import { type JsonSchemaTypeRegistry } from '../types';
+
+export const jsonSchemaTypePreset = [
+  stringRegistry,
+  objectRegistry,
+  numberRegistry,
+  integerRegistry,
+  booleanRegistry,
+  arrayRegistry,
+  mapRegistry,
+  enumRegistry,
+  dateTimeRegistry,
+];
+
+export const initRegistries = () => {
+  if ((jsonSchemaTypeManager.getTypeByName('string') as JsonSchemaTypeRegistry)?.ConstantRenderer) {
+    return;
+  }
+
+  jsonSchemaTypePreset.forEach((_type) => jsonSchemaTypeManager.register(_type));
+};

package/src/plugins/json-schema-preset/type-definition/integer.ts

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { defineComponent, h } from 'vue';
+import { I18n } from '@flowgram-vue/i18n';
+
+import { FgInput } from '@/ui';
+import { ConditionPresetOp } from '@/components/condition-context/op';
+
+import { type JsonSchemaTypeRegistry } from '../types';
+
+export const integerRegistry: Partial<JsonSchemaTypeRegistry> = {
+  type: 'integer',
+  ConstantRenderer: defineComponent({
+    name: 'IntegerConstantRenderer',
+    props: ['value', 'onChange', 'readonly', 'schema', 'placeholder'],
+    setup(props) {
+      return () =>
+        h(FgInput, {
+          type: 'number',
+          value: props.value,
+          disabled: props.readonly,
+          placeholder: props.placeholder || I18n.t('Please Input Integer'),
+          onChange: (v: string) =>
+            props.onChange?.(v === '' ? undefined : Math.trunc(Number(v))),
+        });
+    },
+  }),
+  conditionRule: {
+    [ConditionPresetOp.EQ]: { type: 'number' },
+    [ConditionPresetOp.NEQ]: { type: 'number' },
+    [ConditionPresetOp.GT]: { type: 'number' },
+    [ConditionPresetOp.GTE]: { type: 'number' },
+    [ConditionPresetOp.LT]: { type: 'number' },
+    [ConditionPresetOp.LTE]: { type: 'number' },
+    [ConditionPresetOp.IN]: {
+      type: 'array',
+      extra: { weak: true },
+    },
+    [ConditionPresetOp.NIN]: {
+      type: 'array',
+      extra: { weak: true },
+    },
+  },
+};

package/src/plugins/json-schema-preset/type-definition/map.ts

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { defineComponent, h } from 'vue';
+import { I18n } from '@flowgram-vue/i18n';
+
+import { JsonCodeEditor } from '@/components/code-editor';
+import { ConditionPresetOp } from '@/components/condition-context/op';
+
+import { type JsonSchemaTypeRegistry } from '../types';
+
+export const mapRegistry: Partial<JsonSchemaTypeRegistry> = {
+  type: 'map',
+  ConstantRenderer: defineComponent({
+    name: 'MapConstantRenderer',
+    props: ['value', 'onChange', 'readonly'],
+    setup(props) {
+      return () =>
+        h(JsonCodeEditor, {
+          mini: true,
+          value: props.value,
+          readonly: props.readonly,
+          placeholder: I18n.t('Please Input Map'),
+          onChange: (v: string) => props.onChange?.(v),
+        });
+    },
+  }),
+  conditionRule: {
+    [ConditionPresetOp.IS_EMPTY]: null,
+    [ConditionPresetOp.IS_NOT_EMPTY]: null,
+  },
+};

package/src/plugins/json-schema-preset/type-definition/number.ts

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { defineComponent, h } from 'vue';
+import { I18n } from '@flowgram-vue/i18n';
+
+import { FgInput } from '@/ui';
+import { ConditionPresetOp } from '@/components/condition-context/op';
+
+import { type JsonSchemaTypeRegistry } from '../types';
+
+export const numberRegistry: Partial<JsonSchemaTypeRegistry> = {
+  type: 'number',
+  ConstantRenderer: defineComponent({
+    name: 'NumberConstantRenderer',
+    props: ['value', 'onChange', 'readonly', 'schema', 'placeholder'],
+    setup(props) {
+      return () =>
+        h(FgInput, {
+          type: 'number',
+          value: props.value,
+          disabled: props.readonly,
+          placeholder: props.placeholder || I18n.t('Please Input Number'),
+          onChange: (v: string) => props.onChange?.(v === '' ? undefined : Number(v)),
+        });
+    },
+  }),
+  conditionRule: {
+    [ConditionPresetOp.EQ]: { type: 'number' },
+    [ConditionPresetOp.NEQ]: { type: 'number' },
+    [ConditionPresetOp.GT]: { type: 'number' },
+    [ConditionPresetOp.GTE]: { type: 'number' },
+    [ConditionPresetOp.LT]: { type: 'number' },
+    [ConditionPresetOp.LTE]: { type: 'number' },
+    [ConditionPresetOp.IN]: {
+      type: 'array',
+      extra: { weak: true },
+    },
+    [ConditionPresetOp.NIN]: {
+      type: 'array',
+      extra: { weak: true },
+    },
+  },
+};

package/src/plugins/json-schema-preset/type-definition/object.ts

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { defineComponent, h } from 'vue';
+import { I18n } from '@flowgram-vue/i18n';
+
+import { JsonCodeEditor } from '@/components/code-editor';
+import { ConditionPresetOp } from '@/components/condition-context/op';
+
+import { type JsonSchemaTypeRegistry } from '../types';
+
+export const objectRegistry: Partial<JsonSchemaTypeRegistry> = {
+  type: 'object',
+  ConstantRenderer: defineComponent({
+    name: 'ObjectConstantRenderer',
+    props: ['value', 'onChange', 'readonly'],
+    setup(props) {
+      return () =>
+        h(JsonCodeEditor, {
+          mini: true,
+          value: props.value,
+          readonly: props.readonly,
+          placeholder: I18n.t('Please Input Object'),
+          onChange: (v: string) => props.onChange?.(v),
+        });
+    },
+  }),
+  conditionRule: {
+    [ConditionPresetOp.IS_EMPTY]: null,
+    [ConditionPresetOp.IS_NOT_EMPTY]: null,
+  },
+};

package/src/plugins/json-schema-preset/type-definition/string.ts

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { defineComponent, h } from 'vue';
+import { I18n } from '@flowgram-vue/i18n';
+
+import { FgInput, FgTextarea } from '@/ui';
+import { ConditionPresetOp } from '@/components/condition-context/op';
+
+import { type JsonSchemaTypeRegistry } from '../types';
+
+export const stringRegistry: Partial<JsonSchemaTypeRegistry> = {
+  type: 'string',
+  ConstantRenderer: defineComponent({
+    name: 'StringConstantRenderer',
+    props: ['value', 'onChange', 'readonly', 'schema', 'enableMultiLineStr', 'placeholder'],
+    setup(props) {
+      return () =>
+        props.enableMultiLineStr
+          ? h(FgTextarea, {
+              value: props.value,
+              disabled: props.readonly,
+              placeholder: props.placeholder || I18n.t('Please Input String'),
+              onChange: (v: string) => props.onChange?.(v),
+            })
+          : h(FgInput, {
+              value: props.value,
+              disabled: props.readonly,
+              placeholder: props.placeholder || I18n.t('Please Input String'),
+              onChange: (v: string) => props.onChange?.(v),
+            });
+    },
+  }),
+  conditionRule: {
+    [ConditionPresetOp.EQ]: { type: 'string' },
+    [ConditionPresetOp.NEQ]: { type: 'string' },
+    [ConditionPresetOp.CONTAINS]: { type: 'string' },
+    [ConditionPresetOp.NOT_CONTAINS]: { type: 'string' },
+    [ConditionPresetOp.IN]: {
+      type: 'array',
+      items: { type: 'string' },
+    },
+    [ConditionPresetOp.NIN]: {
+      type: 'array',
+      items: { type: 'string' },
+    },
+    [ConditionPresetOp.IS_EMPTY]: null,
+    [ConditionPresetOp.IS_NOT_EMPTY]: null,
+  },
+};