@flowgram.ai/form-materials 0.4.2 → 0.4.3

package/dist/esm/index.js

@@ -183,13 +183,13 @@ var FlowValueUtils;
     return;
   }
   FlowValueUtils2.traverse = traverse;
-  function getTemplateKeyPaths2(value) {
-    const keyPathReg = /{{(.*?)}}/g;
+  function getTemplateKeyPaths(value) {
+    const keyPathReg = /\{\{([^\}\{]+)\}\}/g;
     return uniq(value.content?.match(keyPathReg) || []).map(
       (_keyPath) => _keyPath.slice(2, -2).split(".")
     );
   }
-  FlowValueUtils2.getTemplateKeyPaths = getTemplateKeyPaths2;
+  FlowValueUtils2.getTemplateKeyPaths = getTemplateKeyPaths;
   function inferConstantJsonSchema(value) {
     if (value?.schema) {
       return value.schema;
@@ -1052,12 +1052,24 @@ function TypeSelector(props) {
     }),
     []
   );
+  const isDisabled = readonly || disabled;
   return /* @__PURE__ */ React13.createElement(
     Cascader,
     {
-      disabled: readonly || disabled,
+      disabled: isDisabled,
       size: "small",
-      triggerRender: () => /* @__PURE__ */ React13.createElement(IconButton, { size: "small", style, disabled: readonly || disabled, icon }),
+      triggerRender: () => /* @__PURE__ */ React13.createElement(
+        IconButton,
+        {
+          size: "small",
+          style: {
+            ...isDisabled ? { pointerEvents: "none" } : {},
+            ...style || {}
+          },
+          disabled: isDisabled,
+          icon
+        }
+      ),
       treeData: options,
       value: selectValue,
       leafOnly: true,
@@ -1541,7 +1553,10 @@ function BatchVariableSelector(props) {
 
 // src/components/dynamic-value-input/index.tsx
 import React20 from "react";
-import { JsonSchemaUtils as JsonSchemaUtils4 } from "@flowgram.ai/json-schema";
+import {
+  JsonSchemaUtils as JsonSchemaUtils4,
+  useTypeManager as useTypeManager3
+} from "@flowgram.ai/json-schema";
 import { IconButton as IconButton3 } from "@douyinfe/semi-ui";
 import { IconSetting } from "@douyinfe/semi-icons";
 
@@ -1651,6 +1666,11 @@ function useIncludeSchema(schemaFromProps) {
 }
 
 // src/components/dynamic-value-input/index.tsx
+var DEFAULT_VALUE = {
+  type: "constant",
+  content: "",
+  schema: { type: "string" }
+};
 function DynamicValueInput({
   value,
   onChange,
@@ -1662,6 +1682,7 @@ function DynamicValueInput({
   const refVariable = useRefVariable(value);
   const [selectSchema, setSelectSchema] = useSelectSchema(schemaFromProps, constantProps, value);
   const includeSchema = useIncludeSchema(schemaFromProps);
+  const typeManager = useTypeManager3();
   const renderTypeSelector = () => {
     if (schemaFromProps) {
       return /* @__PURE__ */ React20.createElement(TypeSelector, { value: schemaFromProps, readonly: true });
@@ -1676,20 +1697,18 @@ function DynamicValueInput({
         value: selectSchema,
         onChange: (_v) => {
           setSelectSchema(_v || { type: "string" });
-          let content;
+          const schema = _v || { type: "string" };
+          let content = typeManager.getDefaultValue(schema);
           if (_v?.type === "object") {
             content = "{}";
           }
           if (_v?.type === "array") {
             content = "[]";
           }
-          if (_v?.type === "boolean") {
-            content = false;
-          }
           onChange({
             type: "constant",
             content,
-            schema: _v || { type: "string" }
+            schema
           });
         },
         readonly
@@ -1703,7 +1722,7 @@ function DynamicValueInput({
         {
           style: { width: "100%" },
           value: value?.content,
-          onChange: (_v) => onChange(_v ? { type: "ref", content: _v } : void 0),
+          onChange: (_v) => onChange(_v ? { type: "ref", content: _v } : DEFAULT_VALUE),
           includeSchema,
           readonly
         }
@@ -1721,7 +1740,7 @@ function DynamicValueInput({
           InjectVariableSelector,
           {
             style: { width: "100%" },
-            onChange: (_v) => onChange(_v ? { type: "ref", content: _v } : void 0),
+            onChange: (_v) => onChange(_v ? { type: "ref", content: _v } : DEFAULT_VALUE),
             includeSchema,
             readonly
           }
@@ -2367,8 +2386,16 @@ function VariableTree() {
     if (!range) {
       return;
     }
+    let { from, to } = range;
+    while (editor.$view.state.doc.sliceString(from - 1, from) === "{") {
+      from--;
+    }
+    while (editor.$view.state.doc.sliceString(to, to + 1) === "}") {
+      to++;
+    }
     editor.replaceText({
-      ...range,
+      from,
+      to,
       text: "{{" + variablePath + "}}"
     });
     setVisible(false);
@@ -2540,7 +2567,7 @@ function VariableTagInject() {
   const scope = useCurrentScope();
   useLayoutEffect4(() => {
     const atMatcher = new MatchDecorator({
-      regexp: /\{\{([^\}]+)\}\}/g,
+      regexp: /\{\{([^\}\{]+)\}\}/g,
       decoration: (match) => Decoration.replace({
         widget: new VariableTagWidget({
           keyPath: match[1]?.split(".") ?? [],
@@ -2593,7 +2620,7 @@ import {
 
 // src/components/prompt-editor-with-inputs/inputs-picker.tsx
 import React28, { useMemo as useMemo9 } from "react";
-import { last as last2 } from "lodash";
+import { isPlainObject as isPlainObject2, last as last2 } from "lodash";
 import {
   ASTMatch as ASTMatch3,
   useScopeAvailable as useScopeAvailable3
@@ -2636,20 +2663,32 @@ function InputsPicker({
       children
     };
   };
-  const treeData = useMemo9(
-    () => Object.entries(inputsValues).map(([key, value]) => {
-      if (value?.type === "ref") {
+  const getTreeData = (value, keyPath) => {
+    const currKey = keyPath.join(".");
+    if (FlowValueUtils.isFlowValue(value)) {
+      if (FlowValueUtils.isRef(value)) {
         const variable = available.getByKeyPath(value.content || []);
         if (variable) {
-          return renderVariable(variable, [key]);
+          return renderVariable(variable, keyPath);
         }
       }
       return {
-        key,
-        value: key,
-        label: key
+        key: currKey,
+        value: currKey,
+        label: last2(keyPath)
       };
-    }),
+    }
+    if (isPlainObject2(value)) {
+      return {
+        key: currKey,
+        value: currKey,
+        label: last2(keyPath),
+        children: Object.entries(value).map(([key, value2]) => getTreeData(value2, [...keyPath, key])).filter(Boolean)
+      };
+    }
+  };
+  const treeData = useMemo9(
+    () => Object.entries(inputsValues).map(([key, value]) => getTreeData(value, [key])).filter(Boolean),
     []
   );
   return /* @__PURE__ */ React28.createElement(Tree2, { treeData, onSelect: (v) => onSelect(v) });
@@ -2666,6 +2705,13 @@ function InputsTree({ inputsValues }) {
     if (!range) {
       return;
     }
+    let { from, to } = range;
+    while (editor.$view.state.doc.sliceString(from - 1, from) === "{") {
+      from--;
+    }
+    while (editor.$view.state.doc.sliceString(to, to + 1) === "}") {
+      to++;
+    }
     editor.replaceText({
       ...range,
       text: "{{" + variablePath + "}}"
@@ -2905,7 +2951,7 @@ function VariableTagInject2() {
   const scope = useCurrentScope2();
   useLayoutEffect5(() => {
     const atMatcher = new MatchDecorator2({
-      regexp: /\{\{([^\}]+)\}\}/g,
+      regexp: /\{\{([^\}\{]+)\}\}/g,
       decoration: (match) => Decoration2.replace({
         widget: new VariableTagWidget2({
           keyPath: match[1]?.split(".") ?? [],
@@ -3052,7 +3098,20 @@ function InputsValues({
       size: "small",
       onClick: () => remove(item.id)
     }
-  )))), /* @__PURE__ */ React34.createElement(Button4, { disabled: readonly, icon: /* @__PURE__ */ React34.createElement(IconPlus3, null), size: "small", onClick: () => add() }, I18n13.t("Add")));
+  )))), /* @__PURE__ */ React34.createElement(
+    Button4,
+    {
+      disabled: readonly,
+      icon: /* @__PURE__ */ React34.createElement(IconPlus3, null),
+      size: "small",
+      onClick: () => add({
+        type: "constant",
+        content: "",
+        schema: { type: "string" }
+      })
+    },
+    I18n13.t("Add")
+  ));
 }
 
 // src/components/display-schema-tree/index.tsx
@@ -3282,7 +3341,7 @@ function DisplayFlowValue({ value, title, showIconInTree }) {
 
 // src/components/display-inputs-values/index.tsx
 import React39, { useMemo as useMemo11 } from "react";
-import { isPlainObject as isPlainObject2 } from "lodash";
+import { isPlainObject as isPlainObject3 } from "lodash";
 import { useScopeAvailable as useScopeAvailable5 } from "@flowgram.ai/editor";
 
 // src/components/display-inputs-values/styles.ts
@@ -3300,7 +3359,7 @@ function DisplayInputsValues({ value, showIconInTree }) {
     if (FlowValueUtils.isFlowValue(value2)) {
       return /* @__PURE__ */ React39.createElement(DisplayFlowValue, { key, title: key, value: value2, showIconInTree });
     }
-    if (isPlainObject2(value2)) {
+    if (isPlainObject3(value2)) {
       return /* @__PURE__ */ React39.createElement(
         DisplayInputsValueAllInTag,
         {
@@ -3566,10 +3625,10 @@ import { IconChevronDown as IconChevronDown2, IconChevronRight as IconChevronRig
 
 // src/components/inputs-values-tree/hooks/use-child-list.tsx
 import { useMemo as useMemo12 } from "react";
-import { isPlainObject as isPlainObject3 } from "lodash";
+import { isPlainObject as isPlainObject4 } from "lodash";
 function useChildList(value, onChange) {
   const canAddField = useMemo12(() => {
-    if (!isPlainObject3(value)) {
+    if (!isPlainObject4(value)) {
       return false;
     }
     if (FlowValueUtils.isFlowValue(value)) {
@@ -3578,7 +3637,7 @@ function useChildList(value, onChange) {
     return true;
   }, [value]);
   const objectListValue = useMemo12(() => {
-    if (isPlainObject3(value)) {
+    if (isPlainObject4(value)) {
       if (FlowValueUtils.isFlowValue(value)) {
         return void 0;
       }
@@ -3681,7 +3740,11 @@ function InputValueRow(props) {
       theme: "borderless",
       icon: /* @__PURE__ */ React44.createElement(IconAddChildren2, null),
       onClick: () => {
-        add();
+        add({
+          type: "constant",
+          content: "",
+          schema: { type: "string" }
+        });
         setCollapse(true);
       }
     }
@@ -3746,7 +3809,13 @@ function InputsValuesTree(props) {
       disabled: readonly,
       icon: /* @__PURE__ */ React45.createElement(IconPlus5, null),
       size: "small",
-      onClick: add
+      onClick: () => {
+        add({
+          type: "constant",
+          content: "",
+          schema: { type: "string" }
+        });
+      }
     },
     I18n15.t("Add")
   ));
@@ -4129,7 +4198,7 @@ var createInferAssignPlugin = defineFormPluginCreator3({
 });
 
 // src/validate/validate-flow-value/index.tsx
-import { isNil, uniq as uniq2 } from "lodash";
+import { isNil } from "lodash";
 import { FeedbackLevel, getNodeScope as getNodeScope7 } from "@flowgram.ai/editor";
 function validateFlowValue(value, ctx) {
   const { node, required, errorMessages } = ctx;
@@ -4153,7 +4222,7 @@ function validateFlowValue(value, ctx) {
     }
   }
   if (value?.type === "template") {
-    const allRefs = getTemplateKeyPaths(value);
+    const allRefs = FlowValueUtils.getTemplateKeyPaths(value);
     for (const ref of allRefs) {
       const variable = getNodeScope7(node).available.getByKeyPath(ref);
       if (!variable) {
@@ -4166,12 +4235,6 @@ function validateFlowValue(value, ctx) {
   }
   return void 0;
 }
-function getTemplateKeyPaths(value) {
-  const keyPathReg = /{{(.*?)}}/g;
-  return uniq2(value.content?.match(keyPathReg) || []).map(
-    (_keyPath) => _keyPath.slice(2, -2).split(".")
-  );
-}
 export {
   AssignRow,
   AssignRows,
@@ -4225,6 +4288,7 @@ export {
   provideBatchOutputsEffect,
   provideJsonSchemaOutputs,
   syncVariableTitle,
+  useObjectList,
   useTypeManager,
   useVariableTree,
   validateFlowValue,