@flowgram.ai/form-materials 0.4.9 → 0.4.11

package/dist/esm/components/assign-rows/index.mjs

@@ -0,0 +1,51 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { FieldArray } from "@flowgram.ai/editor";
+import { Button } from "@douyinfe/semi-ui";
+import { IconPlus } from "@douyinfe/semi-icons";
+import { AssignRow } from "../assign-row/index.mjs";
+function AssignRows(props) {
+    const { name, readonly } = props;
+    return /*#__PURE__*/ jsx(FieldArray, {
+        name: name,
+        children: ({ field })=>/*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    field.map((childField, index)=>/*#__PURE__*/ jsx(AssignRow, {
+                            readonly: readonly,
+                            value: childField.value,
+                            onChange: (value)=>{
+                                childField.onChange(value);
+                            },
+                            onDelete: ()=>field.remove(index)
+                        }, childField.key)),
+                    /*#__PURE__*/ jsxs("div", {
+                        style: {
+                            display: 'flex',
+                            gap: 5
+                        },
+                        children: [
+                            /*#__PURE__*/ jsx(Button, {
+                                size: "small",
+                                theme: "borderless",
+                                icon: /*#__PURE__*/ jsx(IconPlus, {}),
+                                onClick: ()=>field.append({
+                                        operator: 'assign'
+                                    }),
+                                children: "Assign"
+                            }),
+                            /*#__PURE__*/ jsx(Button, {
+                                size: "small",
+                                theme: "borderless",
+                                icon: /*#__PURE__*/ jsx(IconPlus, {}),
+                                onClick: ()=>field.append({
+                                        operator: 'declare'
+                                    }),
+                                children: "Declaration"
+                            })
+                        ]
+                    })
+                ]
+            })
+    });
+}
+export { AssignRows };

package/dist/esm/components/batch-outputs/index.mjs

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { I18n } from "@flowgram.ai/editor";
+import { Button, Input } from "@douyinfe/semi-ui";
+import { IconDelete, IconPlus } from "@douyinfe/semi-icons";
+import { useObjectList } from "../../hooks/index.mjs";
+import { InjectVariableSelector } from "../variable-selector/index.mjs";
+import { UIRow, UIRows } from "./styles.mjs";
+function BatchOutputs(props) {
+    const { readonly, style } = props;
+    const { list, add, updateKey, updateValue, remove } = useObjectList(props);
+    return /*#__PURE__*/ jsxs("div", {
+        children: [
+            /*#__PURE__*/ jsx(UIRows, {
+                style: style,
+                children: list.map((item)=>/*#__PURE__*/ jsxs(UIRow, {
+                        children: [
+                            /*#__PURE__*/ jsx(Input, {
+                                style: {
+                                    width: 100
+                                },
+                                disabled: readonly,
+                                size: "small",
+                                value: item.key,
+                                onChange: (v)=>updateKey(item.id, v)
+                            }),
+                            /*#__PURE__*/ jsx(InjectVariableSelector, {
+                                style: {
+                                    flexGrow: 1
+                                },
+                                readonly: readonly,
+                                value: item.value?.content,
+                                onChange: (v)=>updateValue(item.id, {
+                                        type: 'ref',
+                                        content: v
+                                    })
+                            }),
+                            /*#__PURE__*/ jsx(Button, {
+                                disabled: readonly,
+                                icon: /*#__PURE__*/ jsx(IconDelete, {}),
+                                size: "small",
+                                onClick: ()=>remove(item.id)
+                            })
+                        ]
+                    }, item.id))
+            }),
+            /*#__PURE__*/ jsx(Button, {
+                disabled: readonly,
+                icon: /*#__PURE__*/ jsx(IconPlus, {}),
+                size: "small",
+                onClick: ()=>add(),
+                children: I18n.t('Add')
+            })
+        ]
+    });
+}
+export { BatchOutputs };

package/dist/esm/components/batch-outputs/styles.mjs

@@ -0,0 +1,13 @@
+import styled_components from "styled-components";
+const UIRows = styled_components.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 10px;
+`;
+const UIRow = styled_components.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`;
+export { UIRow, UIRows };

