@flowgram.ai/form-materials 0.4.9 → 0.4.10

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 };

package/dist/esm/components/condition-row/constants.mjs

@@ -0,0 +1,128 @@
+import { Op } from "./types.mjs";
+const defaultRules = {
+    string: {
+        [Op.EQ]: 'string',
+        [Op.NEQ]: 'string',
+        [Op.CONTAINS]: 'string',
+        [Op.NOT_CONTAINS]: 'string',
+        [Op.IN]: 'array',
+        [Op.NIN]: 'array',
+        [Op.IS_EMPTY]: null,
+        [Op.IS_NOT_EMPTY]: null
+    },
+    number: {
+        [Op.EQ]: 'number',
+        [Op.NEQ]: 'number',
+        [Op.GT]: 'number',
+        [Op.GTE]: 'number',
+        [Op.LT]: 'number',
+        [Op.LTE]: 'number',
+        [Op.IN]: 'array',
+        [Op.NIN]: 'array'
+    },
+    integer: {
+        [Op.EQ]: 'number',
+        [Op.NEQ]: 'number',
+        [Op.GT]: 'number',
+        [Op.GTE]: 'number',
+        [Op.LT]: 'number',
+        [Op.LTE]: 'number',
+        [Op.IN]: 'array',
+        [Op.NIN]: 'array'
+    },
+    boolean: {
+        [Op.EQ]: 'boolean',
+        [Op.NEQ]: 'boolean',
+        [Op.IS_TRUE]: null,
+        [Op.IS_FALSE]: null,
+        [Op.IN]: 'array',
+        [Op.NIN]: 'array'
+    },
+    object: {
+        [Op.IS_EMPTY]: null,
+        [Op.IS_NOT_EMPTY]: null
+    },
+    array: {
+        [Op.IS_EMPTY]: null,
+        [Op.IS_NOT_EMPTY]: null,
+        [Op.CONTAINS]: 'array',
+        [Op.NOT_CONTAINS]: 'array',
+        [Op.EQ]: 'array',
+        [Op.NEQ]: 'array'
+    },
+    map: {
+        [Op.IS_EMPTY]: null,
+        [Op.IS_NOT_EMPTY]: null
+    },
+    ['date-time']: {
+        [Op.EQ]: 'date-time',
+        [Op.NEQ]: 'date-time',
+        [Op.GT]: 'date-time',
+        [Op.GTE]: 'date-time',
+        [Op.LT]: 'date-time',
+        [Op.LTE]: 'date-time'
+    }
+};
+const defaultOpConfigs = {
+    [Op.EQ]: {
+        label: 'Equal',
+        abbreviation: '='
+    },
+    [Op.NEQ]: {
+        label: 'Not Equal',
+        abbreviation: "\u2260"
+    },
+    [Op.GT]: {
+        label: 'Greater Than',
+        abbreviation: '>'
+    },
+    [Op.GTE]: {
+        label: 'Greater Than or Equal',
+        abbreviation: '>='
+    },
+    [Op.LT]: {
+        label: 'Less Than',
+        abbreviation: '<'
+    },
+    [Op.LTE]: {
+        label: 'Less Than or Equal',
+        abbreviation: '<='
+    },
+    [Op.IN]: {
+        label: 'In',
+        abbreviation: "\u2208"
+    },
+    [Op.NIN]: {
+        label: 'Not In',
+        abbreviation: "\u2209"
+    },
+    [Op.CONTAINS]: {
+        label: 'Contains',
+        abbreviation: "\u2287"
+    },
+    [Op.NOT_CONTAINS]: {
+        label: 'Not Contains',
+        abbreviation: "\u2289"
+    },
+    [Op.IS_EMPTY]: {
+        label: 'Is Empty',
+        abbreviation: '=',
+        rightDisplay: 'Empty'
+    },
+    [Op.IS_NOT_EMPTY]: {
+        label: 'Is Not Empty',
+        abbreviation: "\u2260",
+        rightDisplay: 'Empty'
+    },
+    [Op.IS_TRUE]: {
+        label: 'Is True',
+        abbreviation: '=',
+        rightDisplay: 'True'
+    },
+    [Op.IS_FALSE]: {
+        label: 'Is False',
+        abbreviation: '=',
+        rightDisplay: 'False'
+    }
+};
+export { defaultOpConfigs, defaultRules };

package/dist/esm/components/condition-row/hooks/useOp.mjs

