@flowgram.ai/form-materials 0.4.9 → 0.4.10

package/dist/cjs/components/display-outputs/styles.js

@@ -0,0 +1,51 @@
+"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__, {
+    DisplayOutputsWrapper: ()=>DisplayOutputsWrapper
+});
+const external_styled_components_namespaceObject = require("styled-components");
+var external_styled_components_default = /*#__PURE__*/ __webpack_require__.n(external_styled_components_namespaceObject);
+const DisplayOutputsWrapper = external_styled_components_default().div`
+  display: flex;
+  gap: 5px;
+  flex-wrap: wrap;
+`;
+exports.DisplayOutputsWrapper = __webpack_exports__.DisplayOutputsWrapper;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "DisplayOutputsWrapper"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/components/display-schema-tag/index.js

@@ -0,0 +1,77 @@
+"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__, {
+    DisplaySchemaTag: ()=>DisplaySchemaTag
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
+const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
+const index_js_namespaceObject = require("../../plugins/index.js");
+const external_display_schema_tree_index_js_namespaceObject = require("../display-schema-tree/index.js");
+const external_styles_js_namespaceObject = require("./styles.js");
+function DisplaySchemaTag({ value = {}, showIconInTree, title, warning }) {
+    const typeManager = (0, index_js_namespaceObject.useTypeManager)();
+    const icon = typeManager?.getDisplayIcon(value) || typeManager.getDisplayIcon({
+        type: 'unknown'
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Popover, {
+        content: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.PopoverContent, {
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_display_schema_tree_index_js_namespaceObject.DisplaySchemaTree, {
+                value: value,
+                typeManager: typeManager,
+                showIcon: showIconInTree
+            })
+        }),
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.StyledTag, {
+            color: warning ? 'amber' : 'white',
+            children: [
+                icon && /*#__PURE__*/ external_react_default().cloneElement(icon, {
+                    className: 'tag-icon'
+                }),
+                title && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.TitleSpan, {
+                    children: title
+                })
+            ]
+        })
+    });
+}
+exports.DisplaySchemaTag = __webpack_exports__.DisplaySchemaTag;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "DisplaySchemaTag"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/components/display-schema-tag/styles.js

