@flowgram.ai/form-materials 0.3.1 → 0.3.2

package/dist/index.js

@@ -30,6 +30,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  AssignRow: () => AssignRow,
+  AssignRows: () => AssignRows,
   BatchOutputs: () => BatchOutputs,
   BatchVariableSelector: () => BatchVariableSelector,
   CodeEditor: () => CodeEditor,
@@ -55,6 +57,7 @@ __export(src_exports, {
   autoRenameRefEffect: () => autoRenameRefEffect,
   createBatchOutputsFormPlugin: () => createBatchOutputsFormPlugin,
   createDisableDeclarationPlugin: () => createDisableDeclarationPlugin,
+  createInferAssignPlugin: () => createInferAssignPlugin,
   createInferInputsPlugin: () => createInferInputsPlugin,
   createTypePresetPlugin: () => createTypePresetPlugin,
   formatLegacyRefOnInit: () => formatLegacyRefOnInit,
@@ -70,7 +73,9 @@ __export(src_exports, {
   provideJsonSchemaOutputs: () => provideJsonSchemaOutputs,
   syncVariableTitle: () => syncVariableTitle,
   useTypeManager: () => useTypeManager,
-  useVariableTree: () => useVariableTree
+  useVariableTree: () => useVariableTree,
+  validateFlowValue: () => validateFlowValue,
+  validateWhenVariableSync: () => validateWhenVariableSync
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -800,7 +805,7 @@ var VariableSelector = ({
       showClear: false,
       arrowIcon: /* @__PURE__ */ import_react12.default.createElement(import_semi_icons.IconChevronDownStroked, { size: "small" }),
       triggerRender,
-      placeholder: config?.placeholder ?? "Select Variable..."
+      placeholder: config?.placeholder ?? "Select Variable"
     }
   ));
 };
@@ -3146,7 +3151,16 @@ function DisplayOutputs({ value, showIconInTree, displayFromScope }) {
     return acm;
   }, {}) : value?.properties || {};
   const childEntries = Object.entries(properties || {});
-  return /* @__PURE__ */ import_react54.default.createElement(DisplayOutputsWrapper, null, childEntries.map(([key, schema]) => /* @__PURE__ */ import_react54.default.createElement(DisplaySchemaTag, { key, title: key, value: schema, showIconInTree })));
+  return /* @__PURE__ */ import_react54.default.createElement(DisplayOutputsWrapper, null, childEntries.map(([key, schema]) => /* @__PURE__ */ import_react54.default.createElement(
+    DisplaySchemaTag,
+    {
+      key,
+      title: key,
+      value: schema,
+      showIconInTree,
+      warning: !schema
+    }
+  )));
 }
 
 // src/components/display-flow-value/index.tsx
@@ -3207,30 +3221,151 @@ function DisplayInputsValues({ value, showIconInTree }) {
   return /* @__PURE__ */ import_react56.default.createElement(DisplayInputsWrapper, null, childEntries.map(([key, value2]) => /* @__PURE__ */ import_react56.default.createElement(DisplayFlowValue, { key, title: key, value: value2, showIconInTree })));
 }
 
-// src/effects/provide-batch-input/index.ts
+// src/components/assign-rows/index.tsx
+var import_react59 = __toESM(require("react"));
 var import_editor15 = require("@flowgram.ai/editor");