package/dist/esm/components/batch-variable-selector/index.mjs

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { PrivateScopeProvider } from "@flowgram.ai/editor";
+import { VariableSelector } from "../variable-selector/index.mjs";
+const batchVariableSchema = {
+    type: 'array',
+    extra: {
+        weak: true
+    }
+};
+function BatchVariableSelector(props) {
+    return /*#__PURE__*/ jsx(PrivateScopeProvider, {
+        children: /*#__PURE__*/ jsx(VariableSelector, {
+            ...props,
+            includeSchema: batchVariableSchema
+        })
+    });
+}
+export { BatchVariableSelector };

package/dist/esm/components/blur-input/index.mjs

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Input } from "@douyinfe/semi-ui";
+function BlurInput(props) {
+    const [value, setValue] = useState('');
+    useEffect(()=>{
+        setValue(props.value);
+    }, [
+        props.value
+    ]);
+    return /*#__PURE__*/ jsx(Input, {
+        ...props,
+        value: value,
+        onChange: (value)=>{
+            setValue(value);
+        },
+        onBlur: (e)=>props.onChange?.(value, e)
+    });
+}
+export { BlurInput };

package/dist/esm/components/code-editor/editor.mjs

@@ -0,0 +1,55 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { ActiveLinePlaceholder, EditorProvider, createRenderer } from "@flowgram.ai/coze-editor/react";
+import preset_code from "@flowgram.ai/coze-editor/preset-code";
+import { EditorView } from "@codemirror/view";
+import { getSuffixByLanguageId } from "./utils.mjs";
+import "./theme/index.mjs";
+import "./language-features.mjs";
+const OriginCodeEditor = createRenderer(preset_code, [
+    EditorView.theme({
+        '&.cm-focused': {
+            outline: 'none'
+        }
+    })
+]);
+function CodeEditor({ value, onChange, languageId = 'python', theme = 'light', children, placeholder, activeLinePlaceholder, options, readonly }) {
+    const editorRef = useRef(null);
+    useEffect(()=>{
+        if (editorRef.current?.getValue() !== value) editorRef.current?.setValue(String(value || ''));
+    }, [
+        value
+    ]);
+    useEffect(()=>{
+        if ("typescript" === languageId) import("./init-worker.mjs").then((module)=>{
+            module.initTsWorker();
+        });
+    }, [
+        languageId
+    ]);
+    return /*#__PURE__*/ jsx(EditorProvider, {
+        children: /*#__PURE__*/ jsxs(OriginCodeEditor, {
+            defaultValue: String(value || ''),
+            options: {
+                uri: `file:///untitled${getSuffixByLanguageId(languageId)}`,
+                languageId,
+                theme,
+                placeholder,
+                readOnly: readonly,
+                editable: !readonly,
+                ...options || {}
+            },
+            didMount: (editor)=>{
+                editorRef.current = editor;
+            },
+            onChange: (e)=>onChange?.(e.value),
+            children: [
+                activeLinePlaceholder && /*#__PURE__*/ jsx(ActiveLinePlaceholder, {
+                    children: activeLinePlaceholder
+                }),
+                children
+            ]
+        })
+    });
+}
+export { CodeEditor };

package/dist/esm/components/code-editor/index.mjs

@@ -0,0 +1,5 @@
+import { lazySuspense } from "../../shared/index.mjs";
+const CodeEditor = lazySuspense(()=>import("./editor.mjs").then((module)=>({
+            default: module.CodeEditor
+        })));
+export { CodeEditor };

package/dist/esm/components/code-editor/init-worker.mjs

@@ -0,0 +1,19 @@
+import { typescript } from "@flowgram.ai/coze-editor/language-typescript";
+let tsWorkerInit = false;
+const initTsWorker = ()=>{
+    if (tsWorkerInit) return;
+    tsWorkerInit = true;
+    const tsWorker = new Worker(new URL("@flowgram.ai/coze-editor/language-typescript/worker", import.meta.url), {
+        type: 'module'
+    });
+    typescript.languageService.initialize(tsWorker, {
+        compilerOptions: {
+            lib: [
+                'es2015',
+                'dom'
+            ],
+            noImplicitAny: false
+        }
+    });
+};
+export { initTsWorker };

package/dist/esm/components/code-editor/language-features.mjs