@@ -0,0 +1,44 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { I18n } from "@flowgram.ai/editor";
+import { Button, Select } from "@douyinfe/semi-ui";
+import { IconChevronDownStroked } from "@douyinfe/semi-icons";
+import { defaultOpConfigs } from "../constants.mjs";
+function useOp({ rule, op, onChange, readonly, userOps }) {
+    const options = useMemo(()=>Object.keys(rule || {}).map((_op)=>({
+                ...defaultOpConfigs[_op] || {},
+                ...userOps?.[_op] || {},
+                value: _op,
+                label: I18n.t(userOps?.[_op]?.label || defaultOpConfigs[_op]?.label)
+            })), [
+        rule,
+        userOps
+    ]);
+    const opConfig = useMemo(()=>defaultOpConfigs[op], [
+        op
+    ]);
+    const renderOpSelect = ()=>/*#__PURE__*/ jsx(Select, {
+            style: {
+                height: 22
+            },
+            disabled: readonly,
+            size: "small",
+            value: op,
+            optionList: options,
+            onChange: (v)=>{
+                onChange(v);
+            },
+            triggerRender: ({ value })=>/*#__PURE__*/ jsx(Button, {
+                    size: "small",
+                    disabled: !rule,
+                    children: opConfig?.abbreviation || /*#__PURE__*/ jsx(IconChevronDownStroked, {
+                        size: "small"
+                    })
+                })
+        });
+    return {
+        renderOpSelect,
+        opConfig
+    };
+}
+export { useOp };

package/dist/esm/components/condition-row/hooks/useRule.mjs

@@ -0,0 +1,34 @@
+import { useMemo } from "react";
+import { JsonSchemaUtils } from "@flowgram.ai/json-schema";
+import { useScopeAvailable } from "@flowgram.ai/editor";
+import { defaultRules } from "../constants.mjs";
+function useRule(left, userRules) {
+    const available = useScopeAvailable();
+    const rules = useMemo(()=>({
+            ...defaultRules,
+            ...userRules || {}
+        }), [
+        userRules
+    ]);
+    const variable = useMemo(()=>{
+        if (!left) return;
+        return available.getByKeyPath(left.content);
+    }, [
+        available,
+        left
+    ]);
+    const rule = useMemo(()=>{
+        if (!variable) return;
+        const schema = JsonSchemaUtils.astToSchema(variable.type, {
+            drilldown: false
+        });
+        return rules[schema?.type];
+    }, [
+        variable?.type,
+        rules
+    ]);
+    return {
+        rule
+    };
+}
+export { useRule };

package/dist/esm/components/condition-row/index.mjs

@@ -0,0 +1,89 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { I18n } from "@flowgram.ai/editor";
+import { Input } from "@douyinfe/semi-ui";
+import { InjectVariableSelector } from "../variable-selector/index.mjs";
+import { InjectDynamicValueInput } from "../dynamic-value-input/index.mjs";
+import { UIContainer, UILeft, UIOperator, UIRight, UIValues } from "./styles.mjs";
+import { useRule } from "./hooks/useRule.mjs";
+import { useOp } from "./hooks/useOp.mjs";
+import { defaultOpConfigs, defaultRules } from "./constants.mjs";
+const defaultRuleConfig = {
+    ops: {},
+    rules: {}
+};
+function ConditionRow({ style, value, onChange, readonly, ruleConfig = defaultRuleConfig }) {
+    const { left, operator, right } = value || {};
+    const { rule } = useRule(left, ruleConfig.rules);
+    const { renderOpSelect, opConfig } = useOp({
+        rule,
+        op: operator,
+        onChange: (v)=>onChange({
+                ...value,
+                operator: v
+            }),
+        readonly,
+        userOps: ruleConfig.ops
+    });
+    const targetSchema = useMemo(()=>{
+        const targetType = rule?.[operator || ''] || null;
+        return targetType ? {
+            type: targetType,
+            extra: {
+                weak: true
+            }
+        } : null;
+    }, [
+        rule,
+        opConfig
+    ]);
+    return /*#__PURE__*/ jsxs(UIContainer, {
+        style: style,
+        children: [
+            /*#__PURE__*/ jsx(UIOperator, {
+                children: renderOpSelect()
+            }),
+            /*#__PURE__*/ jsxs(UIValues, {
+                children: [
+                    /*#__PURE__*/ jsx(UILeft, {
+                        children: /*#__PURE__*/ jsx(InjectVariableSelector, {
+                            readonly: readonly,
+                            style: {
+                                width: '100%'
+                            },
+                            value: left?.content,
+                            onChange: (v)=>onChange({
+                                    ...value,
+                                    left: {
+                                        type: 'ref',
+                                        content: v
+                                    }
+                                })
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(UIRight, {
+                        children: targetSchema ? /*#__PURE__*/ jsx(InjectDynamicValueInput, {
+                            readonly: readonly || !rule,
+                            value: right,
+                            schema: targetSchema,
+                            onChange: (v)=>onChange({
+                                    ...value,
+                                    right: v
+                                })
+                        }) : /*#__PURE__*/ jsx(Input, {
+                            size: "small",
+                            disabled: true,
+                            style: {
+                                pointerEvents: 'none'
+                            },
+                            value: opConfig?.rightDisplay || I18n.t('Empty')
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+ConditionRow.defaultRules = defaultRules;
+ConditionRow.defaultOpConfigs = defaultOpConfigs;
+export { ConditionRow };