-var provideBatchInputEffect = (0, import_editor15.createEffectFromVariableProvider)({
+var import_semi_ui28 = require("@douyinfe/semi-ui");
+var import_semi_icons12 = require("@douyinfe/semi-icons");
+
+// src/components/assign-row/index.tsx
+var import_react58 = __toESM(require("react"));
+var import_semi_ui27 = require("@douyinfe/semi-ui");
+var import_semi_icons11 = require("@douyinfe/semi-icons");
+
+// src/components/assign-row/components/blur-input.tsx
+var import_react57 = __toESM(require("react"));
+var import_input3 = __toESM(require("@douyinfe/semi-ui/lib/es/input"));
+function BlurInput3(props) {
+  const [value, setValue] = (0, import_react57.useState)("");
+  (0, import_react57.useEffect)(() => {
+    setValue(props.value);
+  }, [props.value]);
+  return /* @__PURE__ */ import_react57.default.createElement(
+    import_input3.default,
+    {
+      ...props,
+      value,
+      onChange: (value2) => {
+        setValue(value2);
+      },
+      onBlur: (e) => props.onChange?.(value, e)
+    }
+  );
+}
+
+// src/components/assign-row/index.tsx
+function AssignRow(props) {
+  const {
+    value = {
+      operator: "assign"
+    },
+    onChange,
+    onDelete,
+    readonly
+  } = props;
+  return /* @__PURE__ */ import_react58.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 5 } }, /* @__PURE__ */ import_react58.default.createElement("div", { style: { width: 150, minWidth: 150, maxWidth: 150 } }, value?.operator === "assign" ? /* @__PURE__ */ import_react58.default.createElement(
+    VariableSelector,
+    {
+      style: { width: "100%", height: 26 },
+      value: value?.left?.content,
+      config: { placeholder: "Select Left" },
+      onChange: (v) => onChange?.({
+        ...value,
+        left: { type: "ref", content: v }
+      })
+    }
+  ) : /* @__PURE__ */ import_react58.default.createElement(
+    BlurInput3,
+    {
+      style: { height: 26 },
+      size: "small",
+      placeholder: "Input Name",
+      value: value?.left,
+      onChange: (v) => onChange?.({
+        ...value,
+        left: v
+      })
+    }
+  )), /* @__PURE__ */ import_react58.default.createElement("div", { style: { flexGrow: 1 } }, /* @__PURE__ */ import_react58.default.createElement(
+    DynamicValueInput,
+    {
+      readonly,
+      value: value?.right,
+      onChange: (v) => onChange?.({
+        ...value,
+        right: v
+      })
+    }
+  )), onDelete && /* @__PURE__ */ import_react58.default.createElement("div", null, /* @__PURE__ */ import_react58.default.createElement(
+    import_semi_ui27.IconButton,
+    {
+      size: "small",
+      theme: "borderless",
+      icon: /* @__PURE__ */ import_react58.default.createElement(import_semi_icons11.IconMinus, null),
+      onClick: () => onDelete?.()
+    }
+  )));
+}
+
+// src/components/assign-rows/index.tsx
+function AssignRows(props) {
+  const { name, readonly } = props;
+  return /* @__PURE__ */ import_react59.default.createElement(import_editor15.FieldArray, { name }, ({ field }) => /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, field.map((childField, index) => /* @__PURE__ */ import_react59.default.createElement(
+    AssignRow,
+    {
+      key: childField.key,
+      readonly,
+      value: childField.value,
+      onChange: (value) => {
+        childField.onChange(value);
+      },
+      onDelete: () => field.remove(index)
+    }
+  )), /* @__PURE__ */ import_react59.default.createElement("div", { style: { display: "flex", gap: 5 } }, /* @__PURE__ */ import_react59.default.createElement(
+    import_semi_ui28.Button,
+    {
+      size: "small",
+      theme: "borderless",
+      icon: /* @__PURE__ */ import_react59.default.createElement(import_semi_icons12.IconPlus, null),
+      onClick: () => field.append({ operator: "assign" })
+    },
+    "Assign"
+  ), /* @__PURE__ */ import_react59.default.createElement(
+    import_semi_ui28.Button,
+    {
+      size: "small",
+      theme: "borderless",
+      icon: /* @__PURE__ */ import_react59.default.createElement(import_semi_icons12.IconPlus, null),
+      onClick: () => field.append({ operator: "declare" })
+    },
+    "Declaration"
+  ))));
+}
+
+// src/effects/provide-batch-input/index.ts
+var import_editor16 = require("@flowgram.ai/editor");
+var provideBatchInputEffect = (0, import_editor16.createEffectFromVariableProvider)({
   private: true,
   parse: (value, ctx) => [
-    import_editor15.ASTFactory.createVariableDeclaration({
+    import_editor16.ASTFactory.createVariableDeclaration({
       key: `${ctx.node.id}_locals`,
       meta: {
-        title: (0, import_editor15.getNodeForm)(ctx.node)?.getValueIn("title"),
+        title: (0, import_editor16.getNodeForm)(ctx.node)?.getValueIn("title"),
         icon: ctx.node.getNodeRegistry().info?.icon
       },
-      type: import_editor15.ASTFactory.createObject({
+      type: import_editor16.ASTFactory.createObject({
         properties: [
-          import_editor15.ASTFactory.createProperty({
+          import_editor16.ASTFactory.createProperty({
             key: "item",
-            initializer: import_editor15.ASTFactory.createEnumerateExpression({
-              enumerateFor: import_editor15.ASTFactory.createKeyPathExpression({
+            initializer: import_editor16.ASTFactory.createEnumerateExpression({
+              enumerateFor: import_editor16.ASTFactory.createKeyPathExpression({
                 keyPath: value.content || []
               })
             })
           }),
-          import_editor15.ASTFactory.createProperty({
+          import_editor16.ASTFactory.createProperty({
             key: "index",
-            type: import_editor15.ASTFactory.createNumber()
+            type: import_editor16.ASTFactory.createNumber()
           })
         ]
       })
@@ -3240,13 +3375,13 @@ var provideBatchInputEffect = (0, import_editor15.createEffectFromVariableProvid
 
 // src/effects/auto-rename-ref/index.ts
 var import_lodash6 = require("lodash");
-var import_editor16 = require("@flowgram.ai/editor");
+var import_editor17 = require("@flowgram.ai/editor");
 var autoRenameRefEffect = [
   {
-    event: import_editor16.DataEvent.onValueInit,
+    event: import_editor17.DataEvent.onValueInit,
     effect: (params) => {
       const { context, form, name } = params;
-      const renameService = context.node.getService(import_editor16.VariableFieldKeyRenameService);
+      const renameService = context.node.getService(import_editor17.VariableFieldKeyRenameService);
       const disposable = renameService.onRename(({ before, after }) => {
         const beforeKeyPath = [
           ...before.parentFields.map((_field) => _field.key).reverse(),
@@ -3331,13 +3466,13 @@ function traverseRef(name, value, cb) {
 
 // src/effects/provide-json-schema-outputs/index.ts
 var import_json_schema9 = require("@flowgram.ai/json-schema");
-var import_editor17 = require("@flowgram.ai/editor");
-var provideJsonSchemaOutputs = (0, import_editor17.createEffectFromVariableProvider)({
+var import_editor18 = require("@flowgram.ai/editor");
+var provideJsonSchemaOutputs = (0, import_editor18.createEffectFromVariableProvider)({
   parse: (value, ctx) => [
-    import_editor17.ASTFactory.createVariableDeclaration({
+    import_editor18.ASTFactory.createVariableDeclaration({
       key: `${ctx.node.id}`,
       meta: {
-        title: (0, import_editor17.getNodeForm)(ctx.node)?.getValueIn("title") || ctx.node.id,
+        title: (0, import_editor18.getNodeForm)(ctx.node)?.getValueIn("title") || ctx.node.id,
         icon: ctx.node.getNodeRegistry().info?.icon
       },
       type: import_json_schema9.JsonSchemaUtils.schemaToAST(value)
@@ -3346,12 +3481,12 @@ var provideJsonSchemaOutputs = (0, import_editor17.createEffectFromVariableProvi
 });
 
 // src/effects/sync-variable-title/index.ts
-var import_editor18 = require("@flowgram.ai/editor");
+var import_editor19 = require("@flowgram.ai/editor");
 var syncVariableTitle = [
   {
-    event: import_editor18.DataEvent.onValueChange,
+    event: import_editor19.DataEvent.onValueChange,
     effect: ({ value, context }) => {
-      context.node.getData(import_editor18.FlowNodeVariableData).allScopes.forEach((_scope) => {
+      context.node.getData(import_editor19.FlowNodeVariableData).allScopes.forEach((_scope) => {
         _scope.output.variables.forEach((_var) => {
           _var.updateMeta({
             ..._var.meta || {},
@@ -3364,10 +3499,30 @@ var syncVariableTitle = [
   }
 ];
 
-// src/shared/format-legacy-refs/index.ts
+// src/effects/validate-when-variable-sync/index.ts
 var import_lodash7 = require("lodash");
+var import_editor20 = require("@flowgram.ai/editor");
+var validateWhenVariableSync = ({
+  scope
+} = {}) => [
+  {
+    event: import_editor20.DataEvent.onValueInit,
+    effect: ({ context, form }) => {
+      const nodeScope = scope === "private" ? (0, import_editor20.getNodePrivateScope)(context.node) : (0, import_editor20.getNodeScope)(context.node);
+      const disposable = nodeScope.available.onListOrAnyVarChange(() => {
+        if (!(0, import_lodash7.isEmpty)(form.state.errors)) {
+          form.validate();
+        }
+      });
+      return () => disposable.dispose();
+    }
+  }
+];
+
+// src/shared/format-legacy-refs/index.ts
+var import_lodash8 = require("lodash");
 function formatLegacyRefOnSubmit(value) {
-  if ((0, import_lodash7.isObject)(value)) {
+  if ((0, import_lodash8.isObject)(value)) {
     if (isLegacyFlowRefValueSchema(value)) {
       return formatLegacyRefToNewRef(value);
     }
@@ -3384,7 +3539,7 @@ function formatLegacyRefOnSubmit(value) {
   return value;
 }
 function formatLegacyRefOnInit(value) {
-  if ((0, import_lodash7.isObject)(value)) {
+  if ((0, import_lodash8.isObject)(value)) {
     if (isNewFlowRefValueSchema(value)) {
       return formatNewRefToLegacyRef(value);
     }
@@ -3401,10 +3556,10 @@ function formatLegacyRefOnInit(value) {
   return value;
 }
 function isLegacyFlowRefValueSchema(value) {
-  return (0, import_lodash7.isObject)(value) && Object.keys(value).length === 2 && value.type === "ref" && typeof value.content === "string";
+  return (0, import_lodash8.isObject)(value) && Object.keys(value).length === 2 && value.type === "ref" && typeof value.content === "string";
 }
 function isNewFlowRefValueSchema(value) {
-  return (0, import_lodash7.isObject)(value) && Object.keys(value).length === 2 && value.type === "ref" && Array.isArray(value.content);
+  return (0, import_lodash8.isObject)(value) && Object.keys(value).length === 2 && value.type === "ref" && Array.isArray(value.content);
 }
 function formatLegacyRefToNewRef(value) {
   const keyPath = value.content.split(".");
@@ -3427,21 +3582,21 @@ function formatNewRefToLegacyRef(value) {
 }
 
 // src/form-plugins/batch-outputs-plugin/index.ts
-var import_editor19 = require("@flowgram.ai/editor");
-var provideBatchOutputsEffect = (0, import_editor19.createEffectFromVariableProvider)({
+var import_editor21 = require("@flowgram.ai/editor");
+var provideBatchOutputsEffect = (0, import_editor21.createEffectFromVariableProvider)({
   parse: (value, ctx) => [
-    import_editor19.ASTFactory.createVariableDeclaration({
+    import_editor21.ASTFactory.createVariableDeclaration({
       key: `${ctx.node.id}`,
       meta: {
-        title: (0, import_editor19.getNodeForm)(ctx.node)?.getValueIn("title"),
+        title: (0, import_editor21.getNodeForm)(ctx.node)?.getValueIn("title"),
         icon: ctx.node.getNodeRegistry().info?.icon
       },
-      type: import_editor19.ASTFactory.createObject({
+      type: import_editor21.ASTFactory.createObject({
         properties: Object.entries(value).map(
-          ([_key, value2]) => import_editor19.ASTFactory.createProperty({
+          ([_key, value2]) => import_editor21.ASTFactory.createProperty({
             key: _key,
-            initializer: import_editor19.ASTFactory.createWrapArrayExpression({
-              wrapFor: import_editor19.ASTFactory.createKeyPathExpression({
+            initializer: import_editor21.ASTFactory.createWrapArrayExpression({
+              wrapFor: import_editor21.ASTFactory.createKeyPathExpression({
                 keyPath: value2?.content || []
               })
             })
@@ -3451,7 +3606,7 @@ var provideBatchOutputsEffect = (0, import_editor19.createEffectFromVariableProv
     })
   ]
 });
-var createBatchOutputsFormPlugin = (0, import_editor19.defineFormPluginCreator)({
+var createBatchOutputsFormPlugin = (0, import_editor21.defineFormPluginCreator)({
   name: "batch-outputs-plugin",
   onSetupFormMeta({ mergeEffect }, { outputKey }) {
     mergeEffect({
@@ -3459,7 +3614,7 @@ var createBatchOutputsFormPlugin = (0, import_editor19.defineFormPluginCreator)(
     });
   },
   onInit(ctx, { outputKey }) {
-    const chainTransformService = ctx.node.getService(import_editor19.ScopeChainTransformService);
+    const chainTransformService = ctx.node.getService(import_editor21.ScopeChainTransformService);
     const batchNodeType = ctx.node.flowNodeType;
     const transformerId = `${batchNodeType}-outputs`;
     if (chainTransformService.hasTransformer(transformerId)) {
@@ -3469,21 +3624,21 @@ var createBatchOutputsFormPlugin = (0, import_editor19.defineFormPluginCreator)(
       transformCovers: (covers, ctx2) => {
         const node = ctx2.scope.meta?.node;
         if (node?.parent?.flowNodeType === batchNodeType) {
-          return [...covers, (0, import_editor19.getNodeScope)(node.parent)];
+          return [...covers, (0, import_editor21.getNodeScope)(node.parent)];
         }
         return covers;
       },
       transformDeps(scopes, ctx2) {
         const scopeMeta = ctx2.scope.meta;
-        if (scopeMeta?.type === import_editor19.FlowNodeScopeType.private) {
+        if (scopeMeta?.type === import_editor21.FlowNodeScopeType.private) {
           return scopes;
         }
         const node = scopeMeta?.node;
         if (node?.flowNodeType === batchNodeType) {
           const childBlocks = node.blocks;
           return [
-            (0, import_editor19.getNodePrivateScope)(node),
-            ...childBlocks.map((_childBlock) => (0, import_editor19.getNodeScope)(_childBlock))
+            (0, import_editor21.getNodePrivateScope)(node),
+            ...childBlocks.map((_childBlock) => (0, import_editor21.getNodeScope)(_childBlock))
           ];
         }
         return scopes;
@@ -3493,21 +3648,21 @@ var createBatchOutputsFormPlugin = (0, import_editor19.defineFormPluginCreator)(
 });
 
 // src/form-plugins/infer-inputs-plugin/index.ts
-var import_lodash8 = require("lodash");
+var import_lodash9 = require("lodash");
 var import_json_schema10 = require("@flowgram.ai/json-schema");
-var import_editor20 = require("@flowgram.ai/editor");
-var createInferInputsPlugin = (0, import_editor20.defineFormPluginCreator)({
+var import_editor22 = require("@flowgram.ai/editor");
+var createInferInputsPlugin = (0, import_editor22.defineFormPluginCreator)({
   onSetupFormMeta({ addFormatOnSubmit }, { sourceKey, targetKey, scope }) {
     if (!sourceKey || !targetKey) {
       return;
     }
     addFormatOnSubmit((formData, ctx) => {
-      (0, import_lodash8.set)(
+      (0, import_lodash9.set)(
         formData,
         targetKey,
         infer(
-          (0, import_lodash8.get)(formData, sourceKey),
-          scope === "private" ? (0, import_editor20.getNodePrivateScope)(ctx.node) : (0, import_editor20.getNodeScope)(ctx.node)
+          (0, import_lodash9.get)(formData, sourceKey),
+          scope === "private" ? (0, import_editor22.getNodePrivateScope)(ctx.node) : (0, import_editor22.getNodeScope)(ctx.node)
         )
       );
       return formData;
@@ -3567,8 +3722,105 @@ var infer = (values, scope) => {
     };
   }
 };
+
+// src/form-plugins/infer-assign-plugin/index.ts
+var import_lodash10 = require("lodash");
+var import_json_schema11 = require("@flowgram.ai/json-schema");
+var import_editor23 = require("@flowgram.ai/editor");
+var createInferAssignPlugin = (0, import_editor23.defineFormPluginCreator)({
+  onSetupFormMeta({ addFormatOnSubmit, mergeEffect }, { assignKey, outputKey }) {
+    if (!assignKey || !outputKey) {
+      return;
+    }
+    mergeEffect({
+      [assignKey]: (0, import_editor23.createEffectFromVariableProvider)({
+        parse: (value, ctx) => {
+          const declareRows = (0, import_lodash10.uniqBy)(
+            value.filter((_v) => _v.operator === "declare" && _v.left && _v.right),
+            "left"
+          );
+          return [
+            import_editor23.ASTFactory.createVariableDeclaration({
+              key: `${ctx.node.id}`,
+              meta: {
+                title: (0, import_editor23.getNodeForm)(ctx.node)?.getValueIn("title"),
+                icon: ctx.node.getNodeRegistry().info?.icon
+              },
+              type: import_editor23.ASTFactory.createObject({
+                properties: declareRows.map(
+                  (_v) => import_editor23.ASTFactory.createProperty({
+                    key: _v.left,
+                    type: _v.right?.type === "constant" ? import_json_schema11.JsonSchemaUtils.schemaToAST(_v.right?.schema || {}) : void 0,
+                    initializer: _v.right?.type === "ref" ? import_editor23.ASTFactory.createKeyPathExpression({
+                      keyPath: _v.right?.content || []
+                    }) : {}
+                  })
+                )
+              })
+            })
+          ];
+        }
+      })
+    });
+    addFormatOnSubmit((formData, ctx) => {
+      (0, import_lodash10.set)(
+        formData,
+        outputKey,
+        import_json_schema11.JsonSchemaUtils.astToSchema((0, import_editor23.getNodeScope)(ctx.node).output.variables?.[0]?.type)
+      );
+      return formData;
+    });
+  }
+});
+
+// src/validate/validate-flow-value/index.tsx
+var import_lodash11 = require("lodash");
+var import_editor24 = require("@flowgram.ai/editor");
+function validateFlowValue(value, ctx) {
+  const { node, required, errorMessages } = ctx;
+  const {
+    required: requiredMessage = "Field is required",
+    unknownVariable: unknownVariableMessage = "Unknown Variable"
+  } = errorMessages || {};
+  if (required && ((0, import_lodash11.isNil)(value) || (0, import_lodash11.isNil)(value?.content) || value?.content === "")) {
+    return {
+      level: import_editor24.FeedbackLevel.Error,
+      message: requiredMessage
+    };
+  }
+  if (value?.type === "ref") {
+    const variable = (0, import_editor24.getNodeScope)(node).available.getByKeyPath(value?.content || []);
+    if (!variable) {
+      return {
+        level: import_editor24.FeedbackLevel.Error,
+        message: unknownVariableMessage
+      };
+    }
+  }
+  if (value?.type === "template") {
+    const allRefs = getTemplateKeyPaths2(value);
+    for (const ref of allRefs) {
+      const variable = (0, import_editor24.getNodeScope)(node).available.getByKeyPath(ref);
+      if (!variable) {
+        return {
+          level: import_editor24.FeedbackLevel.Error,
+          message: unknownVariableMessage
+        };
+      }
+    }
+  }
+  return void 0;
+}
+function getTemplateKeyPaths2(value) {
+  const keyPathReg = /{{(.*?)}}/g;
+  return (0, import_lodash11.uniq)(value.content?.match(keyPathReg) || []).map(
+    (_keyPath) => _keyPath.slice(2, -2).split(".")
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AssignRow,
+  AssignRows,
   BatchOutputs,
   BatchVariableSelector,
   CodeEditor,
@@ -3594,6 +3846,7 @@ var infer = (values, scope) => {
   autoRenameRefEffect,
   createBatchOutputsFormPlugin,
   createDisableDeclarationPlugin,
+  createInferAssignPlugin,
   createInferInputsPlugin,
   createTypePresetPlugin,
   formatLegacyRefOnInit,
@@ -3609,6 +3862,8 @@ var infer = (values, scope) => {
   provideJsonSchemaOutputs,
   syncVariableTitle,
   useTypeManager,
-  useVariableTree
+  useVariableTree,
+  validateFlowValue,
+  validateWhenVariableSync
 });
 //# sourceMappingURL=index.js.map