@flowgram.ai/form-materials 0.1.0-alpha.15 → 0.1.0-alpha.16

package/dist/cjs/plugins/json-schema-preset/type-definition/string.js

@@ -30,6 +30,7 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 require("react");
 const editor_namespaceObject = require("@flowgram.ai/editor");
 const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
+const op_js_namespaceObject = require("../../../components/condition-context/op.js");
 const stringRegistry = {
     type: 'string',
     ConstantRenderer: (props)=>props?.enableMultiLineStr ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.TextArea, {
@@ -43,7 +44,35 @@ const stringRegistry = {
             placeholder: editor_namespaceObject.I18n.t('Please Input String'),
             disabled: props.readonly,
             ...props
-        })
+        }),
+    conditionRule: {
+        [op_js_namespaceObject.ConditionPresetOp.EQ]: {
+            type: 'string'
+        },
+        [op_js_namespaceObject.ConditionPresetOp.NEQ]: {
+            type: 'string'
+        },
+        [op_js_namespaceObject.ConditionPresetOp.CONTAINS]: {
+            type: 'string'
+        },
+        [op_js_namespaceObject.ConditionPresetOp.NOT_CONTAINS]: {
+            type: 'string'
+        },
+        [op_js_namespaceObject.ConditionPresetOp.IN]: {
+            type: 'array',
+            items: {
+                type: 'string'
+            }
+        },
+        [op_js_namespaceObject.ConditionPresetOp.NIN]: {
+            type: 'array',
+            items: {
+                type: 'string'
+            }
+        },
+        [op_js_namespaceObject.ConditionPresetOp.IS_EMPTY]: null,
+        [op_js_namespaceObject.ConditionPresetOp.IS_NOT_EMPTY]: null
+    }
 };
 exports.stringRegistry = __webpack_exports__.stringRegistry;
 for(var __webpack_i__ in __webpack_exports__)if (-1 === [

package/dist/cjs/plugins/json-schema-preset/types.js

@@ -0,0 +1,18 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+for(var __webpack_i__ in __webpack_exports__)exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/shared/flow-value/utils.js

@@ -57,34 +57,48 @@ const external_schema_js_namespaceObject = require("./schema.js");
     function* traverse(value, options) {
         const { includeTypes = [
             'ref',
-            'template'
-        ], path = '' } = options;
+            'template',
+            'expression',
+            'constant'
+        ], path = '', pathArr = [] } = options || {};
         if ((0, external_lodash_es_namespaceObject.isPlainObject)(value)) {
             if (isRef(value) && includeTypes.includes('ref')) return void (yield {
                 value,
-                path
+                path,
+                pathArr
             });
             if (isTemplate(value) && includeTypes.includes('template')) return void (yield {
                 value,
-                path
+                path,
+                pathArr
             });
             if (isExpression(value) && includeTypes.includes('expression')) return void (yield {
                 value,
-                path
+                path,
+                pathArr
             });
             if (isConstant(value) && includeTypes.includes('constant')) return void (yield {
                 value,
-                path
+                path,
+                pathArr
             });
             for (const [_key, _value] of Object.entries(value))yield* traverse(_value, {
                 ...options,
-                path: `${path}.${_key}`
+                path: path ? `${path}.${_key}` : _key,
+                pathArr: [
+                    ...pathArr,
+                    _key
+                ]
             });
             return;
         }
         if ((0, external_lodash_es_namespaceObject.isArray)(value)) for (const [_idx, _value] of value.entries())yield* traverse(_value, {
             ...options,
-            path: `${path}[${_idx}]`
+            path: path ? `${path}[${_idx}]` : `[${_idx}]`,
+            pathArr: [
+                ...pathArr,
+                `[${_idx}]`
+            ]
         });
     }
     FlowValueUtils.traverse = traverse;

package/dist/cjs/shared/inject-material/index.js

