@flowgram.ai/form-materials 0.3.2 → 0.3.4

package/dist/esm/index.js

@@ -1,5 +1,6 @@
 // src/components/variable-selector/index.tsx
 import React11, { useMemo } from "react";
+import { I18n as I18n7 } from "@flowgram.ai/editor";
 import { Popover } from "@douyinfe/semi-ui";
 import { IconChevronDownStroked, IconIssueStroked } from "@douyinfe/semi-icons";
 
@@ -22,14 +23,24 @@ import { jsonSchemaTypeManager } from "@flowgram.ai/json-schema";
 
 // src/plugins/json-schema-preset/type-definition/string.tsx
 import React from "react";
+import { I18n } from "@flowgram.ai/editor";
 import { Input } from "@douyinfe/semi-ui";
 var stringRegistry = {
   type: "string",
-  ConstantRenderer: (props) => /* @__PURE__ */ React.createElement(Input, { placeholder: "Please Input String", size: "small", disabled: props.readonly, ...props })
+  ConstantRenderer: (props) => /* @__PURE__ */ React.createElement(
+    Input,
+    {
+      placeholder: I18n.t("Please Input String"),
+      size: "small",
+      disabled: props.readonly,
+      ...props
+    }
+  )
 };
 
 // src/plugins/json-schema-preset/type-definition/object.tsx
 import React4 from "react";
+import { I18n as I18n2 } from "@flowgram.ai/editor";
 
 // src/components/code-editor-mini/index.tsx
 import React3 from "react";
@@ -409,7 +420,7 @@ var objectRegistry = {
       value: props.value,
       onChange: (v) => props.onChange?.(v),
       languageId: "json",
-      placeholder: "Please Input Object",
+      placeholder: I18n2.t("Please Input Object"),
       readonly: props.readonly
     }
   )
