@flowgram.ai/form-materials 0.4.8 → 0.4.10

package/dist/cjs/components/json-editor-with-variables/extensions/variable-tag.js

@@ -0,0 +1,151 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __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__);
+__webpack_require__.d(__webpack_exports__, {
+    VariableTagInject: ()=>VariableTagInject
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const external_lodash_es_namespaceObject = require("lodash-es");
+const editor_namespaceObject = require("@flowgram.ai/editor");
+const react_namespaceObject = require("@flowgram.ai/coze-editor/react");
+const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
+const semi_icons_namespaceObject = require("@douyinfe/semi-icons");
+const view_namespaceObject = require("@codemirror/view");
+const index_js_namespaceObject = require("../../../shared/index.js");
+const external_styles_js_namespaceObject = require("../styles.js");
+class VariableTagWidget extends view_namespaceObject.WidgetType {
+    constructor({ keyPath, scope }){
+        super(), this.toDispose = new editor_namespaceObject.DisposableCollection(), this.renderIcon = (icon)=>{
+            if ('string' == typeof icon) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
+                style: {
+                    marginRight: 8
+                },
+                width: 12,
+                height: 12,
+                src: icon
+            });
+            return icon;
+        };
+        this.keyPath = keyPath;
+        this.scope = scope;
+    }
+    renderVariable(v) {
+        if (!v) return void this.root.render(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UITag, {
+            prefixIcon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_icons_namespaceObject.IconIssueStroked, {}),
+            color: "amber",
+            children: "Unknown"
+        }));
+        const rootField = (0, external_lodash_es_namespaceObject.last)(v.parentFields);
+        const rootTitle = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UIRootTitle, {
+            children: rootField?.meta.title ? `${rootField.meta.title} -` : ''
+        });
+        const rootIcon = this.renderIcon(rootField?.meta.icon);
+        this.root.render(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Popover, {
+            content: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.UIPopoverContent, {
+                children: [
+                    rootIcon,
+                    rootTitle,
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UIVarName, {
+                        children: v?.keyPath.slice(1).join('.')
+                    })
+                ]
+            }),
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.UITag, {
+                prefixIcon: rootIcon,
+                children: [
+                    rootTitle,
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UIVarName, {
+                        children: v?.key
+                    })
+                ]
+            })
+        }));
+    }
+    toDOM(view) {
+        const dom = document.createElement('span');
+        this.root = (0, index_js_namespaceObject.polyfillCreateRoot)(dom);
+        this.toDispose.push(editor_namespaceObject.Disposable.create(()=>{
+            this.root.unmount();
+        }));
+        this.toDispose.push(this.scope.available.trackByKeyPath(this.keyPath, (v)=>{
+            this.renderVariable(v);
+        }, {
+            triggerOnInit: false
+        }));
+        this.renderVariable(this.scope.available.getByKeyPath(this.keyPath));
+        return dom;
+    }
+    eq(other) {
+        return (0, external_lodash_es_namespaceObject.isEqual)(this.keyPath, other.keyPath);
+    }
+    ignoreEvent() {
+        return false;
+    }
+    destroy(dom) {
+        this.toDispose.dispose();
+    }
+}
+function VariableTagInject() {
+    const injector = (0, react_namespaceObject.useInjector)();
+    const scope = (0, editor_namespaceObject.useCurrentScope)();
+    (0, external_react_namespaceObject.useLayoutEffect)(()=>{
+        const atMatcher = new view_namespaceObject.MatchDecorator({
+            regexp: /\{\{([^\}\{]+)\}\}/g,
+            decoration: (match)=>view_namespaceObject.Decoration.replace({
+                    widget: new VariableTagWidget({
+                        keyPath: match[1]?.split('.') ?? [],
+                        scope
+                    })
+                })
+        });
+        return injector.inject([
+            view_namespaceObject.ViewPlugin.fromClass(class {
+                constructor(view){
+                    this.view = view;
+                    this.decorations = atMatcher.createDeco(view);
+                }
+                update() {
+                    this.decorations = atMatcher.createDeco(this.view);
+                }
+            }, {
+                decorations: (p)=>p.decorations,
+                provide (p) {
+                    return view_namespaceObject.EditorView.atomicRanges.of((view)=>view.plugin(p)?.decorations ?? view_namespaceObject.Decoration.none);
+                }
+            })
+        ]);
+    }, [
+        injector
+    ]);
+    return null;
+}
+exports.VariableTagInject = __webpack_exports__.VariableTagInject;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "VariableTagInject"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/components/json-editor-with-variables/extensions/variable-tree.js

