@flowgram.ai/form-materials 0.4.12 → 0.4.14

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/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: "\u2260"
+    },
+    ["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: "\u2208"
+    },
+    ["nin"]: {
+        label: 'Not In',
+        abbreviation: "\u2209"
+    },
+    ["contains"]: {
+        label: 'Contains',
+        abbreviation: "\u2287"
+    },
+    ["not_contains"]: {
+        label: 'Not Contains',
+        abbreviation: "\u2289"
+    },
+    ["is_empty"]: {
+        label: 'Is Empty',
+        abbreviation: '=',
+        rightDisplay: 'Empty'
+    },
+    ["is_not_empty"]: {
+        label: 'Is Not Empty',
+        abbreviation: "\u2260",
+        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/variable-tag.mjs

@@ -30,9 +30,10 @@ class VariableTagWidget extends WidgetType {
             color: "amber",
             children: "Unknown"
         }));
-        const rootField = last(v.parentFields);
+        const rootField = last(v.parentFields) || v;
+        const isRoot = v === rootField;
         const rootTitle = /*#__PURE__*/ jsx(UIRootTitle, {
-            children: rootField?.meta.title ? `${rootField.meta.title} -` : ''
+            children: rootField.meta?.title ? `${rootField.meta.title} ${isRoot ? '' : '-'} ` : ''
         });
         const rootIcon = this.renderIcon(rootField?.meta.icon);
         this.root.render(/*#__PURE__*/ jsx(Popover, {
@@ -49,7 +50,7 @@ class VariableTagWidget extends WidgetType {
                 prefixIcon: rootIcon,
                 children: [
                     rootTitle,
-                    /*#__PURE__*/ jsx(UIVarName, {
+                    !isRoot && /*#__PURE__*/ jsx(UIVarName, {
                         children: v?.key
                     })
                 ]

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

@@ -56,6 +56,9 @@ function VariableTree({ triggerCharacters = DEFAULT_TRIGGER_CHARACTER }) {
                     },
                     children: /*#__PURE__*/ jsx(Tree, {
                         treeData: treeData,
+                        onExpand: (v)=>{
+                            setPosKey(String(Math.random()));
+                        },
                         onSelect: (v)=>{
                             insert(v);
                         }