@@ -417,13 +428,14 @@ var objectRegistry = {
 
 // src/plugins/json-schema-preset/type-definition/number.tsx
 import React5 from "react";
+import { I18n as I18n3 } from "@flowgram.ai/editor";
 import { InputNumber } from "@douyinfe/semi-ui";
 var numberRegistry = {
   type: "number",
   ConstantRenderer: (props) => /* @__PURE__ */ React5.createElement(
     InputNumber,
     {
-      placeholder: "Please Input Number",
+      placeholder: I18n3.t("Please Input Number"),
       size: "small",
       disabled: props.readonly,
       hideButtons: true,
@@ -434,13 +446,14 @@ var numberRegistry = {
 
 // src/plugins/json-schema-preset/type-definition/integer.tsx
 import React6 from "react";
+import { I18n as I18n4 } from "@flowgram.ai/editor";
 import { InputNumber as InputNumber2 } from "@douyinfe/semi-ui";
 var integerRegistry = {
   type: "integer",
   ConstantRenderer: (props) => /* @__PURE__ */ React6.createElement(
     InputNumber2,
     {
-      placeholder: "Please Input Integer",
+      placeholder: I18n4.t("Please Input Integer"),
       size: "small",
       disabled: props.readonly,
       precision: 0,
@@ -451,6 +464,7 @@ var integerRegistry = {
 
 // src/plugins/json-schema-preset/type-definition/boolean.tsx
 import React7 from "react";
+import { I18n as I18n5 } from "@flowgram.ai/editor";
 import { Select } from "@douyinfe/semi-ui";
 var booleanRegistry = {
   type: "boolean",
@@ -459,12 +473,12 @@ var booleanRegistry = {
     return /* @__PURE__ */ React7.createElement(
       Select,
       {
-        placeholder: "Please Select Boolean",
+        placeholder: I18n5.t("Please Select Boolean"),
         size: "small",
         disabled: props.readonly,
         optionList: [
-          { label: "True", value: 1 },
-          { label: "False", value: 0 }
+          { label: I18n5.t("True"), value: 1 },
+          { label: I18n5.t("False"), value: 0 }
         ],
         value: value ? 1 : 0,
         onChange: (value2) => onChange?.(!!value2),
@@ -476,6 +490,7 @@ var booleanRegistry = {
 
 // src/plugins/json-schema-preset/type-definition/array.tsx
 import React8 from "react";
+import { I18n as I18n6 } from "@flowgram.ai/editor";
 var arrayRegistry = {
   type: "array",
   ConstantRenderer: (props) => /* @__PURE__ */ React8.createElement(
@@ -484,7 +499,7 @@ var arrayRegistry = {
       value: props.value,
       languageId: "json",
       onChange: (v) => props.onChange?.(v),
-      placeholder: "Please Input Array",
+      placeholder: I18n6.t("Please Input Array"),
       readonly: props.readonly
     }
   )
@@ -735,7 +750,7 @@ var VariableSelector = ({
       showClear: false,
       arrowIcon: /* @__PURE__ */ React11.createElement(IconChevronDownStroked, { size: "small" }),
       triggerRender,
-      placeholder: config?.placeholder ?? "Select Variable"
+      placeholder: config?.placeholder ?? I18n7.t("Select Variable")
     }
   ));
 };
@@ -744,7 +759,6 @@ var VariableSelector = ({
 import React12, { useMemo as useMemo2 } from "react";
 import { Cascader, Icon as Icon2, IconButton } from "@douyinfe/semi-ui";
 var labelStyle = { display: "flex", alignItems: "center", gap: 5 };
-var firstUppercase = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 var getTypeSelectValue = (value) => {
   if (value?.type === "array" && value?.items) {
     return [value.type, ...getTypeSelectValue(value.items) || []];
@@ -767,7 +781,7 @@ function TypeSelector(props) {
     () => typeManager.getTypeRegistriesWithParentType().map((_type) => {
       const isArray2 = _type.type === "array";
       return {
-        label: /* @__PURE__ */ React12.createElement("div", { style: labelStyle }, /* @__PURE__ */ React12.createElement(Icon2, { size: "small", svg: _type.icon }), firstUppercase(_type.type)),
+        label: /* @__PURE__ */ React12.createElement("div", { style: labelStyle }, /* @__PURE__ */ React12.createElement(Icon2, { size: "small", svg: _type.icon }), typeManager.getTypeBySchema(_type)?.label || _type.type),
         value: _type.type,
         children: isArray2 ? typeManager.getTypeRegistriesWithParentType("array").map((_type2) => ({
           label: /* @__PURE__ */ React12.createElement("div", { style: labelStyle }, /* @__PURE__ */ React12.createElement(
@@ -779,7 +793,7 @@ function TypeSelector(props) {
                 items: { type: _type2.type }
               })
             }
-          ), firstUppercase(_type2.type)),
+          ), typeManager.getTypeBySchema(_type2)?.label || _type2.type),
           value: _type2.type
         })) : []
       };
@@ -804,6 +818,7 @@ function TypeSelector(props) {
 
 // src/components/json-schema-editor/index.tsx
 import React17, { useMemo as useMemo5, useState as useState4 } from "react";
+import { I18n as I18n8 } from "@flowgram.ai/editor";
 import { Button, Checkbox, IconButton as IconButton3 } from "@douyinfe/semi-ui";
 import {
   IconExpand,
@@ -1418,22 +1433,22 @@ function PropertyEdit(props) {
         onClick: onRemove
       }
     ))),
-    expand && /* @__PURE__ */ React17.createElement(UIExpandDetail, null, /* @__PURE__ */ React17.createElement(UILabel, null, config?.descTitle ?? "Description"), /* @__PURE__ */ React17.createElement(
+    expand && /* @__PURE__ */ React17.createElement(UIExpandDetail, null, /* @__PURE__ */ React17.createElement(UILabel, null, config?.descTitle ?? I18n8.t("Description")), /* @__PURE__ */ React17.createElement(
       BlurInput,
       {
         disabled: readonly,
         size: "small",
         value: description,
         onChange: (value2) => onChange("description", value2),
-        placeholder: config?.descPlaceholder ?? "Help LLM to understand the property"
+        placeholder: config?.descPlaceholder ?? I18n8.t("Help LLM to understand the property")
       }
-    ), $level === 0 && type && type !== "array" && /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(UILabel, { style: { marginTop: 10 } }, config?.defaultValueTitle ?? "Default Value"), /* @__PURE__ */ React17.createElement(DefaultValueWrapper, null, /* @__PURE__ */ React17.createElement(
+    ), $level === 0 && type && type !== "array" && /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(UILabel, { style: { marginTop: 10 } }, config?.defaultValueTitle ?? I18n8.t("Default Value")), /* @__PURE__ */ React17.createElement(DefaultValueWrapper, null, /* @__PURE__ */ React17.createElement(
       DefaultValue,
       {
         value: defaultValue,
         schema: value,
         type,
-        placeholder: config?.defaultValuePlaceholder,
+        placeholder: config?.defaultValuePlaceholder ?? I18n8.t("Default Value"),
         jsonFormatText: config?.jsonFormatText,
         onChange: (value2) => onChange("default", value2)
       }
@@ -1654,6 +1669,7 @@ function DynamicValueInput({
 
 // src/components/condition-row/index.tsx
 import React21, { useMemo as useMemo9 } from "react";
+import { I18n as I18n10 } from "@flowgram.ai/editor";
 import { Input as Input4 } from "@douyinfe/semi-ui";
 
 // src/components/condition-row/styles.tsx
@@ -1684,7 +1700,7 @@ import { JsonSchemaUtils as JsonSchemaUtils4 } from "@flowgram.ai/json-schema";
 import { useScopeAvailable as useScopeAvailable2 } from "@flowgram.ai/editor";
 
 // src/components/condition-row/constants.ts
-var rules = {
+var defaultRules = {
   string: {
     ["eq" /* EQ */]: "string",
     ["neq" /* NEQ */]: "string",
@@ -1740,7 +1756,7 @@ var rules = {
     ["is_not_empty" /* IS_NOT_EMPTY */]: null
   }
 };
-var opConfigs = {
+var defaultOpConfigs = {
   ["eq" /* EQ */]: {
     label: "Equal",
     abbreviation: "="
@@ -1804,8 +1820,9 @@ var opConfigs = {
 };
 
 // src/components/condition-row/hooks/useRule.ts
-function useRule(left) {
+function useRule(left, userRules) {
   const available = useScopeAvailable2();
+  const rules = useMemo7(() => ({ ...defaultRules, ...userRules || {} }), [userRules]);
   const variable = useMemo7(() => {
     if (!left) return void 0;
     return available.getByKeyPath(left.content);
@@ -1814,23 +1831,26 @@ function useRule(left) {
     if (!variable) return void 0;
     const schema = JsonSchemaUtils4.astToSchema(variable.type, { drilldown: false });
     return rules[schema?.type];
-  }, [variable?.type]);
+  }, [variable?.type, rules]);
   return { rule };
 }
 
 // src/components/condition-row/hooks/useOp.tsx
 import React20, { useMemo as useMemo8 } from "react";
+import { I18n as I18n9 } from "@flowgram.ai/editor";
 import { Button as Button2, Select as Select2 } from "@douyinfe/semi-ui";
 import { IconChevronDownStroked as IconChevronDownStroked2 } from "@douyinfe/semi-icons";
-function useOp({ rule, op, onChange, readonly }) {
+function useOp({ rule, op, onChange, readonly, userOps }) {
   const options = useMemo8(
     () => Object.keys(rule || {}).map((_op) => ({
-      ...opConfigs[_op] || {},
-      value: _op
+      ...defaultOpConfigs[_op] || {},
+      ...userOps?.[_op] || {},
+      value: _op,
+      label: I18n9.t(userOps?.[_op]?.label || defaultOpConfigs[_op]?.label)
     })),
-    [rule]
+    [rule, userOps]
   );
-  const opConfig = useMemo8(() => opConfigs[op], [op]);
+  const opConfig = useMemo8(() => defaultOpConfigs[op], [op]);
   const renderOpSelect = () => /* @__PURE__ */ React20.createElement(
     Select2,
     {
@@ -1849,17 +1869,28 @@ function useOp({ rule, op, onChange, readonly }) {
 }
 
 // src/components/condition-row/index.tsx
-function ConditionRow({ style, value, onChange, readonly }) {
+var defaultRuleConfig = {
+  ops: {},
+  rules: {}
+};
+function ConditionRow({
+  style,
+  value,
+  onChange,
+  readonly,
+  ruleConfig = defaultRuleConfig
+}) {
   const { left, operator, right } = value || {};
-  const { rule } = useRule(left);
+  const { rule } = useRule(left, ruleConfig.rules);
   const { renderOpSelect, opConfig } = useOp({
     rule,
     op: operator,
     onChange: (v) => onChange({ ...value, operator: v }),
-    readonly
+    readonly,
+    userOps: ruleConfig.ops
   });
   const targetSchema = useMemo9(() => {
-    const targetType = rule?.[operator] || null;
+    const targetType = rule?.[operator || ""] || null;
     return targetType ? { type: targetType, extra: { weak: true } } : null;
   }, [rule, opConfig]);
   return /* @__PURE__ */ React21.createElement(UIContainer3, { style }, /* @__PURE__ */ React21.createElement(UIOperator, null, renderOpSelect()), /* @__PURE__ */ React21.createElement(UIValues, null, /* @__PURE__ */ React21.createElement(UILeft, null, /* @__PURE__ */ React21.createElement(
@@ -1890,7 +1921,7 @@ function ConditionRow({ style, value, onChange, readonly }) {
       size: "small",
       disabled: true,
       style: { pointerEvents: "none" },
-      value: opConfig?.rightDisplay || "Empty"
+      value: opConfig?.rightDisplay || I18n10.t("Empty")
     }
   ))));
 }
@@ -3512,6 +3543,62 @@ var validateWhenVariableSync = ({
   }
 ];
 
+// src/effects/listen-ref-value-change/index.ts
+import {
+  DataEvent as DataEvent4,
+  getNodeScope as getNodeScope2
+} from "@flowgram.ai/editor";
+var listenRefValueChange = (cb) => [
+  {
+    event: DataEvent4.onValueInitOrChange,
+    effect: (params) => {
+      const { context, value } = params;
+      if (value?.type !== "ref") {
+        return () => null;
+      }
+      const disposable = getNodeScope2(context.node).available.trackByKeyPath(
+        value?.content || [],
+        (v) => {
+          cb({ ...params, variable: v });
+        }
+      );
+      return () => {
+        disposable.dispose();
+      };
+    }
+  }
+];
+
+// src/effects/listen-ref-schema-change/index.ts
+import { JsonSchemaUtils as JsonSchemaUtils8 } from "@flowgram.ai/json-schema";
+import {
+  DataEvent as DataEvent5,
+  getNodeScope as getNodeScope3
+} from "@flowgram.ai/editor";
+var listenRefSchemaChange = (cb) => [
+  {
+    event: DataEvent5.onValueInitOrChange,
+    effect: (params) => {
+      const { context, value } = params;
+      if (value?.type !== "ref") {
+        return () => null;
+      }
+      const disposable = getNodeScope3(context.node).available.trackByKeyPath(
+        value?.content || [],
+        (_type) => {
+          cb({ ...params, schema: JsonSchemaUtils8.astToSchema(_type) });
+        },
+        {
+          selector: (_v) => _v?.type
+        }
+      );
+      return () => {
+        disposable.dispose();
+      };
+    }
+  }
+];
+
 // src/shared/format-legacy-refs/index.ts
 import { isObject as isObject3 } from "lodash";
 function formatLegacyRefOnSubmit(value) {
@@ -3581,7 +3668,7 @@ import {
   defineFormPluginCreator,
   getNodeForm as getNodeForm3,
   getNodePrivateScope as getNodePrivateScope2,
-  getNodeScope as getNodeScope2,
+  getNodeScope as getNodeScope4,
   ScopeChainTransformService,
   FlowNodeScopeType
 } from "@flowgram.ai/editor";
@@ -3626,7 +3713,7 @@ var createBatchOutputsFormPlugin = defineFormPluginCreator({
       transformCovers: (covers, ctx2) => {
         const node = ctx2.scope.meta?.node;
         if (node?.parent?.flowNodeType === batchNodeType) {
-          return [...covers, getNodeScope2(node.parent)];
+          return [...covers, getNodeScope4(node.parent)];
         }
         return covers;
       },
@@ -3640,7 +3727,7 @@ var createBatchOutputsFormPlugin = defineFormPluginCreator({
           const childBlocks = node.blocks;
           return [
             getNodePrivateScope2(node),
-            ...childBlocks.map((_childBlock) => getNodeScope2(_childBlock))
+            ...childBlocks.map((_childBlock) => getNodeScope4(_childBlock))
           ];
         }
         return scopes;
@@ -3651,11 +3738,11 @@ var createBatchOutputsFormPlugin = defineFormPluginCreator({
 
 // src/form-plugins/infer-inputs-plugin/index.ts
 import { get as get2, set as set2 } from "lodash";
-import { JsonSchemaUtils as JsonSchemaUtils8 } from "@flowgram.ai/json-schema";
+import { JsonSchemaUtils as JsonSchemaUtils9 } from "@flowgram.ai/json-schema";
 import {
   defineFormPluginCreator as defineFormPluginCreator2,
   getNodePrivateScope as getNodePrivateScope3,
-  getNodeScope as getNodeScope3
+  getNodeScope as getNodeScope5
 } from "@flowgram.ai/editor";
 var createInferInputsPlugin = defineFormPluginCreator2({
   onSetupFormMeta({ addFormatOnSubmit }, { sourceKey, targetKey, scope }) {
@@ -3668,7 +3755,7 @@ var createInferInputsPlugin = defineFormPluginCreator2({
         targetKey,
         infer(
           get2(formData, sourceKey),
-          scope === "private" ? getNodePrivateScope3(ctx.node) : getNodeScope3(ctx.node)
+          scope === "private" ? getNodePrivateScope3(ctx.node) : getNodeScope5(ctx.node)
         )
       );
       return formData;
@@ -3708,7 +3795,7 @@ var infer = (values, scope) => {
     }
     if (isRef2(values)) {
       const variable = scope.available.getByKeyPath(values?.content);
-      const schema = variable?.type ? JsonSchemaUtils8.astToSchema(variable?.type) : void 0;
+      const schema = variable?.type ? JsonSchemaUtils9.astToSchema(variable?.type) : void 0;
       return schema;
     }
     if (isTemplate2(values)) {
@@ -3731,13 +3818,13 @@ var infer = (values, scope) => {
 
 // src/form-plugins/infer-assign-plugin/index.ts
 import { set as set3, uniqBy } from "lodash";
-import { JsonSchemaUtils as JsonSchemaUtils9 } from "@flowgram.ai/json-schema";
+import { JsonSchemaUtils as JsonSchemaUtils10 } from "@flowgram.ai/json-schema";
 import {
   ASTFactory as ASTFactory4,
   createEffectFromVariableProvider as createEffectFromVariableProvider4,
   defineFormPluginCreator as defineFormPluginCreator3,
   getNodeForm as getNodeForm4,
-  getNodeScope as getNodeScope4
+  getNodeScope as getNodeScope6
 } from "@flowgram.ai/editor";
 var createInferAssignPlugin = defineFormPluginCreator3({
   onSetupFormMeta({ addFormatOnSubmit, mergeEffect }, { assignKey, outputKey }) {
@@ -3762,7 +3849,7 @@ var createInferAssignPlugin = defineFormPluginCreator3({
                 properties: declareRows.map(
                   (_v) => ASTFactory4.createProperty({
                     key: _v.left,
-                    type: _v.right?.type === "constant" ? JsonSchemaUtils9.schemaToAST(_v.right?.schema || {}) : void 0,
+                    type: _v.right?.type === "constant" ? JsonSchemaUtils10.schemaToAST(_v.right?.schema || {}) : void 0,
                     initializer: _v.right?.type === "ref" ? ASTFactory4.createKeyPathExpression({
                       keyPath: _v.right?.content || []
                     }) : {}
@@ -3778,7 +3865,7 @@ var createInferAssignPlugin = defineFormPluginCreator3({
       set3(
         formData,
         outputKey,
-        JsonSchemaUtils9.astToSchema(getNodeScope4(ctx.node).output.variables?.[0]?.type)
+        JsonSchemaUtils10.astToSchema(getNodeScope6(ctx.node).output.variables?.[0]?.type)
       );
       return formData;
     });
@@ -3787,7 +3874,7 @@ var createInferAssignPlugin = defineFormPluginCreator3({
 
 // src/validate/validate-flow-value/index.tsx
 import { isNil, uniq as uniq2 } from "lodash";
-import { FeedbackLevel, getNodeScope as getNodeScope5 } from "@flowgram.ai/editor";
+import { FeedbackLevel, getNodeScope as getNodeScope7 } from "@flowgram.ai/editor";
 function validateFlowValue(value, ctx) {
   const { node, required, errorMessages } = ctx;
   const {
@@ -3801,7 +3888,7 @@ function validateFlowValue(value, ctx) {
     };
   }
   if (value?.type === "ref") {
-    const variable = getNodeScope5(node).available.getByKeyPath(value?.content || []);
+    const variable = getNodeScope7(node).available.getByKeyPath(value?.content || []);
     if (!variable) {
       return {
         level: FeedbackLevel.Error,
@@ -3812,7 +3899,7 @@ function validateFlowValue(value, ctx) {
   if (value?.type === "template") {
     const allRefs = getTemplateKeyPaths2(value);
     for (const ref of allRefs) {
-      const variable = getNodeScope5(node).available.getByKeyPath(ref);
+      const variable = getNodeScope7(node).available.getByKeyPath(ref);
       if (!variable) {
         return {
           level: FeedbackLevel.Error,
@@ -3867,6 +3954,8 @@ export {
   getTypeSelectValue,
   isLegacyFlowRefValueSchema,
   isNewFlowRefValueSchema,
+  listenRefSchemaChange,
+  listenRefValueChange,
   parseTypeSelectValue,
   provideBatchInputEffect,
   provideBatchOutputsEffect,