@@ -0,0 +1,97 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __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__);
+__webpack_require__.d(__webpack_exports__, {
+    VariableTree: ()=>VariableTree
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const react_namespaceObject = require("@flowgram.ai/coze-editor/react");
+const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
+const index_js_namespaceObject = require("../../variable-selector/index.js");
+function VariableTree() {
+    const [posKey, setPosKey] = (0, external_react_namespaceObject.useState)('');
+    const [visible, setVisible] = (0, external_react_namespaceObject.useState)(false);
+    const [position, setPosition] = (0, external_react_namespaceObject.useState)(-1);
+    const editor = (0, react_namespaceObject.useEditor)();
+    function insert(variablePath) {
+        const range = (0, react_namespaceObject.getCurrentMentionReplaceRange)(editor.$view.state);
+        if (!range) return;
+        editor.replaceText({
+            ...range,
+            text: '{{' + variablePath + '}}'
+        });
+        setVisible(false);
+    }
+    function handleOpenChange(e) {
+        setPosition(e.state.selection.main.head);
+        setVisible(e.value);
+    }
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!editor) return;
+    }, [
+        editor,
+        visible
+    ]);
+    const treeData = (0, index_js_namespaceObject.useVariableTree)({});
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.Mention, {
+                triggerCharacters: [
+                    '@'
+                ],
+                onOpenChange: handleOpenChange
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Popover, {
+                visible: visible,
+                trigger: "custom",
+                position: "topLeft",
+                rePosKey: posKey,
+                content: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    style: {
+                        width: 300
+                    },
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Tree, {
+                        treeData: treeData,
+                        onSelect: (v)=>{
+                            insert(v);
+                        }
+                    })
+                }),
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.PositionMirror, {
+                    position: position,
+                    onChange: ()=>setPosKey(String(Math.random()))
+                })
+            })
+        ]
+    });
+}
+exports.VariableTree = __webpack_exports__.VariableTree;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "VariableTree"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/components/json-editor-with-variables/index.js

@@ -0,0 +1,57 @@
+"use strict";
+var __webpack_modules__ = {
+    "./editor": function(module) {
+        module.exports = import("./editor.js").then(function(module) {
+            return module;
+        });
+    }
+};
+var __webpack_module_cache__ = {};
+function __webpack_require__(moduleId) {
+    var cachedModule = __webpack_module_cache__[moduleId];
+    if (void 0 !== cachedModule) return cachedModule.exports;
+    var module = __webpack_module_cache__[moduleId] = {
+        exports: {}
+    };
+    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+    return module.exports;
+}
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __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__);
+    __webpack_require__.d(__webpack_exports__, {
+        JsonEditorWithVariables: ()=>JsonEditorWithVariables
+    });
+    const index_js_namespaceObject = require("../../shared/index.js");
+    const JsonEditorWithVariables = (0, index_js_namespaceObject.lazySuspense)(()=>Promise.resolve().then(__webpack_require__.bind(__webpack_require__, "./editor")).then((module)=>({
+                default: module.JsonEditorWithVariables
+            })));
+})();
+exports.JsonEditorWithVariables = __webpack_exports__.JsonEditorWithVariables;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "JsonEditorWithVariables"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/components/json-editor-with-variables/styles.js

@@ -0,0 +1,89 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __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__);
+__webpack_require__.d(__webpack_exports__, {
+    UIRootTitle: ()=>UIRootTitle,
+    UIPopoverContent: ()=>UIPopoverContent,
+    UIVarName: ()=>UIVarName,
+    UITag: ()=>UITag
+});
+const external_styled_components_namespaceObject = require("styled-components");
+var external_styled_components_default = /*#__PURE__*/ __webpack_require__.n(external_styled_components_namespaceObject);
+const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
+const UIRootTitle = external_styled_components_default().div`
+  margin-right: 4px;
+  min-width: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--semi-color-text-2);
+`;
+const UIVarName = external_styled_components_default().div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+const UITag = external_styled_components_default()(semi_ui_namespaceObject.Tag)`
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  max-width: 300px;
+
+  & .semi-tag-content-center {
+    justify-content: flex-start;
+  }
+
+  &.semi-tag {
+    margin: 0 5px;
+  }
+`;
+const UIPopoverContent = external_styled_components_default().div`
+  padding: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+`;
+exports.UIPopoverContent = __webpack_exports__.UIPopoverContent;
+exports.UIRootTitle = __webpack_exports__.UIRootTitle;
+exports.UITag = __webpack_exports__.UITag;
+exports.UIVarName = __webpack_exports__.UIVarName;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "UIPopoverContent",
+    "UIRootTitle",
+    "UITag",
+    "UIVarName"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/components/json-schema-editor/default-value.js