@@ -0,0 +1,15 @@
+import { languages } from "@flowgram.ai/coze-editor/preset-code";
+import { typescript } from "@flowgram.ai/coze-editor/language-typescript";
+import { shell } from "@flowgram.ai/coze-editor/language-shell";
+import { python } from "@flowgram.ai/coze-editor/language-python";
+import { json } from "@flowgram.ai/coze-editor/language-json";
+import { mixLanguages } from "@flowgram.ai/coze-editor";
+languages.register('python', python);
+languages.register('shell', shell);
+languages.register("typescript", typescript);
+languages.register('json', {
+    language: mixLanguages({
+        outerLanguage: json.language
+    }),
+    languageService: json.languageService
+});

package/dist/esm/components/code-editor/theme/dark.mjs

@@ -0,0 +1,154 @@
+import { createTheme, tags } from "@flowgram.ai/coze-editor/preset-code";
+const colors = {
+    background: '#0D1117',
+    comment: '#8B949E',
+    key: '#7DD3FC',
+    variable: '#F472B6',
+    string: '#34D399',
+    number: '#FBBF24',
+    boolean: '#A78BFA',
+    null: '#A78BFA',
+    separator: '#E6EDF3'
+};
+const darkTheme = createTheme({
+    variant: 'dark',
+    settings: {
+        background: colors.background,
+        foreground: '#E6EDF3',
+        caret: '#7DD3FC',
+        selection: '#264F7833',
+        gutterBackground: colors.background,
+        gutterForeground: '#6E7681',
+        gutterBorderColor: 'transparent',
+        gutterBorderWidth: 0,
+        lineHighlight: '#21262D',
+        bracketColors: [
+            '#FBBF24',
+            '#A78BFA',
+            '#7DD3FC'
+        ],
+        tooltip: {
+            backgroundColor: '#21262D',
+            color: '#E6EDF3',
+            border: '1px solid #30363D'
+        },
+        link: {
+            color: '#58A6FF'
+        },
+        completionItemHover: {
+            backgroundColor: '#21262D'
+        },
+        completionItemSelected: {
+            backgroundColor: '#1F6EEB'
+        },
+        completionItemIcon: {
+            color: '#8B949E'
+        },
+        completionItemLabel: {
+            color: '#E6EDF3'
+        },
+        completionItemInfo: {
+            color: '#8B949E'
+        },
+        completionItemDetail: {
+            color: '#6E7681'
+        }
+    },
+    styles: [
+        {
+            tag: tags.comment,
+            color: colors.comment
+        },
+        {
+            tag: [
+                tags.propertyName
+            ],
+            color: colors.key
+        },
+        {
+            tag: [
+                tags.string
+            ],
+            color: colors.string
+        },
+        {
+            tag: [
+                tags.number
+            ],
+            color: colors.number
+        },
+        {
+            tag: [
+                tags.bool
+            ],
+            color: colors.boolean
+        },
+        {
+            tag: [
+                tags["null"]
+            ],
+            color: colors.null
+        },
+        {
+            tag: [
+                tags.separator
+            ],
+            color: colors.separator
+        },
+        {
+            tag: [
+                tags.definitionKeyword
+            ],
+            color: '#C084FC'
+        },
+        {
+            tag: [
+                tags.modifier
+            ],
+            color: '#C084FC'
+        },
+        {
+            tag: [
+                tags.controlKeyword
+            ],
+            color: '#C084FC'
+        },
+        {
+            tag: [
+                tags.operatorKeyword
+            ],
+            color: '#C084FC'
+        },
+        {
+            tag: [
+                tags.heading
+            ],
+            color: '#7DD3FC'
+        },
+        {
+            tag: [
+                tags.processingInstruction
+            ],
+            color: '#7DD3FC'
+        },
+        {
+            tag: [
+                tags.standard(tags.variableName)
+            ],
+            color: '#34D399'
+        },
+        {
+            tag: [
+                tags.attributeName
+            ],
+            color: '#FBBF24'
+        },
+        {
+            tag: [
+                tags.special(tags.string)
+            ],
+            color: '#7DD3FC'
+        }
+    ]
+});
+export { darkTheme };

package/dist/esm/components/code-editor/theme/index.mjs

@@ -0,0 +1,5 @@
+import { themes } from "@flowgram.ai/coze-editor/preset-code";
+import { lightTheme } from "./light.mjs";
+import { darkTheme } from "./dark.mjs";
+themes.register('dark', darkTheme);
+themes.register('light', lightTheme);

package/dist/esm/components/code-editor/theme/light.mjs