@@ -39,13 +39,13 @@ const external_react_namespaceObject = require("react");
 var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
 const editor_namespaceObject = require("@flowgram.ai/editor");
 function createInjectMaterial(Component, params) {
+    const renderKey = params?.renderKey || Component.renderKey || Component.name || '';
     const InjectComponent = (props)=>{
         const container = (0, editor_namespaceObject.usePlaygroundContainer)();
         if (!container?.isBound(editor_namespaceObject.FlowRendererRegistry)) return /*#__PURE__*/ external_react_default().createElement(Component, {
             ...props
         });
         const rendererRegistry = container.get(editor_namespaceObject.FlowRendererRegistry);
-        const renderKey = params?.renderKey || Component.renderKey || Component.name || '';
         const renderer = rendererRegistry.tryToGetRendererComponent(renderKey);
         if (renderer?.type !== editor_namespaceObject.FlowRendererComponentType.REACT) return /*#__PURE__*/ external_react_default().createElement(Component, {
             ...props
@@ -54,6 +54,7 @@ function createInjectMaterial(Component, params) {
             ...props
         });
     };
+    InjectComponent.renderKey = renderKey;
     return InjectComponent;
 }
 exports.createInjectMaterial = __webpack_exports__.createInjectMaterial;

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

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-import input from "@douyinfe/semi-ui/lib/es/input";
+import { Input } from "@douyinfe/semi-ui";
 function BlurInput(props) {
     const [value, setValue] = useState('');
     useEffect(()=>{
@@ -8,7 +8,7 @@ function BlurInput(props) {
     }, [
         props.value
     ]);
-    return /*#__PURE__*/ jsx(input, {
+    return /*#__PURE__*/ jsx(Input, {
         ...props,
         value: value,
         onChange: (value)=>{

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

@@ -0,0 +1,18 @@
+import { CodeEditorFactory } from "./factory.mjs";
+import { loadTypescriptLanguage } from "./editor-ts.mjs";
+import { loadSqlLanguage } from "./editor-sql.mjs";
+import { loadShellLanguage } from "./editor-shell.mjs";
+import { loadPythonLanguage } from "./editor-python.mjs";
+import { loadJsonLanguage } from "./editor-json.mjs";
+const languageLoaders = {
+    json: loadJsonLanguage,
+    python: loadPythonLanguage,
+    sql: loadSqlLanguage,
+    typescript: loadTypescriptLanguage,
+    shell: loadShellLanguage
+};
+const CodeEditor = CodeEditorFactory((languageId)=>languageLoaders[languageId]?.(languageId), {
+    displayName: 'CodeEditor',
+    fixLanguageId: void 0
+});
+export { CodeEditor };

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

@@ -0,0 +1,16 @@
+import { languages } from "@flowgram.ai/coze-editor/preset-code";
+import { mixLanguages } from "@flowgram.ai/coze-editor";
+import { CodeEditorFactory } from "./factory.mjs";
+const loadJsonLanguage = ()=>import("@flowgram.ai/coze-editor/language-json").then((module)=>{
+        languages.register('json', {
+            language: mixLanguages({
+                outerLanguage: module.json.language
+            }),
+            languageService: module.json.languageService
+        });
+    });
+const JsonCodeEditor = CodeEditorFactory(loadJsonLanguage, {
+    displayName: 'JsonCodeEditor',
+    fixLanguageId: 'json'
+});
+export { JsonCodeEditor, loadJsonLanguage };

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

@@ -0,0 +1,8 @@
+import { languages } from "@flowgram.ai/coze-editor/preset-code";
+import { CodeEditorFactory } from "./factory.mjs";
+const loadPythonLanguage = ()=>import("@flowgram.ai/coze-editor/language-python").then((module)=>languages.register('python', module.python));
+const PythonCodeEditor = CodeEditorFactory(loadPythonLanguage, {
+    displayName: 'PythonCodeEditor',
+    fixLanguageId: 'python'
+});
+export { PythonCodeEditor, loadPythonLanguage };

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

@@ -0,0 +1,8 @@
+import { languages } from "@flowgram.ai/coze-editor/preset-code";
+import { CodeEditorFactory } from "./factory.mjs";
+const loadShellLanguage = ()=>import("@flowgram.ai/coze-editor/language-shell").then((module)=>languages.register('shell', module.shell));
+const ShellCodeEditor = CodeEditorFactory(loadShellLanguage, {
+    displayName: 'ShellCodeEditor',
+    fixLanguageId: 'shell'
+});
+export { ShellCodeEditor, loadShellLanguage };

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

@@ -0,0 +1,16 @@
+import { languages } from "@flowgram.ai/coze-editor/preset-code";
+import { mixLanguages } from "@flowgram.ai/coze-editor";
+import { CodeEditorFactory } from "./factory.mjs";
+const loadSqlLanguage = ()=>import("@flowgram.ai/coze-editor/language-sql").then((module)=>{
+        languages.register('sql', {
+            ...module.sql,
+            language: mixLanguages({
+                outerLanguage: module.sql.language
+            })
+        });
+    });
+const SQLCodeEditor = CodeEditorFactory(loadSqlLanguage, {
+    displayName: 'SQLCodeEditor',
+    fixLanguageId: 'sql'
+});
+export { SQLCodeEditor, loadSqlLanguage };

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

@@ -0,0 +1,22 @@
+import { languages } from "@flowgram.ai/coze-editor/preset-code";
+import { CodeEditorFactory } from "./factory.mjs";
+const loadTypescriptLanguage = ()=>import("@flowgram.ai/coze-editor/language-typescript").then((module)=>{
+        languages.register("typescript", module.typescript);
+        const tsWorker = new Worker(new URL("@flowgram.ai/coze-editor/language-typescript/worker", import.meta.url), {
+            type: 'module'
+        });
+        module.typescript.languageService.initialize(tsWorker, {
+            compilerOptions: {
+                lib: [
+                    'es2015',
+                    'dom'
+                ],
+                noImplicitAny: false
+            }
+        });
+    });
+const TypeScriptCodeEditor = CodeEditorFactory(loadTypescriptLanguage, {
+    displayName: 'TypeScriptCodeEditor',
+    fixLanguageId: "typescript"
+});
+export { TypeScriptCodeEditor, loadTypescriptLanguage };

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

@@ -1,11 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
+import styled_components, { css } from "styled-components";
 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': {
@@ -13,43 +12,49 @@ const OriginCodeEditor = createRenderer(preset_code, [
         }
     })
 ]);
-function CodeEditor({ value, onChange, languageId = 'python', theme = 'light', children, placeholder, activeLinePlaceholder, options, readonly }) {
+const UIContainer = styled_components.div`
+  ${({ $mini })=>$mini && css`
+      height: 24px;
+    `}
+`;
+function BaseCodeEditor({ value, onChange, languageId = 'python', theme = 'light', children, placeholder, activeLinePlaceholder, options, readonly, mini }) {
     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
-            ]
+    return /*#__PURE__*/ jsx(UIContainer, {
+        $mini: mini,
+        children: /*#__PURE__*/ jsx(EditorProvider, {
+            children: /*#__PURE__*/ jsxs(OriginCodeEditor, {
+                defaultValue: String(value || ''),
+                options: {
+                    uri: `file:///untitled${getSuffixByLanguageId(languageId)}`,
+                    languageId,
+                    theme,
+                    placeholder,
+                    readOnly: readonly,
+                    editable: !readonly,
+                    ...mini ? {
+                        lineNumbersGutter: false,
+                        foldGutter: false,
+                        minHeight: 24
+                    } : {},
+                    ...options || {}
+                },
+                didMount: (editor)=>{
+                    editorRef.current = editor;
+                },
+                onChange: (e)=>onChange?.(e.value),
+                children: [
+                    activeLinePlaceholder && /*#__PURE__*/ jsx(ActiveLinePlaceholder, {
+                        children: activeLinePlaceholder
+                    }),
+                    children
+                ]
+            })
         })
     });
 }
-export { CodeEditor };
+export { BaseCodeEditor };

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

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { languages } from "@flowgram.ai/coze-editor/preset-code";
+import { Skeleton } from "@douyinfe/semi-ui";
+import { lazySuspense } from "../../shared/index.mjs";
+const BaseCodeEditor = lazySuspense(()=>Promise.all([
+        import("./editor.mjs"),
+        import("./theme/index.mjs")
+    ]).then(([editorModule])=>({
+            default: editorModule.BaseCodeEditor
+        })));
+const CodeEditorFactory = (loadLanguage, { displayName, fixLanguageId })=>{
+    const EditorWithLoad = (props)=>{
+        const { languageId = fixLanguageId } = props;
+        if (!languageId) throw new Error('CodeEditorFactory: languageId is required');
+        const [loaded, setLoaded] = useState(useMemo(()=>!!languages.get(languageId), [
+            languageId
+        ]));
+        useEffect(()=>{
+            if (!loaded && loadLanguage) loadLanguage(languageId).then(()=>{
+                setLoaded(true);
+            });
+        }, [
+            languageId,
+            loaded
+        ]);
+        if (!loaded) return /*#__PURE__*/ jsx(Skeleton, {});
+        return /*#__PURE__*/ jsx(BaseCodeEditor, {
+            ...props,
+            languageId: fixLanguageId || languageId
+        });
+    };
+    EditorWithLoad.displayName = displayName;
+    return EditorWithLoad;
+};
+export { BaseCodeEditor, CodeEditorFactory };

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

@@ -1,5 +1,8 @@
-import { lazySuspense } from "../../shared/index.mjs";
-const CodeEditor = lazySuspense(()=>import("./editor.mjs").then((module)=>({
-            default: module.CodeEditor
-        })));
-export { CodeEditor };
+import { CodeEditor } from "./editor-all.mjs";
+import { TypeScriptCodeEditor } from "./editor-ts.mjs";
+import { ShellCodeEditor } from "./editor-shell.mjs";
+import { JsonCodeEditor } from "./editor-json.mjs";
+import { SQLCodeEditor } from "./editor-sql.mjs";
+import { PythonCodeEditor } from "./editor-python.mjs";
+import { BaseCodeEditor } from "./editor.mjs";
+export { BaseCodeEditor, CodeEditor, JsonCodeEditor, PythonCodeEditor, SQLCodeEditor, ShellCodeEditor, TypeScriptCodeEditor };

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

@@ -1,24 +1,42 @@
 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'
+    background: '#24292e',
+    foreground: '#d1d5da',
+    selection: '#3392FF44',
+    cursor: '#c8e1ff',
+    dropdownBackground: '#24292e',
+    dropdownBorder: '#1b1f23',
+    activeLine: '#4d566022',
+    matchingBracket: '#888892',
+    keyword: '#9197F1',
+    storage: '#f97583',
+    variable: '#ffab70',
+    variableName: '#D9DCFA',
+    parameter: '#e1e4e8',
+    function: '#FFCA66',
+    string: '#FF9878',
+    constant: '#79b8ff',
+    type: '#79b8ff',
+    class: '#b392f0',
+    number: '#2EC7D9',
+    comment: '#568B2A',
+    heading: '#79b8ff',
+    invalid: '#f97583',
+    regexp: '#9ecbff',
+    propertyName: '#9197F1',
+    separator: '#888892',
+    gutters: '#888892',
+    moduleKeyword: '#CC4FD4'
 };
 const darkTheme = createTheme({
     variant: 'dark',
     settings: {
         background: colors.background,
-        foreground: '#E6EDF3',
-        caret: '#7DD3FC',
-        selection: '#264F7833',
+        foreground: colors.foreground,
+        caret: colors.cursor,
+        selection: colors.selection,
         gutterBackground: colors.background,
-        gutterForeground: '#6E7681',
+        gutterForeground: colors.foreground,
         gutterBorderColor: 'transparent',
         gutterBorderWidth: 0,
         lineHighlight: '#21262D',
@@ -39,7 +57,8 @@ const darkTheme = createTheme({
             backgroundColor: '#21262D'
         },
         completionItemSelected: {
-            backgroundColor: '#1F6EEB'
+            backgroundColor: colors.selection,
+            color: colors.foreground
         },
         completionItemIcon: {
             color: '#8B949E'
@@ -56,99 +75,147 @@ const darkTheme = createTheme({
     },
     styles: [
         {
-            tag: tags.comment,
-            color: colors.comment
+            tag: tags.keyword,
+            color: colors.keyword
+        },
+        {
+            tag: tags.variableName,
+            color: colors.variableName
         },
         {
             tag: [
-                tags.propertyName
+                tags.name,
+                tags.deleted,
+                tags.character,
+                tags.macroName
             ],
-            color: colors.key
+            color: colors.variable
         },
         {
             tag: [
-                tags.string
+                tags.propertyName
             ],
-            color: colors.string
+            color: colors.propertyName
         },
         {
             tag: [
-                tags.number
+                tags.processingInstruction,
+                tags.string,
+                tags.inserted,
+                tags.special(tags.string)
             ],
-            color: colors.number
+            color: colors.string
         },
         {
             tag: [
-                tags.bool
+                tags["function"](tags.variableName),
+                tags["function"](tags.propertyName),
+                tags.labelName
             ],
-            color: colors.boolean
+            color: colors.function
         },
         {
             tag: [
-                tags["null"]
+                tags.moduleKeyword,
+                tags.controlKeyword
             ],
-            color: colors.null
+            color: colors.moduleKeyword
         },
         {
             tag: [
-                tags.separator
+                tags.color,
+                tags.constant(tags.name),
+                tags.standard(tags.name)
             ],
-            color: colors.separator
+            color: colors.constant
+        },
+        {
+            tag: tags.definition(tags.name),
+            color: colors.variable
         },
         {
             tag: [
-                tags.definitionKeyword
+                tags.className
             ],
-            color: '#C084FC'
+            color: colors.class
         },
         {
             tag: [
-                tags.modifier
+                tags.number,
+                tags.changed,
+                tags.annotation,
+                tags.modifier,
+                tags.self,
+                tags.namespace
             ],
-            color: '#C084FC'
+            color: colors.number
         },
         {
             tag: [
-                tags.controlKeyword
+                tags.typeName
             ],
-            color: '#C084FC'
+            color: colors.type,
+            fontStyle: colors.type
         },
         {
             tag: [
                 tags.operatorKeyword
             ],
-            color: '#C084FC'
+            color: colors.keyword
         },
         {
             tag: [
-                tags.heading
+                tags.url,
+                tags.escape,
+                tags.regexp,
+                tags.link
             ],
-            color: '#7DD3FC'
+            color: colors.regexp
         },
         {
             tag: [
-                tags.processingInstruction
+                tags.meta,
+                tags.comment
             ],
-            color: '#7DD3FC'
+            color: colors.comment
         },
         {
-            tag: [
-                tags.standard(tags.variableName)
-            ],
-            color: '#34D399'
+            tag: tags.strong,
+            fontWeight: 'bold'
         },
         {
-            tag: [
-                tags.attributeName
-            ],
-            color: '#FBBF24'
+            tag: tags.emphasis,
+            fontStyle: 'italic'
+        },
+        {
+            tag: tags.link,
+            textDecoration: 'underline'
+        },
+        {
+            tag: tags.heading,
+            fontWeight: 'bold',
+            color: colors.heading
         },
         {
             tag: [
-                tags.special(tags.string)
+                tags.atom,
+                tags.bool,
+                tags.special(tags.variableName)
             ],
-            color: '#7DD3FC'
+            color: colors.variable
+        },
+        {
+            tag: tags.invalid,
+            color: colors.invalid
+        },
+        {
+            tag: tags.strikethrough,
+            textDecoration: 'line-through'
+        },
+        {
+            tag: tags.separator,
+            color: colors.separator
         }
     ]
 });
-export { darkTheme };
+export { colors, darkTheme };