@@ -0,0 +1,54 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __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__);
+__webpack_require__.d(__webpack_exports__, {
+    DefaultValue: ()=>DefaultValue
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+require("react");
+const editor_namespaceObject = require("@flowgram.ai/editor");
+const index_js_namespaceObject = require("../constant-input/index.js");
+const external_styles_js_namespaceObject = require("./styles.js");
+function DefaultValue(props) {
+    const { value, schema, onChange, placeholder } = props;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.ConstantInputWrapper, {
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_namespaceObject.ConstantInput, {
+            value: value,
+            onChange: (_v)=>onChange(_v),
+            schema: schema || {
+                type: 'string'
+            },
+            placeholder: placeholder ?? editor_namespaceObject.I18n.t('Default value if parameter is not provided'),
+            enableMultiLineStr: true
+        })
+    });
+}
+exports.DefaultValue = __webpack_exports__.DefaultValue;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "DefaultValue"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/components/json-schema-editor/hooks.js

@@ -0,0 +1,130 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __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__);
+__webpack_require__.d(__webpack_exports__, {
+    usePropertiesEdit: ()=>usePropertiesEdit
+});
+const external_react_namespaceObject = require("react");
+const external_lodash_es_namespaceObject = require("lodash-es");
+const external_immer_namespaceObject = require("immer");
+const json_schema_namespaceObject = require("@flowgram.ai/json-schema");
+let _id = 0;
+function genId() {
+    return _id++;
+}
+function usePropertiesEdit(value, onChange) {
+    const typeManager = (0, json_schema_namespaceObject.useTypeManager)();
+    const drilldownSchema = typeManager.getPropertiesParent(value || {});
+    const canAddField = typeManager.canAddField(value || {});
+    const [propertyList, setPropertyList] = (0, external_react_namespaceObject.useState)([]);
+    const effectVersion = (0, external_react_namespaceObject.useRef)(0);
+    const changeVersion = (0, external_react_namespaceObject.useRef)(0);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        effectVersion.current = effectVersion.current + 1;
+        if (effectVersion.current === changeVersion.current) return;
+        effectVersion.current = changeVersion.current;
+        setPropertyList((_list)=>{
+            const newNames = Object.entries(drilldownSchema?.properties || {}).sort(([, a], [, b])=>(a.extra?.index ?? 0) - (b.extra?.index ?? 0)).map(([key])=>key);
+            const oldNames = _list.map((item)=>item.name).filter(Boolean);
+            const addNames = (0, external_lodash_es_namespaceObject.difference)(newNames, oldNames);
+            return _list.filter((item)=>!item.name || newNames.includes(item.name)).map((item)=>({
+                    key: item.key,
+                    name: item.name,
+                    isPropertyRequired: drilldownSchema?.required?.includes(item.name || '') || false,
+                    ...drilldownSchema?.properties?.[item.name || ''] || item || {}
+                })).concat(addNames.map((_name)=>({
+                    key: genId(),
+                    name: _name,
+                    isPropertyRequired: drilldownSchema?.required?.includes(_name) || false,
+                    ...drilldownSchema?.properties?.[_name] || {}
+                })));
+        });
+    }, [
+        drilldownSchema
+    ]);
+    const updatePropertyList = (updater)=>{
+        changeVersion.current = changeVersion.current + 1;
+        setPropertyList((_list)=>{
+            const next = updater(_list);
+            const nextProperties = {};
+            const nextRequired = [];
+            for (const _property of next)if (_property.name) {
+                nextProperties[_property.name] = (0, external_lodash_es_namespaceObject.omit)(_property, [
+                    'key',
+                    'name',
+                    'isPropertyRequired'
+                ]);
+                if (_property.isPropertyRequired) nextRequired.push(_property.name);
+            }
+            onChange?.((0, external_immer_namespaceObject.produce)(value || {}, (draft)=>{
+                const propertiesParent = typeManager.getPropertiesParent(draft);
+                if (propertiesParent) {
+                    propertiesParent.properties = nextProperties;
+                    propertiesParent.required = nextRequired;
+                    return;
+                }
+            }));
+            return next;
+        });
+    };
+    const onAddProperty = ()=>{
+        setPropertyList((_list)=>[
+                ..._list,
+                {
+                    key: genId(),
+                    name: '',
+                    type: 'string',
+                    extra: {
+                        index: _list.length + 1
+                    }
+                }
+            ]);
+    };
+    const onRemoveProperty = (key)=>{
+        updatePropertyList((_list)=>_list.filter((_property)=>_property.key !== key));
+    };
+    const onEditProperty = (key, nextValue)=>{
+        updatePropertyList((_list)=>_list.map((_property)=>_property.key === key ? nextValue : _property));
+    };
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!canAddField) setPropertyList([]);
+    }, [
+        canAddField
+    ]);
+    return {
+        propertyList,
+        canAddField,
+        onAddProperty,
+        onRemoveProperty,
+        onEditProperty
+    };
+}
+exports.usePropertiesEdit = __webpack_exports__.usePropertiesEdit;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "usePropertiesEdit"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});