@@ -0,0 +1,161 @@
+import { createTheme, tags } from "@flowgram.ai/coze-editor/preset-code";
+const colors = {
+    background: '#FFFFFF',
+    comment: '#6B7280',
+    key: '#2563EB',
+    variable: '#DC2626',
+    string: '#059669',
+    number: '#EA580C',
+    boolean: '#7C3AED',
+    null: '#7C3AED',
+    separator: '#374151'
+};
+const lightTheme = createTheme({
+    variant: 'light',
+    settings: {
+        background: '#FFFFFF',
+        foreground: '#1F2937',
+        caret: '#2563EB',
+        selection: '#E5E7EB',
+        gutterBackground: '#F9FAFB',
+        gutterForeground: '#6B7280',
+        gutterBorderColor: 'transparent',
+        gutterBorderWidth: 0,
+        lineHighlight: '#F3F4F680',
+        bracketColors: [
+            '#F59E0B',
+            '#8B5CF6',
+            '#06B6D4'
+        ],
+        tooltip: {
+            backgroundColor: '#FFFFFF',
+            color: '#1F2937',
+            border: '1px solid #E5E7EB',
+            boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'
+        },
+        link: {
+            color: '#2563EB'
+        },
+        completionItemHover: {
+            backgroundColor: '#F3F4F6'
+        },
+        completionItemSelected: {
+            backgroundColor: '#E5E7EB'
+        },
+        completionItemIcon: {
+            color: '#4B5563'
+        },
+        completionItemLabel: {
+            color: '#1F2937'
+        },
+        completionItemInfo: {
+            color: '#4B5563'
+        },
+        completionItemDetail: {
+            color: '#6B7280'
+        }
+    },
+    styles: [
+        {
+            tag: tags.comment,
+            color: colors.comment
+        },
+        {
+            tag: [
+                tags.propertyName
+            ],
+            color: colors.key
+        },
+        {
+            tag: [
+                tags.variableName
+            ],
+            color: colors.variable
+        },
+        {
+            tag: [
+                tags.string
+            ],
+            color: colors.string
+        },
+        {
+            tag: [
+                tags.number
+            ],
+            color: colors.number
+        },
+        {
+            tag: [
+                tags.bool
+            ],
+            color: colors.boolean
+        },
+        {
+            tag: [
+                tags["null"]
+            ],
+            color: colors.null
+        },
+        {
+            tag: [
+                tags.separator
+            ],
+            color: colors.separator
+        },
+        {
+            tag: [
+                tags.heading
+            ],
+            color: '#2563EB'
+        },
+        {
+            tag: [
+                tags.processingInstruction
+            ],
+            color: '#2563EB'
+        },
+        {
+            tag: [
+                tags.definitionKeyword
+            ],
+            color: '#9333EA'
+        },
+        {
+            tag: [
+                tags.modifier
+            ],
+            color: '#9333EA'
+        },
+        {
+            tag: [
+                tags.controlKeyword
+            ],
+            color: '#9333EA'
+        },
+        {
+            tag: [
+                tags.operatorKeyword
+            ],
+            color: '#9333EA'
+        },
+        {
+            tag: [
+                tags.standard(tags.variableName)
+            ],
+            color: '#059669'
+        },
+        {
+            tag: [
+                tags.attributeName
+            ],
+            color: '#EA580C'
+        },
+        {
+            tag: [
+                tags.special(tags.string)
+            ],
+            color: '#2563EB'
+        }
+    ]
+});
+export { lightTheme };

package/dist/esm/components/code-editor/utils.mjs

@@ -0,0 +1,8 @@
+function getSuffixByLanguageId(languageId) {
+    if ('python' === languageId) return '.py';
+    if ("typescript" === languageId) return '.ts';
+    if ('shell' === languageId) return '.sh';
+    if ('json' === languageId) return '.json';
+    return '';
+}
+export { getSuffixByLanguageId };

package/dist/esm/components/code-editor-mini/index.mjs

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import styled_components from "styled-components";
+import { CodeEditor } from "../code-editor/index.mjs";
+const UIMini = styled_components.div`
+  .ͼ1 .cm-content {
+  }
+`;
+function CodeEditorMini(props) {
+    return /*#__PURE__*/ jsx(UIMini, {
+        children: /*#__PURE__*/ jsx(CodeEditor, {
+            ...props,
+            options: {
+                lineNumbersGutter: false,
+                foldGutter: false,
+                minHeight: 24,
+                ...props.options || {}
+            }
+        })
+    });
+}
+export { CodeEditorMini };