@flowgram.ai/form-materials 0.2.29 → 0.2.31

package/dist/esm/index.js

@@ -524,7 +524,7 @@ var JsonSchemaUtils;
 
 // src/components/variable-selector/use-variable-tree.tsx
 function useVariableTree(params) {
-  const { includeSchema, excludeSchema } = params;
+  const { includeSchema, excludeSchema, customSkip } = params;
   const variables = useAvailableVariables();
   const getVariableTypeIcon = useCallback((variable) => {
     if (variable.meta?.icon) {
@@ -561,7 +561,8 @@ function useVariableTree(params) {
     const key = keyPath.join(".");
     const isSchemaInclude = includeSchema ? JsonSchemaUtils.isASTMatchSchema(type, includeSchema) : true;
     const isSchemaExclude = excludeSchema ? JsonSchemaUtils.isASTMatchSchema(type, excludeSchema) : false;
-    const isSchemaMatch = isSchemaInclude && !isSchemaExclude;
+    const isCustomSkip = customSkip ? customSkip(variable) : false;
+    const isSchemaMatch = isSchemaInclude && !isSchemaExclude && !isCustomSkip;
     if (!isSchemaMatch && !children?.length) {
       return null;
     }
@@ -573,7 +574,8 @@ function useVariableTree(params) {
       icon: getVariableTypeIcon(variable),
       children,
       disabled: !isSchemaMatch,
-      rootMeta: parentFields[0]?.meta
+      rootMeta: parentFields[0]?.meta || variable.meta,
+      isRoot: !parentFields?.length
     };
   };
   return [...variables.slice(0).reverse()].map((_variable) => renderVariable(_variable)).filter(Boolean);
@@ -696,7 +698,7 @@ var VariableSelector = ({
           );
         }
         const rootIcon = renderIcon(_option.rootMeta?.icon || _option?.icon);
-        const rootTitle = /* @__PURE__ */ React3.createElement(UIRootTitle, null, _option.rootMeta?.title ? `${_option.rootMeta?.title} -` : null);
+        const rootTitle = /* @__PURE__ */ React3.createElement(UIRootTitle, null, _option.rootMeta?.title ? `${_option.rootMeta?.title} ${_option.isRoot ? "" : "-"} ` : null);
         return /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement(
           Popover,
           {
@@ -710,7 +712,7 @@ var VariableSelector = ({
               onClose: () => onChange(void 0)
             },
             rootTitle,
-            /* @__PURE__ */ React3.createElement(UIVarName, { $inSelector: true }, _option.label)
+            !_option.isRoot && /* @__PURE__ */ React3.createElement(UIVarName, { $inSelector: true }, _option.label)
           )
         ));
       },
@@ -1744,8 +1746,8 @@ var rules = {
     ["not_contains" /* NOT_CONTAINS */]: "string",
     ["in" /* IN */]: "array",
     ["nin" /* NIN */]: "array",
-    ["is_empty" /* IS_EMPTY */]: "string",
-    ["is_not_empty" /* IS_NOT_EMPTY */]: "string"
+    ["is_empty" /* IS_EMPTY */]: null,
+    ["is_not_empty" /* IS_NOT_EMPTY */]: null
   },
   number: {
     ["eq" /* EQ */]: "number",
@@ -1755,9 +1757,7 @@ var rules = {
     ["lt" /* LT */]: "number",
     ["lte" /* LTE */]: "number",
     ["in" /* IN */]: "array",
-    ["nin" /* NIN */]: "array",
-    ["is_empty" /* IS_EMPTY */]: null,
-    ["is_not_empty" /* IS_NOT_EMPTY */]: null
+    ["nin" /* NIN */]: "array"
   },
   integer: {
     ["eq" /* EQ */]: "number",
@@ -1767,9 +1767,7 @@ var rules = {
     ["lt" /* LT */]: "number",
     ["lte" /* LTE */]: "number",
     ["in" /* IN */]: "array",
-    ["nin" /* NIN */]: "array",
-    ["is_empty" /* IS_EMPTY */]: null,
-    ["is_not_empty" /* IS_NOT_EMPTY */]: null
+    ["nin" /* NIN */]: "array"
   },
   boolean: {
     ["eq" /* EQ */]: "boolean",
@@ -1777,9 +1775,7 @@ var rules = {
     ["is_true" /* IS_TRUE */]: null,
     ["is_false" /* IS_FALSE */]: null,
     ["in" /* IN */]: "array",
-    ["nin" /* NIN */]: "array",
-    ["is_empty" /* IS_EMPTY */]: null,
-    ["is_not_empty" /* IS_NOT_EMPTY */]: null
+    ["nin" /* NIN */]: "array"
   },
   object: {
     ["is_empty" /* IS_EMPTY */]: null,
@@ -1955,18 +1951,19 @@ import { IconDelete, IconPlus as IconPlus2 } from "@douyinfe/semi-icons";
 // src/hooks/use-object-list/index.tsx
 import { useEffect as useEffect3, useState as useState6 } from "react";
 import { nanoid } from "nanoid";
-import { difference } from "lodash";
+import { difference, get as get2, isObject as isObject2, set } from "lodash";
 function genId2() {
   return nanoid();
 }
 function useObjectList({
   value,
-  onChange
+  onChange,
+  sortIndexKey
 }) {
   const [list, setList] = useState6([]);
   useEffect3(() => {
     setList((_prevList) => {
-      const newKeys = Object.keys(value || {});
+      const newKeys = Object.entries(value || {}).sort((a, b) => get2(a[1], sortIndexKey || 0) - get2(b[1], sortIndexKey || 0)).map(([key]) => key);
       const oldKeys = _prevList.map((item) => item.key).filter(Boolean);
       const addKeys = difference(newKeys, oldKeys);
       return _prevList.filter((item) => !item.key || newKeys.includes(item.key)).map((item) => ({
@@ -2003,7 +2000,12 @@ function useObjectList({
       });
       onChange(
         Object.fromEntries(
-          nextList.filter((item) => item.key).map((item) => [item.key, item.value])
+          nextList.filter((item) => item.key).map((item) => [item.key, item.value]).map((_res, idx) => {
+            if (isObject2(_res[1]) && sortIndexKey) {
+              set(_res[1], sortIndexKey, idx);
+            }
+            return _res;
+          })
         )
       );
       return nextList;
@@ -2405,8 +2407,9 @@ var VariableTagWidget = class extends WidgetType {
       );
       return;
     }
-    const rootField = last(v.parentFields);
-    const rootTitle = /* @__PURE__ */ React17.createElement(UIRootTitle2, null, rootField?.meta.title ? `${rootField.meta.title} -` : "");
+    const rootField = last(v.parentFields) || v;
+    const isRoot = v.parentFields.length === 0;
+    const rootTitle = /* @__PURE__ */ React17.createElement(UIRootTitle2, null, rootField?.meta.title ? `${rootField.meta.title} ${isRoot ? "" : "-"} ` : "");
     const rootIcon = this.renderIcon(rootField?.meta.icon);
     this.renderReact(
       /* @__PURE__ */ React17.createElement(
@@ -2414,7 +2417,7 @@ var VariableTagWidget = class extends WidgetType {
         {
           content: /* @__PURE__ */ React17.createElement(UIPopoverContent2, null, rootIcon, rootTitle, /* @__PURE__ */ React17.createElement(UIVarName2, null, v?.keyPath.slice(1).join(".")))
         },
-        /* @__PURE__ */ React17.createElement(UITag2, { prefixIcon: rootIcon }, rootTitle, /* @__PURE__ */ React17.createElement(UIVarName2, null, v?.key))
+        /* @__PURE__ */ React17.createElement(UITag2, { prefixIcon: rootIcon }, rootTitle, !isRoot && /* @__PURE__ */ React17.createElement(UIVarName2, null, v?.key))
       )
     );
   }
@@ -2653,6 +2656,42 @@ function getSuffixByLanguageId(languageId) {
   return "";
 }
 
+// src/components/code-editor/language-features.ts
+import { languages } from "@coze-editor/editor/preset-code";
+import { typescript } from "@coze-editor/editor/language-typescript";
+import { shell } from "@coze-editor/editor/language-shell";
+import { python } from "@coze-editor/editor/language-python";
+import { json } from "@coze-editor/editor/language-json";
+import { mixLanguages } from "@coze-editor/editor";
+languages.register("python", python);
+languages.register("shell", shell);
+languages.register("typescript", typescript);
+languages.register("json", {
+  // mixLanguages is used to solve the problem that interpolation also uses parentheses, which causes incorrect highlighting
+  language: mixLanguages({
+    outerLanguage: json.language
+  }),
+  languageService: json.languageService
+});
+var tsWorkerInit = false;
+var initTsWorker = () => {
+  if (tsWorkerInit) {
+    return;
+  }
+  tsWorkerInit = true;
+  const tsWorker = new Worker(
+    new URL(`@coze-editor/editor/language-typescript/worker`, import.meta.url),
+    { type: "module" }
+  );
+  typescript.languageService.initialize(tsWorker, {
+    compilerOptions: {
+      // eliminate Promise error
+      lib: ["es2015", "dom"],
+      noImplicitAny: false
+    }
+  });
+};
+
 // src/components/code-editor/theme/index.ts
 import { themes } from "@coze-editor/editor/preset-code";
 
@@ -2882,24 +2921,6 @@ var darkTheme = createTheme2({
 themes.register("dark", darkTheme);
 themes.register("light", lightTheme);
 
-// src/components/code-editor/language-features.ts
-import { languages } from "@coze-editor/editor/preset-code";
-import { typescript } from "@coze-editor/editor/language-typescript";
-import { shell } from "@coze-editor/editor/language-shell";
-import { python } from "@coze-editor/editor/language-python";
-import { json } from "@coze-editor/editor/language-json";
-import { mixLanguages } from "@coze-editor/editor";
-languages.register("python", python);
-languages.register("typescript", typescript);
-languages.register("shell", shell);
-languages.register("json", {
-  // mixLanguages is used to solve the problem that interpolation also uses parentheses, which causes incorrect highlighting
-  language: mixLanguages({
-    outerLanguage: json.language
-  }),
-  languageService: json.languageService
-});
-
 // src/components/code-editor/index.tsx
 var OriginCodeEditor = createRenderer(preset2, [
   EditorView4.theme({
@@ -2920,6 +2941,11 @@ function CodeEditor({
   readonly
 }) {
   const editorRef = useRef4(null);
+  useEffect7(() => {
+    if (languageId === "typescript") {
+      initTsWorker();
+    }
+  }, [languageId]);
   useEffect7(() => {
     if (editorRef.current?.getValue() !== value) {
       editorRef.current?.setValue(String(value || ""));
@@ -3220,8 +3246,8 @@ function JsonEditorWithVariables(props) {
 }
 
 // src/components/inputs-values/index.tsx
-import React26 from "react";
-import { Button as Button4, IconButton as IconButton5, Input as Input5 } from "@douyinfe/semi-ui";
+import React27 from "react";
+import { Button as Button4, IconButton as IconButton5 } from "@douyinfe/semi-ui";
 import { IconDelete as IconDelete2, IconPlus as IconPlus3 } from "@douyinfe/semi-icons";
 
 // src/components/inputs-values/styles.tsx
@@ -3238,43 +3264,76 @@ var UIRow3 = styled9.div`
   gap: 5px;
 `;
 
+// src/components/inputs-values/components/blur-input.tsx
+import React26, { useEffect as useEffect9, useState as useState10 } from "react";
+import Input5 from "@douyinfe/semi-ui/lib/es/input";
+function BlurInput2(props) {
+  const [value, setValue] = useState10("");
+  useEffect9(() => {
+    setValue(props.value);
+  }, [props.value]);
+  return /* @__PURE__ */ React26.createElement(
+    Input5,
+    {
+      ...props,
+      value,
+      onChange: (value2) => {
+        setValue(value2);
+      },
+      onBlur: (e) => props.onChange?.(value, e)
+    }
+  );
+}
+
 // src/components/inputs-values/index.tsx
-function InputsValues({ value, onChange, style, readonly, constantProps }) {
+function InputsValues({
+  value,
+  onChange,
+  style,
+  readonly,
+  constantProps,
+  schema,
+  hasError
+}) {
   const { list, updateKey, updateValue, remove, add } = useObjectList({
     value,
-    onChange
+    onChange,
+    sortIndexKey: "extra.index"
   });
-  return /* @__PURE__ */ React26.createElement("div", null, /* @__PURE__ */ React26.createElement(UIRows2, { style }, list.map((item) => /* @__PURE__ */ React26.createElement(UIRow3, { key: item.id }, /* @__PURE__ */ React26.createElement(
-    Input5,
+  return /* @__PURE__ */ React27.createElement("div", null, /* @__PURE__ */ React27.createElement(UIRows2, { style }, list.map((item) => /* @__PURE__ */ React27.createElement(UIRow3, { key: item.id }, /* @__PURE__ */ React27.createElement(
+    BlurInput2,
     {
       style: { width: 100, minWidth: 100, maxWidth: 100 },
       disabled: readonly,
       size: "small",
       value: item.key,
-      onChange: (v) => updateKey(item.id, v)
+      onChange: (v) => updateKey(item.id, v),
+      placeholder: "Input Key"
     }
-  ), /* @__PURE__ */ React26.createElement(
+  ), /* @__PURE__ */ React27.createElement(
     DynamicValueInput,
     {
       style: { flexGrow: 1 },
       readonly,
       value: item.value,
       onChange: (v) => updateValue(item.id, v),
+      schema,
+      hasError,
       constantProps: {
         ...constantProps,
         strategies: [...constantProps?.strategies || []]
       }
     }
-  ), /* @__PURE__ */ React26.createElement(
+  ), /* @__PURE__ */ React27.createElement(
     IconButton5,
     {
       disabled: readonly,
       theme: "borderless",
-      icon: /* @__PURE__ */ React26.createElement(IconDelete2, { size: "small" }),
+      icon: /* @__PURE__ */ React27.createElement(IconDelete2, { size: "small" }),
       size: "small",
       onClick: () => remove(item.id)
     }
-  )))), /* @__PURE__ */ React26.createElement(Button4, { disabled: readonly, icon: /* @__PURE__ */ React26.createElement(IconPlus3, null), size: "small", onClick: add }, "Add"));
+  )))), /* @__PURE__ */ React27.createElement(Button4, { disabled: readonly, icon: /* @__PURE__ */ React27.createElement(IconPlus3, null), size: "small", onClick: add }, "Add"));
 }
 
 // src/effects/provide-batch-input/index.ts
@@ -3313,7 +3372,7 @@ var provideBatchInputEffect = createEffectFromVariableProvider({
 });
 
 // src/effects/auto-rename-ref/index.ts
-import { isArray, isObject as isObject2, uniq } from "lodash";
+import { isArray, isObject as isObject3, uniq } from "lodash";
 import {
   DataEvent,
   VariableFieldKeyRenameService
@@ -3383,7 +3442,7 @@ function isTemplate(value) {
   return value?.type === "template" && typeof value?.content === "string";
 }
 function traverseRef(name, value, cb) {
-  if (isObject2(value)) {
+  if (isObject3(value)) {
     if (isRef(value)) {
       cb(name, value);
       return;
@@ -3522,7 +3581,7 @@ var createBatchOutputsFormPlugin = defineFormPluginCreator({
 });
 
 // src/form-plugins/infer-inputs-plugin/index.ts
-import { get as get2, set } from "lodash";
+import { get as get3, set as set2 } from "lodash";
 import {
   defineFormPluginCreator as defineFormPluginCreator2,
   getNodePrivateScope as getNodePrivateScope2,
@@ -3534,11 +3593,11 @@ var createInferInputsPlugin = defineFormPluginCreator2({
       return;
     }
     addFormatOnSubmit((formData, ctx) => {
-      set(
+      set2(
         formData,
         targetKey,
         infer(
-          get2(formData, sourceKey),
+          get3(formData, sourceKey),
           scope === "private" ? getNodePrivateScope2(ctx.node) : getNodeScope2(ctx.node)
         )
       );