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

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

@@ -1,46 +1,62 @@
 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'
+    background: '#f4f5f5',
+    foreground: '#444d56',
+    selection: '#0366d625',
+    cursor: '#044289',
+    dropdownBackground: '#fff',
+    dropdownBorder: '#e1e4e8',
+    activeLine: '#c6c6c622',
+    matchingBracket: '#34d05840',
+    keyword: '#d73a49',
+    storage: '#d73a49',
+    variable: '#e36209',
+    parameter: '#24292e',
+    function: '#005cc5',
+    string: '#032f62',
+    constant: '#005cc5',
+    type: '#005cc5',
+    class: '#6f42c1',
+    number: '#005cc5',
+    comment: '#6a737d',
+    heading: '#005cc5',
+    invalid: '#cb2431',
+    regexp: '#032f62'
 };
 const lightTheme = createTheme({
     variant: 'light',
     settings: {
-        background: '#FFFFFF',
-        foreground: '#1F2937',
-        caret: '#2563EB',
-        selection: '#E5E7EB',
-        gutterBackground: '#F9FAFB',
-        gutterForeground: '#6B7280',
+        background: colors.background,
+        foreground: colors.foreground,
+        caret: colors.cursor,
+        selection: colors.selection,
+        gutterBackground: colors.background,
+        gutterForeground: colors.foreground,
         gutterBorderColor: 'transparent',
         gutterBorderWidth: 0,
-        lineHighlight: '#F3F4F680',
+        lineHighlight: colors.background,
         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)'
+            backgroundColor: colors.dropdownBackground,
+            color: colors.foreground,
+            border: 'none',
+            boxShadow: '0 0 1px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .1)!important',
+            maxWidth: '400px'
         },
         link: {
-            color: '#2563EB'
+            color: '#2563EB',
+            caret: colors.cursor
         },
         completionItemHover: {
             backgroundColor: '#F3F4F6'
         },
         completionItemSelected: {
-            backgroundColor: '#E5E7EB'
+            backgroundColor: colors.selection,
+            color: colors.foreground
         },
         completionItemIcon: {
             color: '#4B5563'
@@ -57,105 +73,135 @@ const lightTheme = createTheme({
     },
     styles: [
         {
-            tag: tags.comment,
-            color: colors.comment
+            tag: tags.keyword,
+            color: colors.keyword
         },
         {
             tag: [
-                tags.propertyName
+                tags.name,
+                tags.deleted,
+                tags.character,
+                tags.macroName
             ],
-            color: colors.key
+            color: colors.variable
         },
         {
             tag: [
-                tags.variableName
+                tags.propertyName
             ],
-            color: colors.variable
+            color: colors.function
         },
         {
             tag: [
-                tags.string
+                tags.processingInstruction,
+                tags.string,
+                tags.inserted,
+                tags.special(tags.string)
             ],
             color: colors.string
         },
         {
             tag: [
-                tags.number
+                tags["function"](tags.variableName),
+                tags.labelName
             ],
-            color: colors.number
+            color: colors.function
         },
         {
             tag: [
-                tags.bool
+                tags.color,
+                tags.constant(tags.name),
+                tags.standard(tags.name)
             ],
-            color: colors.boolean
+            color: colors.constant
         },
         {
             tag: [
-                tags["null"]
+                tags.definition(tags.name),
+                tags.separator
             ],
-            color: colors.null
+            color: colors.variable
         },
         {
             tag: [
-                tags.separator
+                tags.className
             ],
-            color: colors.separator
+            color: colors.class
         },
         {
             tag: [
-                tags.heading
+                tags.number,
+                tags.changed,
+                tags.annotation,
+                tags.modifier,
+                tags.self,
+                tags.namespace
             ],
-            color: '#2563EB'
+            color: colors.number
         },
         {
             tag: [
-                tags.processingInstruction
+                tags.typeName
             ],
-            color: '#2563EB'
+            color: colors.type,
+            fontStyle: colors.type
         },
         {
             tag: [
-                tags.definitionKeyword
+                tags.operator,
+                tags.operatorKeyword
             ],
-            color: '#9333EA'
+            color: colors.keyword
         },
         {
             tag: [
-                tags.modifier
+                tags.url,
+                tags.escape,
+                tags.regexp,
+                tags.link
             ],
-            color: '#9333EA'
+            color: colors.regexp
         },
         {
             tag: [
-                tags.controlKeyword
+                tags.meta,
+                tags.comment
             ],
-            color: '#9333EA'
+            color: colors.comment
         },
         {
-            tag: [
-                tags.operatorKeyword
-            ],
-            color: '#9333EA'
+            tag: tags.strong,
+            fontWeight: 'bold'
         },
         {
-            tag: [
-                tags.standard(tags.variableName)
-            ],
-            color: '#059669'
+            tag: tags.emphasis,
+            fontStyle: 'italic'
         },
         {
-            tag: [
-                tags.attributeName
-            ],
-            color: '#EA580C'
+            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: '#2563EB'
+            color: colors.variable
+        },
+        {
+            tag: tags.invalid,
+            color: colors.invalid
+        },
+        {
+            tag: tags.strikethrough,
+            textDecoration: 'line-through'
         }
     ]
 });
-export { lightTheme };
+export { colors, lightTheme };

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

@@ -3,6 +3,7 @@ function getSuffixByLanguageId(languageId) {
     if ("typescript" === languageId) return '.ts';
     if ('shell' === languageId) return '.sh';
     if ('json' === languageId) return '.json';
+    if ('sql' === languageId) return '.sql';
     return '';
 }
 export { getSuffixByLanguageId };

package/dist/esm/components/condition-context/context.mjs

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { defaultConditionOpConfigs } from "./op.mjs";
+const ConditionContext = /*#__PURE__*/ createContext({
+    rules: {},
+    ops: defaultConditionOpConfigs
+});
+const ConditionProvider = (props)=>{
+    const { rules, ops } = props;
+    return /*#__PURE__*/ jsx(ConditionContext.Provider, {
+        value: {
+            rules,
+            ops
+        },
+        children: props.children
+    });
+};
+const useConditionContext = ()=>useContext(ConditionContext);
+export { ConditionContext, ConditionProvider, useConditionContext };

package/dist/esm/components/condition-context/hooks/use-condition.mjs

@@ -0,0 +1,63 @@
+import { useMemo } from "react";
+import { I18n } from "@flowgram.ai/editor";
+import { useTypeManager } from "../../../plugins/index.mjs";
+import { useConditionContext } from "../context.mjs";
+function useCondition({ leftSchema, operator, ruleConfig }) {
+    const typeManager = useTypeManager();
+    const { rules: contextRules, ops: contextOps } = useConditionContext();
+    const userRules = useMemo(()=>ruleConfig?.rules || contextRules || {}, [
+        contextRules,
+        ruleConfig?.rules
+    ]);
+    const allOps = useMemo(()=>ruleConfig?.ops || contextOps || {}, [
+        contextOps,
+        ruleConfig?.ops
+    ]);
+    const config = useMemo(()=>leftSchema ? typeManager.getTypeBySchema(leftSchema) : void 0, [
+        leftSchema,
+        typeManager
+    ]);
+    const rule = useMemo(()=>{
+        if (!config) return;
+        if (userRules[config.type]) return userRules[config.type];
+        if ('function' == typeof config.conditionRule) return config.conditionRule(leftSchema);
+        return config.conditionRule;
+    }, [
+        userRules,
+        leftSchema,
+        config
+    ]);
+    const opOptionList = useMemo(()=>Object.keys(rule || {}).filter((_op)=>allOps[_op]).map((_op)=>({
+                ...allOps?.[_op] || {},
+                value: _op,
+                label: I18n.t(allOps?.[_op]?.label || _op)
+            })), [
+        rule,
+        allOps
+    ]);
+    const targetSchema = useMemo(()=>{
+        const targetType = rule?.[operator || ''] || null;
+        if (!targetType) return;
+        if ('string' == typeof targetType) return {
+            type: targetType,
+            extra: {
+                weak: true
+            }
+        };
+        return targetType;
+    }, [
+        rule,
+        operator
+    ]);
+    const opConfig = useMemo(()=>allOps[operator || ''], [
+        operator,
+        allOps
+    ]);
+    return {
+        rule,
+        opConfig,
+        opOptionList,
+        targetSchema
+    };
+}
+export { useCondition };

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

@@ -0,0 +1,4 @@
+import { ConditionPresetOp } from "./op.mjs";
+import { ConditionProvider, useConditionContext } from "./context.mjs";
+import { useCondition } from "./hooks/use-condition.mjs";
+export { ConditionPresetOp, ConditionProvider, useCondition, useConditionContext };

package/dist/esm/components/condition-context/op.mjs

@@ -0,0 +1,80 @@
+var op_ConditionPresetOp = /*#__PURE__*/ function(ConditionPresetOp) {
+    ConditionPresetOp["EQ"] = "eq";
+    ConditionPresetOp["NEQ"] = "neq";
+    ConditionPresetOp["GT"] = "gt";
+    ConditionPresetOp["GTE"] = "gte";
+    ConditionPresetOp["LT"] = "lt";
+    ConditionPresetOp["LTE"] = "lte";
+    ConditionPresetOp["IN"] = "in";
+    ConditionPresetOp["NIN"] = "nin";
+    ConditionPresetOp["CONTAINS"] = "contains";
+    ConditionPresetOp["NOT_CONTAINS"] = "not_contains";
+    ConditionPresetOp["IS_EMPTY"] = "is_empty";
+    ConditionPresetOp["IS_NOT_EMPTY"] = "is_not_empty";
+    ConditionPresetOp["IS_TRUE"] = "is_true";
+    ConditionPresetOp["IS_FALSE"] = "is_false";
+    return ConditionPresetOp;
+}({});
+const defaultConditionOpConfigs = {
+    ["eq"]: {
+        label: 'Equal',
+        abbreviation: '='
+    },
+    ["neq"]: {
+        label: 'Not Equal',
+        abbreviation: '≠'
+    },
+    ["gt"]: {
+        label: 'Greater Than',
+        abbreviation: '>'
+    },
+    ["gte"]: {
+        label: 'Greater Than or Equal',
+        abbreviation: '>='
+    },
+    ["lt"]: {
+        label: 'Less Than',
+        abbreviation: '<'
+    },
+    ["lte"]: {
+        label: 'Less Than or Equal',
+        abbreviation: '<='
+    },
+    ["in"]: {
+        label: 'In',
+        abbreviation: '∈'
+    },
+    ["nin"]: {
+        label: 'Not In',
+        abbreviation: '∉'
+    },
+    ["contains"]: {
+        label: 'Contains',
+        abbreviation: '⊇'
+    },
+    ["not_contains"]: {
+        label: 'Not Contains',
+        abbreviation: '⊉'
+    },
+    ["is_empty"]: {
+        label: 'Is Empty',
+        abbreviation: '=',
+        rightDisplay: 'Empty'
+    },
+    ["is_not_empty"]: {
+        label: 'Is Not Empty',
+        abbreviation: '≠',
+        rightDisplay: 'Empty'
+    },
+    ["is_true"]: {
+        label: 'Is True',
+        abbreviation: '=',
+        rightDisplay: 'True'
+    },
+    ["is_false"]: {
+        label: 'Is False',
+        abbreviation: '=',
+        rightDisplay: 'False'
+    }
+};
+export { op_ConditionPresetOp as ConditionPresetOp, defaultConditionOpConfigs };

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

@@ -1,42 +1,61 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { I18n } from "@flowgram.ai/editor";
-import { Input } from "@douyinfe/semi-ui";
+import { JsonSchemaUtils } from "@flowgram.ai/json-schema";
+import { I18n, useScopeAvailable } from "@flowgram.ai/editor";
+import { Button, Input, Select } from "@douyinfe/semi-ui";
+import { IconChevronDownStroked } from "@douyinfe/semi-icons";
 import { InjectVariableSelector } from "../variable-selector/index.mjs";
 import { InjectDynamicValueInput } from "../dynamic-value-input/index.mjs";
+import { useCondition } from "../condition-context/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;
+    const available = useScopeAvailable();
+    const variable = useMemo(()=>{
+        if (!left) return;
+        return available.getByKeyPath(left.content);
+    }, [
+        available,
+        left
+    ]);
+    const leftSchema = useMemo(()=>{
+        if (!variable) return;
+        return JsonSchemaUtils.astToSchema(variable.type, {
+            drilldown: false
+        });
     }, [
-        rule,
-        opConfig
+        variable?.type?.hash
     ]);
+    const { rule, opConfig, opOptionList, targetSchema } = useCondition({
+        leftSchema,
+        operator
+    });
+    const renderOpSelect = ()=>/*#__PURE__*/ jsx(Select, {
+            style: {
+                height: 22
+            },
+            disabled: readonly,
+            size: "small",
+            value: operator,
+            optionList: opOptionList,
+            onChange: (v)=>{
+                onChange({
+                    ...value,
+                    operator: v
+                });
+            },
+            triggerRender: ({ value })=>/*#__PURE__*/ jsx(Button, {
+                    size: "small",
+                    disabled: !rule,
+                    children: opConfig?.abbreviation || /*#__PURE__*/ jsx(IconChevronDownStroked, {
+                        size: "small"
+                    })
+                })
+        });
     return /*#__PURE__*/ jsxs(UIContainer, {
         style: style,
         children: [
@@ -84,6 +103,4 @@ function ConditionRow({ style, value, onChange, readonly, ruleConfig = defaultRu
         ]
     });
 }
-ConditionRow.defaultRules = defaultRules;
-ConditionRow.defaultOpConfigs = defaultOpConfigs;
 export { ConditionRow };

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

@@ -1,18 +0,0 @@
-var types_Op = /*#__PURE__*/ function(Op) {
-    Op["EQ"] = "eq";
-    Op["NEQ"] = "neq";
-    Op["GT"] = "gt";
-    Op["GTE"] = "gte";
-    Op["LT"] = "lt";
-    Op["LTE"] = "lte";
-    Op["IN"] = "in";
-    Op["NIN"] = "nin";
-    Op["CONTAINS"] = "contains";
-    Op["NOT_CONTAINS"] = "not_contains";
-    Op["IS_EMPTY"] = "is_empty";
-    Op["IS_NOT_EMPTY"] = "is_not_empty";
-    Op["IS_TRUE"] = "is_true";
-    Op["IS_FALSE"] = "is_false";
-    return Op;
-}({});
-export { types_Op as Op };

package/dist/esm/components/coze-editor-extensions/extensions/inputs-tree.mjs

@@ -0,0 +1,135 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { isPlainObject, last } from "lodash-es";
+import { ASTMatch, useScopeAvailable } from "@flowgram.ai/editor";
+import { Mention, PositionMirror, getCurrentMentionReplaceRange, useEditor } from "@flowgram.ai/coze-editor/react";
+import { Popover, Tree } from "@douyinfe/semi-ui";
+import { FlowValueUtils } from "../../../shared/index.mjs";
+function InputsPicker({ inputsValues, onSelect }) {
+    const available = useScopeAvailable();
+    const getArrayDrilldown = (type, depth = 1)=>{
+        if (ASTMatch.isArray(type.items)) return getArrayDrilldown(type.items, depth + 1);
+        return {
+            type: type.items,
+            depth: depth
+        };
+    };
+    const renderVariable = (variable, keyPath)=>{
+        let type = variable?.type;
+        let children;
+        if (ASTMatch.isObject(type)) children = (type.properties || []).map((_property)=>renderVariable(_property, [
+                ...keyPath,
+                _property.key
+            ])).filter(Boolean);
+        if (ASTMatch.isArray(type)) {
+            const drilldown = getArrayDrilldown(type);
+            if (ASTMatch.isObject(drilldown.type)) children = (drilldown.type.properties || []).map((_property)=>renderVariable(_property, [
+                    ...keyPath,
+                    ...new Array(drilldown.depth).fill('[0]'),
+                    _property.key
+                ])).filter(Boolean);
+        }
+        const key = keyPath.map((_key, idx)=>'[0]' === _key || 0 === idx ? _key : `.${_key}`).join('');
+        return {
+            key: key,
+            label: last(keyPath),
+            value: key,
+            children
+        };
+    };
+    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, keyPath);
+            }
+            return {
+                key: currKey,
+                value: currKey,
+                label: last(keyPath)
+            };
+        }
+        if (isPlainObject(value)) return {
+            key: currKey,
+            value: currKey,
+            label: last(keyPath),
+            children: Object.entries(value).map(([key, value])=>getTreeData(value, [
+                    ...keyPath,
+                    key
+                ])).filter(Boolean)
+        };
+    };
+    const treeData = useMemo(()=>Object.entries(inputsValues).map(([key, value])=>getTreeData(value, [
+                key
+            ])).filter(Boolean), []);
+    return /*#__PURE__*/ jsx(Tree, {
+        treeData: treeData,
+        onSelect: (v)=>onSelect(v)
+    });
+}
+const DEFAULT_TRIGGER_CHARACTERS = [
+    '{',
+    '{}',
+    '@'
+];
+function InputsTree({ inputsValues, triggerCharacters = DEFAULT_TRIGGER_CHARACTERS }) {
+    const [posKey, setPosKey] = useState('');
+    const [visible, setVisible] = useState(false);
+    const [position, setPosition] = useState(-1);
+    const editor = useEditor();
+    function insert(variablePath) {
+        const range = getCurrentMentionReplaceRange(editor.$view.state);
+        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 + '}}'
+        });
+        setVisible(false);
+    }
+    function handleOpenChange(e) {
+        setPosition(e.state.selection.main.head);
+        setVisible(e.value);
+    }
+    useEffect(()=>{
+        if (!editor) return;
+    }, [
+        editor,
+        visible
+    ]);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Mention, {
+                triggerCharacters: triggerCharacters,
+                onOpenChange: handleOpenChange
+            }),
+            /*#__PURE__*/ jsx(Popover, {
+                visible: visible,
+                trigger: "custom",
+                position: "topLeft",
+                rePosKey: posKey,
+                content: /*#__PURE__*/ jsx("div", {
+                    style: {
+                        width: 300,
+                        maxHeight: 300,
+                        overflowY: 'auto'
+                    },
+                    children: /*#__PURE__*/ jsx(InputsPicker, {
+                        inputsValues: inputsValues,
+                        onSelect: (v)=>{
+                            insert(v);
+                        }
+                    })
+                }),
+                children: /*#__PURE__*/ jsx(PositionMirror, {
+                    position: position,
+                    onChange: ()=>setPosKey(String(Math.random()))
+                })
+            })
+        ]
+    });
+}
+export { InputsPicker, InputsTree };