@@ -0,0 +1,71 @@
+"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__, {
+    TitleSpan: ()=>TitleSpan,
+    PopoverContent: ()=>PopoverContent,
+    StyledTag: ()=>StyledTag
+});
+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 PopoverContent = external_styled_components_default().div`
+  padding: 10px;
+`;
+const StyledTag = external_styled_components_default()(semi_ui_namespaceObject.Tag)`
+  padding: 4px;
+
+  .tag-icon {
+    width: 12px;
+    height: 12px;
+  }
+`;
+const TitleSpan = external_styled_components_default().span`
+  display: inline-block;
+  margin-left: 4px;
+  margin-top: -1px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+exports.PopoverContent = __webpack_exports__.PopoverContent;
+exports.StyledTag = __webpack_exports__.StyledTag;
+exports.TitleSpan = __webpack_exports__.TitleSpan;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "PopoverContent",
+    "StyledTag",
+    "TitleSpan"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/components/display-schema-tree/index.js

@@ -0,0 +1,93 @@
+"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__, {
+    DisplaySchemaTree: ()=>DisplaySchemaTree
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
+const index_js_namespaceObject = require("../../plugins/index.js");
+const external_styles_js_namespaceObject = require("./styles.js");
+function DisplaySchemaTree(props) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SchemaTree, {
+        ...props
+    });
+}
+function SchemaTree(props) {
+    const { value: schema = {}, drilldown = true, depth = 0, showIcon = true, parentKey = '' } = props || {};
+    const typeManager = (0, index_js_namespaceObject.useTypeManager)();
+    const config = typeManager.getTypeBySchema(schema);
+    const title = typeManager.getComplexText(schema);
+    const icon = typeManager?.getDisplayIcon(schema);
+    let properties = drilldown && config ? config.getTypeSchemaProperties(schema) : {};
+    const childEntries = Object.entries(properties || {});
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.TreeItem, {
+        depth: depth,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.TreeRow, {
+                children: [
+                    0 !== depth && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.HorizontalLine, {}),
+                    showIcon && icon && /*#__PURE__*/ external_react_default().cloneElement(icon, {
+                        className: 'tree-icon'
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.TreeTitle, {
+                        children: parentKey ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                            children: [
+                                `${parentKey} (`,
+                                title,
+                                ')'
+                            ]
+                        }) : title
+                    })
+                ]
+            }),
+            childEntries?.length ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.TreeLevel, {
+                children: childEntries.map(([key, value])=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SchemaTree, {
+                        ...props,
+                        parentKey: key,
+                        value: value,
+                        depth: depth + 1
+                    }, key))
+            }) : null
+        ]
+    }, parentKey || 'root');
+}
+exports.DisplaySchemaTree = __webpack_exports__.DisplaySchemaTree;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "DisplaySchemaTree"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/components/display-schema-tree/styles.js

@@ -0,0 +1,135 @@
+"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__, {
+    TreeRow: ()=>TreeRow,
+    TreeItem: ()=>TreeItem,
+    TreeTitle: ()=>TreeTitle,
+    TreeLevel: ()=>TreeLevel,
+    HorizontalLine: ()=>HorizontalLine
+});
+const external_styled_components_namespaceObject = require("styled-components");
+var external_styled_components_default = /*#__PURE__*/ __webpack_require__.n(external_styled_components_namespaceObject);
+const TreeRow = external_styled_components_default().div`
+  display: flex;
+  align-items: center;
+
+  .tree-icon {
+    margin-right: 8px;
+    width: 14px;
+    height: 14px;
+  }
+
+  height: 27px;
+  white-space: nowrap;
+`;
+const HorizontalLine = external_styled_components_default().div`
+  position: relative;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    background-color: var(--semi-color-text-3);
+  }
+
+  &::after {
+    top: 0px;
+    right: 6px;
+    width: 15px;
+    height: 1px;
+  }
+`;
+const TreeTitle = external_styled_components_default().div`
+  // overflow: hidden;
+  // text-overflow: ellipsis;
+`;
+const TreeLevel = external_styled_components_default().div`
+  padding-left: 30px;
+  position: relative;
+
+  /* &::before {
+    content: '';
+    position: absolute;
+    background-color: var(--semi-color-text-3);
+    top: 0px;
+    bottom: 0px;
+    left: -22px;
+    width: 1px;
+  } */
+`;
+const TreeItem = external_styled_components_default().div`
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    background-color: var(--semi-color-text-3);
+  }
+
+  &:not(:last-child)::before {
+    width: 1px;
+    top: 0;
+    bottom: 0;
+    left: -22px;
+  }
+
+  &:last-child::before {
+    width: 1px;
+    top: 0;
+    height: 14px;
+    left: -22px;
+  }
+
+  ${(props)=>0 === props.depth && (0, external_styled_components_namespaceObject.css)`
+      &::before {
+        width: 0px !important;
+      }
+    `}
+`;
+exports.HorizontalLine = __webpack_exports__.HorizontalLine;
+exports.TreeItem = __webpack_exports__.TreeItem;
+exports.TreeLevel = __webpack_exports__.TreeLevel;
+exports.TreeRow = __webpack_exports__.TreeRow;
+exports.TreeTitle = __webpack_exports__.TreeTitle;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "HorizontalLine",
+    "TreeItem",
+    "TreeLevel",
+    "TreeRow",
+    "TreeTitle"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/components/dynamic-value-input/hooks.js

@@ -0,0 +1,99 @@
+"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__, {
+    useIncludeSchema: ()=>useIncludeSchema,
+    useRefVariable: ()=>useRefVariable,
+    useSelectSchema: ()=>useSelectSchema
+});
+const external_react_namespaceObject = require("react");
+const editor_namespaceObject = require("@flowgram.ai/editor");
+function useRefVariable(value) {
+    const available = (0, editor_namespaceObject.useScopeAvailable)();
+    const refVariable = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (value?.type === 'ref') return available.getByKeyPath(value.content);
+    }, [
+        value,
+        available
+    ]);
+    return refVariable;
+}
+function useSelectSchema(schemaFromProps, constantProps, value) {
+    let defaultSelectSchema = schemaFromProps || constantProps?.schema || {
+        type: 'string'
+    };
+    if (value?.type === 'constant') defaultSelectSchema = value?.schema || defaultSelectSchema;
+    const changeVersion = (0, external_react_namespaceObject.useRef)(0);
+    const effectVersion = (0, external_react_namespaceObject.useRef)(0);
+    const [selectSchema, setSelectSchema] = (0, external_react_namespaceObject.useState)(defaultSelectSchema);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        effectVersion.current += 1;
+        if (changeVersion.current === effectVersion.current) return;
+        effectVersion.current = changeVersion.current;
+        if (value?.type === 'constant' && value?.schema) return void setSelectSchema(value?.schema);
+    }, [
+        value
+    ]);
+    const setSelectSchemaWithVersionUpdate = (schema)=>{
+        setSelectSchema(schema);
+        changeVersion.current += 1;
+    };
+    return [
+        selectSchema,
+        setSelectSchemaWithVersionUpdate
+    ];
+}
+function useIncludeSchema(schemaFromProps) {
+    const includeSchema = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (!schemaFromProps) return;
+        if (schemaFromProps?.type === 'number') return [
+            schemaFromProps,
+            {
+                type: 'integer'
+            }
+        ];
+        return {
+            ...schemaFromProps,
+            extra: {
+                weak: true,
+                ...schemaFromProps?.extra
+            }
+        };
+    }, [
+        schemaFromProps
+    ]);
+    return includeSchema;
+}
+exports.useIncludeSchema = __webpack_exports__.useIncludeSchema;
+exports.useRefVariable = __webpack_exports__.useRefVariable;
+exports.useSelectSchema = __webpack_exports__.useSelectSchema;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "useIncludeSchema",
+    "useRefVariable",
+    "useSelectSchema"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});