@formily-design/formily-setters 1.0.0

package/lib/components/DataSourceSetter/index.js

@@ -0,0 +1,73 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataSourceSetter = void 0;
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const antd_1 = require("antd");
+const reactive_1 = require("@formily/reactive");
+const reactive_react_1 = require("@formily/reactive-react");
+const react_2 = require("@formily-design/react");
+const DataSettingPanel_1 = require("./DataSettingPanel");
+const TreePanel_1 = require("./TreePanel");
+const shared_1 = require("./shared");
+require("./styles.less");
+exports.DataSourceSetter = (0, reactive_react_1.observer)((props) => {
+    const { className, value = [], onChange, allowTree = true, allowExtendOption = true, defaultOptionValue, effects = () => { }, } = props;
+    const theme = (0, react_2.useTheme)();
+    const prefix = (0, react_2.usePrefix)('data-source-setter');
+    const [modalVisible, setModalVisible] = (0, react_1.useState)(false);
+    const treeDataSource = (0, react_1.useMemo)(() => (0, reactive_1.observable)({
+        dataSource: (0, shared_1.transformValueToData)(value),
+        selectedKey: '',
+    }), [value, modalVisible]);
+    const openModal = () => setModalVisible(true);
+    const closeModal = () => setModalVisible(false);
+    return (react_1.default.createElement(react_1.Fragment, null,
+        react_1.default.createElement(antd_1.Button, { block: true, onClick: openModal },
+            react_1.default.createElement(react_2.TextWidget, { token: "SettingComponents.DataSourceSetter.configureDataSource" })),
+        react_1.default.createElement(antd_1.Modal, { title: react_1.default.createElement(react_2.TextWidget, { token: "SettingComponents.DataSourceSetter.configureDataSource" }), width: "65%", bodyStyle: { padding: 10 }, transitionName: "", maskTransitionName: "", visible: modalVisible, onCancel: closeModal, onOk: () => {
+                onChange((0, shared_1.transformDataToValue)(treeDataSource.dataSource));
+                closeModal();
+            } },
+            react_1.default.createElement("div", { className: `${(0, classnames_1.default)(prefix, className)} ${prefix + '-' + theme} ${prefix + '-layout'}` },
+                react_1.default.createElement("div", { className: `${prefix + '-layout-item left'}` },
+                    react_1.default.createElement(TreePanel_1.TreePanel, { defaultOptionValue: defaultOptionValue, allowTree: allowTree, treeDataSource: treeDataSource })),
+                react_1.default.createElement("div", { className: `${prefix + '-layout-item right'}` },
+                    react_1.default.createElement(DataSettingPanel_1.DataSettingPanel, { allowExtendOption: allowExtendOption, treeDataSource: treeDataSource, effects: effects }))))));
+});

package/lib/components/DataSourceSetter/shared.d.ts

@@ -0,0 +1,9 @@
+import { IDataSourceItem, INodeItem } from './types';
+export interface INode {
+    key?: string;
+    map?: any;
+    children?: INode[];
+}
+export declare const traverseTree: <T extends INode>(data: T[], callback: (dataItem: T, i: number, data: T[]) => any) => void;
+export declare const transformValueToData: (value: IDataSourceItem[]) => INodeItem[];
+export declare const transformDataToValue: (data: INodeItem[]) => IDataSourceItem[];

package/lib/components/DataSourceSetter/shared.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformDataToValue = exports.transformValueToData = exports.traverseTree = void 0;
+const shared_1 = require("@formily/shared");
+const traverseTree = (data, callback) => {
+    var _a, _b;
+    for (let i = 0; i < data.length; i++) {
+        callback(data[i], i, data);
+        if ((_a = data[i]) === null || _a === void 0 ? void 0 : _a.children) {
+            (0, exports.traverseTree)((_b = data[i]) === null || _b === void 0 ? void 0 : _b.children, callback);
+        }
+    }
+};
+exports.traverseTree = traverseTree;
+const transformValueToData = (value) => {
+    const data = (0, shared_1.clone)(value);
+    (0, exports.traverseTree)(data, (item, i, dataSource) => {
+        const dataItem = {
+            key: '',
+            duplicateKey: '',
+            map: [],
+            children: [],
+        };
+        for (const [key, value] of Object.entries(dataSource[i] || {})) {
+            if (key !== 'children')
+                dataItem.map.push({ label: key, value: value });
+        }
+        const uuid = (0, shared_1.uid)();
+        dataItem.key = uuid;
+        dataItem.duplicateKey = uuid;
+        dataItem.children = dataSource[i].children || [];
+        dataSource[i] = dataItem;
+    });
+    return data;
+};
+exports.transformValueToData = transformValueToData;
+const transformDataToValue = (data) => {
+    const value = (0, shared_1.clone)(data);
+    (0, exports.traverseTree)(value, (item, i, dataSource) => {
+        var _a;
+        const valueItem = {
+            children: [],
+        };
+        (0, shared_1.toArr)(dataSource[i].map).forEach((item) => {
+            if (item.label)
+                valueItem[item.label] = item.value;
+        });
+        valueItem.children = ((_a = dataSource[i]) === null || _a === void 0 ? void 0 : _a.children) || [];
+        dataSource[i] = valueItem;
+    });
+    return value;
+};
+exports.transformDataToValue = transformDataToValue;

package/lib/components/DataSourceSetter/styles.less

@@ -0,0 +1,80 @@
+@root-entry-name: 'default';
+
+.dn-data-source-setter {
+  ::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.2);
+    border-radius: 0;
+    transition: all 0.25s ease-in-out;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+  &-node-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &-icon {
+      transition: all 0.15s ease-in-out;
+      opacity: 0;
+
+      &:hover {
+      }
+    }
+  }
+
+  &-layout {
+    display: flex;
+    justify-content: space-around;
+    border: 1px solid #d9d9d9;
+    border-radius: 3px;
+
+    .ant-tree-treenode {
+      padding-right: 10px;
+      white-space: nowrap;
+
+      &:hover {
+        .dn-data-source-setter-node-title-icon {
+          opacity: 1;
+        }
+      }
+    }
+
+    &-item {
+      position: relative;
+
+      &.left {
+        width: 40%;
+        border-right: 1px solid #d9d9d9;
+      }
+
+      &.right {
+        width: 60%;
+      }
+
+      &-header {
+        display: flex;
+        flex: none;
+        align-items: center;
+        justify-content: space-between;
+        height: 40px;
+        padding: 8px 12px 9px;
+        border-bottom: 1px solid #d9d9d9;
+        border-radius: 2px 2px 0 0;
+      }
+
+      &-content {
+        padding: 2%;
+        height: 300px;
+        max-height: 300px;
+        overflow: scroll;
+      }
+    }
+  }
+}

package/lib/components/DataSourceSetter/types.d.ts

@@ -0,0 +1,18 @@
+export interface IDataSourceItem {
+    label?: '';
+    value?: any;
+    children?: any[];
+}
+export interface INodeItem {
+    key: string;
+    duplicateKey?: string;
+    map?: {
+        label: string;
+        value: any;
+    }[];
+    children?: INodeItem[];
+}
+export interface ITreeDataSource {
+    dataSource: INodeItem[];
+    selectedKey: string;
+}

package/lib/components/DataSourceSetter/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/components/ReactionsSetter/FieldPropertySetter.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface IFieldProperty {
+    [key: string]: string;
+}
+export interface IFieldPropertySetterProps {
+    extraLib?: string;
+    value?: IFieldProperty;
+    onChange?: (value: IFieldProperty) => void;
+}
+export declare const FieldPropertySetter: React.FC<IFieldPropertySetterProps>;

package/lib/components/ReactionsSetter/FieldPropertySetter.js

@@ -0,0 +1,120 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldPropertySetter = void 0;
+const react_1 = __importStar(require("react"));
+const react_2 = require("@formily-design/react");
+const antd_1 = require("antd");
+const react_settings_form_1 = require("@formily-design/react-settings-form");
+const shared_1 = require("@formily/shared");
+const properties_1 = require("./properties");
+const template = (code) => {
+    if (!code)
+        return;
+    return code.trim();
+};
+const FieldPropertySetter = (props) => {
+    const [selectKeys, setSelectKeys] = (0, react_1.useState)(['visible']);
+    const prefix = (0, react_2.usePrefix)('field-property-setter');
+    const value = { ...props.value };
+    const parseExpression = (expression) => {
+        var _a;
+        if (!expression)
+            return '';
+        return ((_a = String(expression).match(/^\{\{([\s\S]*)\}\}$/)) === null || _a === void 0 ? void 0 : _a[1]) || '';
+    };
+    const filterEmpty = (value) => {
+        return (0, shared_1.reduce)(value, (buf, value, key) => {
+            if (!value || value === '{{}}')
+                return buf;
+            buf[key] = value;
+            return buf;
+        }, {});
+    };
+    const currentProperty = properties_1.FieldProperties.find((item) => item.key === selectKeys[0]);
+    return (react_1.default.createElement("div", { className: prefix },
+        react_1.default.createElement(antd_1.Menu, { mode: "vertical", style: {
+                width: 200,
+                height: 300,
+                paddingRight: 4,
+                overflowY: 'auto',
+                overflowX: 'hidden',
+            }, defaultSelectedKeys: selectKeys, selectedKeys: selectKeys, onSelect: ({ selectedKeys }) => {
+                setSelectKeys(selectedKeys);
+            } }, properties_1.FieldProperties.map((key) => {
+            if ((0, shared_1.isPlainObj)(key)) {
+                return (react_1.default.createElement(antd_1.Menu.Item, { key: key.key },
+                    react_1.default.createElement(react_2.TextWidget, { token: `SettingComponents.ReactionsSetter.${key.token || key.key}` })));
+            }
+            return (react_1.default.createElement(antd_1.Menu.Item, { key: key },
+                react_1.default.createElement(react_2.TextWidget, { token: `SettingComponents.ReactionsSetter.${key}` })));
+        })),
+        react_1.default.createElement("div", { className: prefix + '-coder-wrapper' },
+            react_1.default.createElement("div", { className: prefix + '-coder-start' },
+                `$self.${selectKeys[0]} = (`,
+                react_1.default.createElement("span", { style: {
+                        fontSize: 14,
+                        marginLeft: 10,
+                        color: '#888',
+                        fontWeight: 'normal',
+                    } },
+                    '//',
+                    ' ',
+                    react_1.default.createElement(react_2.TextWidget, { token: "SettingComponents.ReactionsSetter.expressionValueTypeIs" }),
+                    ' ',
+                    '`', currentProperty === null || currentProperty === void 0 ? void 0 :
+                    currentProperty.type,
+                    '`')),
+            react_1.default.createElement("div", { className: prefix + '-coder' },
+                react_1.default.createElement(react_settings_form_1.MonacoInput, { key: selectKeys[0], language: "javascript.expression", extraLib: props.extraLib, helpCode: template(currentProperty === null || currentProperty === void 0 ? void 0 : currentProperty.helpCode), value: parseExpression(value[selectKeys[0]]), options: {
+                        lineNumbers: 'off',
+                        wordWrap: 'on',
+                        glyphMargin: false,
+                        folding: false,
+                        lineDecorationsWidth: 0,
+                        lineNumbersMinChars: 0,
+                        minimap: {
+                            enabled: false,
+                        },
+                    }, onChange: (expression) => {
+                        var _a;
+                        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, filterEmpty({
+                            ...value,
+                            [selectKeys[0]]: `{{${expression}}}`,
+                        }));
+                    } })),
+            react_1.default.createElement("div", { className: prefix + '-coder-end' }, `)`))));
+};
+exports.FieldPropertySetter = FieldPropertySetter;

package/lib/components/ReactionsSetter/PathSelector.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TreeNode } from '@formily-design/core';
+import { TreeSelectProps } from 'antd';
+export interface IPathSelectorProps extends Omit<TreeSelectProps<any>, 'onChange'> {
+    value?: string;
+    onChange?: (value: string, node: TreeNode) => void;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export declare const PathSelector: React.FC<IPathSelectorProps>;

package/lib/components/ReactionsSetter/PathSelector.js

@@ -0,0 +1,114 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PathSelector = void 0;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@formily-design/react");
+const antd_1 = require("antd");
+const transformDataSource = (node) => {
+    const currentNode = node;
+    const dots = (count) => {
+        let dots = '';
+        for (let i = 0; i < count; i++) {
+            dots += '.';
+        }
+        return dots;
+    };
+    const targetPath = (parentNode, targetNode) => {
+        const path = [];
+        const transform = (node) => {
+            if (node && node !== parentNode) {
+                path.push(node.props.name || node.id);
+            }
+            else {
+                transform(node.parent);
+            }
+        };
+        transform(targetNode);
+        return path.reverse().join('.');
+    };
+    const hasNoVoidChildren = (node) => {
+        var _a;
+        return (_a = node.children) === null || _a === void 0 ? void 0 : _a.some((node) => {
+            if (node.props.type !== 'void' && node !== currentNode)
+                return true;
+            return hasNoVoidChildren(node);
+        });
+    };
+    const findRoot = (node) => {
+        var _a;
+        if (!(node === null || node === void 0 ? void 0 : node.parent))
+            return node;
+        if (((_a = node === null || node === void 0 ? void 0 : node.parent) === null || _a === void 0 ? void 0 : _a.componentName) !== node.componentName)
+            return node.parent;
+        return findRoot(node.parent);
+    };
+    const findArrayParent = (node) => {
+        if (!(node === null || node === void 0 ? void 0 : node.parent))
+            return;
+        if (node.parent.props.type === 'array')
+            return node.parent;
+        if (node.parent === root)
+            return;
+        return findArrayParent(node.parent);
+    };
+    const transformRelativePath = (arrayNode, targetNode) => {
+        if (targetNode.depth === currentNode.depth)
+            return `.${targetNode.props.name || targetNode.id}`;
+        return `${dots(currentNode.depth - arrayNode.depth)}[].${targetPath(arrayNode, targetNode)}`;
+    };
+    const transformChildren = (children, path = []) => {
+        return children.reduce((buf, node) => {
+            var _a;
+            if (node === currentNode)
+                return buf;
+            if (node.props.type === 'array' && !node.contains(currentNode))
+                return buf;
+            if (node.props.type === 'void' && !hasNoVoidChildren(node))
+                return buf;
+            const currentPath = path.concat(node.props.name || node.id);
+            const arrayNode = findArrayParent(node);
+            const label = node.props.title ||
+                ((_a = node.props['x-component-props']) === null || _a === void 0 ? void 0 : _a.title) ||
+                node.props.name ||
+                node.designerProps.title;
+            const value = arrayNode
+                ? transformRelativePath(arrayNode, node)
+                : currentPath.join('.');
+            return buf.concat({
+                label,
+                value,
+                node,
+                children: transformChildren(node.children, currentPath),
+            });
+        }, []);
+    };
+    const root = findRoot(node);
+    if (root) {
+        return transformChildren(root.children);
+    }
+    return [];
+};
+const PathSelector = (props) => {
+    const baseNode = (0, react_2.useSelectedNode)();
+    const dataSource = transformDataSource(baseNode);
+    const findNode = (dataSource, value) => {
+        var _a;
+        for (let i = 0; i < dataSource.length; i++) {
+            const item = dataSource[i];
+            if (item.value === value)
+                return item.node;
+            if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
+                const fondedChild = findNode(item.children, value);
+                if (fondedChild)
+                    return fondedChild;
+            }
+        }
+    };
+    return (react_1.default.createElement(antd_1.TreeSelect, { ...props, onChange: (value) => {
+            props.onChange(value, findNode(dataSource, value));
+        }, treeDefaultExpandAll: true, treeData: dataSource }));
+};
+exports.PathSelector = PathSelector;

package/lib/components/ReactionsSetter/declarations.d.ts

@@ -0,0 +1,5 @@
+export interface IDependency {
+    name: string;
+    path: string;
+}
+export declare const initDeclaration: () => Promise<void>;

package/lib/components/ReactionsSetter/declarations.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initDeclaration = void 0;
+const react_settings_form_1 = require("@formily-design/react-settings-form");
+const loadDependencies = async (deps) => {
+    return Promise.all(deps.map(async ({ name, path }) => ({
+        name,
+        path,
+        library: await fetch(`${(0, react_settings_form_1.getNpmCDNRegistry)()}/${name}/${path}`).then((res) => res.text()),
+    })));
+};
+const initDeclaration = async () => {
+    return react_settings_form_1.MonacoInput.loader.init().then(async (monaco) => {
+        const deps = await loadDependencies([
+            { name: '@formily/core', path: 'dist/formily.core.all.d.ts' },
+        ]);
+        deps === null || deps === void 0 ? void 0 : deps.forEach(({ name, library }) => {
+            monaco.languages.typescript.typescriptDefaults.addExtraLib(`declare module '${name}'{ ${library} }`, `file:///node_modules/${name}/index.d.ts`);
+        });
+        monaco.languages.typescript.typescriptDefaults.addExtraLib(`
+    import { Form, Field } from '@formily/core'
+    declare global {
+      /*
+       * Form Model
+       **/
+      declare var $form: Form
+      /*
+       * Form Values
+       **/
+      declare var $values: any
+      /*
+       * Field Model
+       **/
+      declare var $self: Field
+      /*
+       * create an persistent observable state object
+       **/
+      declare var $observable: <T>(target: T, deps?: any[]) => T
+      /*
+       * create a persistent data
+       **/
+      declare var $memo: <T>(callback: () => T, deps?: any[]) => T
+      /*
+       * handle side-effect logic
+       **/
+      declare var $effect: (callback: () => void | (() => void), deps?: any[]) => void
+      /*
+       * set initial component props to current field
+       **/
+      declare var $props: (props: any) => void
+    }
+    `, `file:///node_modules/formily_global.d.ts`);
+    });
+};
+exports.initDeclaration = initDeclaration;

package/lib/components/ReactionsSetter/helpers.d.ts

@@ -0,0 +1,10 @@
+export declare const GlobalHelper = "\n/** \n * You can use the built-in context variables\n * \n * 1. `$self` is the current Field Model \n * \n * 2. `$form` is the current Form Model \n * \n * 3. `$deps` is the dependencies value\n * \n * 4. `$observable` function is used to create an persistent observable state object\n *\n * 5. `$memo` function is is used to create a persistent data\n * \n * 6. `$effect` function is used to handle side-effect logic\n * \n * 7. `$props` function is used to set component props to current field\n * \n * Document Links\n * \n * https://react.formilyjs.org/api/shared/schema#%E5%86%85%E7%BD%AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F\n **/\n";
+export declare const BooleanHelper = "\n/** \n * Example 1\n * Static Boolean\n **/\n\nfalse\n\n/** \n * Example 2\n * Equal Calculation\n **/\n\n$deps.VariableName === 'TARGET_VALUE'\n\n/** \n * Example 3\n * Not Equal Calculation\n **/\n\n$deps.VariableName !== 'TARGET_VALUE'\n\n/** \n * Example 4\n * And Logic Calculation\n **/\n\n$deps.VariableName1 && $deps.VariableName2\n\n/** \n * Example 5\n * Grater Logic Calculation\n **/\n\n$deps.VariableName > 100\n\n/** \n * Example 6\n * Not Logic Calculation\n **/\n\n!$deps.VariableName\n\n\n/** \n * You can use the built-in context variables\n * \n * 1. `$self` is the current Field Model \n * \n * 2. `$form` is the current Form Model \n * \n * 3. `$deps` is the dependencies value\n * \n * 4. `$observable` function is used to create an persistent observable state object\n *\n * 5. `$memo` function is is used to create a persistent data\n * \n * 6. `$effect` function is used to handle side-effect logic\n * \n * 7. `$props` function is used to set component props to current field\n * \n * Document Links\n * \n * https://react.formilyjs.org/api/shared/schema#%E5%86%85%E7%BD%AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F\n **/\n\n";
+export declare const DisplayHelper = "\n/** \n * Example 1\n * Static Mode\n **/\n\n'none'\n\n/** \n * Example 2\n * Equal Condition Associated\n **/\n\n$deps.VariableName === 'TARGET_VALUE' ? 'visible' : 'none'\n\n/** \n * Example 3\n * Not Equal Condition Associated\n **/\n\n$deps.VariableName !== 'TARGET_VALUE' ? 'visible' : 'hidden'\n\n/** \n * Example 4\n * And Logic Condition Associated\n **/\n\n$deps.VariableName1 && $deps.VariableName2 ? 'visible' : 'none'\n\n/** \n * Example 5\n * Grater Logic Condition Associated\n **/\n\n$deps.VariableName > 100 ? 'visible' : 'hidden'\n\n/** \n * Example 6\n * Not Logic Condition Associated\n **/\n\n!$deps.VariableName ? 'visible' : 'none'\n\n\n/** \n * You can use the built-in context variables\n * \n * 1. `$self` is the current Field Model \n * \n * 2. `$form` is the current Form Model \n * \n * 3. `$deps` is the dependencies value\n * \n * 4. `$observable` function is used to create an persistent observable state object\n *\n * 5. `$memo` function is is used to create a persistent data\n * \n * 6. `$effect` function is used to handle side-effect logic\n * \n * 7. `$props` function is used to set component props to current field\n * \n * Document Links\n * \n * https://react.formilyjs.org/api/shared/schema#%E5%86%85%E7%BD%AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F\n **/\n\n";
+export declare const PatternHelper = "\n/** \n * Example 1\n * Static Mode\n **/\n\n'readPretty'\n\n/** \n * Example 2\n * Equal Condition Associated\n **/\n\n$deps.VariableName === 'TARGET_VALUE' ? 'editable' : 'disabled'\n\n/** \n * Example 3\n * Not Equal Condition Associated\n **/\n\n$deps.VariableName !== 'TARGET_VALUE' ? 'editable' : 'readOnly'\n\n/** \n * Example 4\n * And Logic Condition Associated\n **/\n\n$deps.VariableName1 && $deps.VariableName2 ? 'editable' : 'readPretty'\n\n/** \n * Example 5\n * Grater Logic Condition Associated\n **/\n\n$deps.VariableName > 100 ? 'editable' : 'readOnly'\n\n/** \n * Example 6\n * Not Logic Condition Associated\n **/\n\n!$deps.VariableName ? 'editable' : 'disabled'\n\n\n/** \n * You can use the built-in context variables\n * \n * 1. `$self` is the current Field Model \n * \n * 2. `$form` is the current Form Model \n * \n * 3. `$deps` is the dependencies value\n * \n * 4. `$observable` function is used to create an persistent observable state object\n *\n * 5. `$memo` function is is used to create a persistent data\n * \n * 6. `$effect` function is used to handle side-effect logic\n * \n * 7. `$props` function is used to set component props to current field\n * \n * Document Links\n * \n * https://react.formilyjs.org/api/shared/schema#%E5%86%85%E7%BD%AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F\n **/\n\n";
+export declare const StringHelper = "\n/** \n * Example 1\n * Static String\n **/\n\n'Normal String Text'\n\n/** \n * Example 2\n * Associated String\n **/\n\n$deps.VariableName === 'TARGET_VALUE' ? 'Associated String Text' : ''\n\n\n/** \n * You can use the built-in context variables\n * \n * 1. `$self` is the current Field Model \n * \n * 2. `$form` is the current Form Model \n * \n * 3. `$deps` is the dependencies value\n * \n * 4. `$observable` function is used to create an persistent observable state object\n *\n * 5. `$memo` function is is used to create a persistent data\n * \n * 6. `$effect` function is used to handle side-effect logic\n * \n * 7. `$props` function is used to set component props to current field\n * \n * Document Links\n * \n * https://react.formilyjs.org/api/shared/schema#%E5%86%85%E7%BD%AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F\n **/\n\n";
+export declare const AnyHelper = "\n/** \n * Example 1\n * String Type\n **/\n\n'String'\n\n/** \n * Example 2\n * String Array\n **/\n\n['StringArray']\n\n/** \n * Example 3\n * Object Array\n **/\n\n[{ key: 'ObjectArray' }]\n\n/** \n * Example 4\n * Boolean\n **/\n\ntrue\n\n/** \n * Example 5\n * RegExp\n **/\n\n/d+/\n\n/** \n * Example 1\n * Associated String Value\n **/\n\n$deps.VariableName + 'Compose String'\n\n/** \n * Example 2\n * Associated Array Value\n **/\n\n[ $deps.VariableName ]\n\n/** \n * Example 3\n * Associated Object Value\n **/\n\n{\n  key : $deps.VariableName\n}\n\n/** \n * Example 4\n * Associated Boolean Value\n **/\n\n!$deps.VariableName\n\n\n/** \n * You can use the built-in context variables\n * \n * 1. `$self` is the current Field Model \n * \n * 2. `$form` is the current Form Model \n * \n * 3. `$deps` is the dependencies value\n * \n * 4. `$observable` function is used to create an persistent observable state object\n *\n * 5. `$memo` function is is used to create a persistent data\n * \n * 6. `$effect` function is used to handle side-effect logic\n * \n * 7. `$props` function is used to set component props to current field\n * \n * Document Links\n * \n * https://react.formilyjs.org/api/shared/schema#%E5%86%85%E7%BD%AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F\n **/\n\n";
+export declare const DataSourceHelper = "\n/** \n * Example 1\n * Static DataSource\n **/\n\n[\n  { label : \"item1\", value: \"1\" },\n  { label : \"item2\", value: \"2\" }\n]\n\n/** \n * Example 2\n * Associated DataSource\n **/\n\n[\n  { label : \"item1\", value: \"1\" },\n  { label : \"item2\", value: \"2\" },\n  ...$deps.VariableName\n]\n\n\n/** \n * You can use the built-in context variables\n * \n * 1. `$self` is the current Field Model \n * \n * 2. `$form` is the current Form Model \n * \n * 3. `$deps` is the dependencies value\n * \n * 4. `$observable` function is used to create an persistent observable state object\n *\n * 5. `$memo` function is is used to create a persistent data\n * \n * 6. `$effect` function is used to handle side-effect logic\n * \n * 7. `$props` function is used to set component props to current field\n * \n * Document Links\n * \n * https://react.formilyjs.org/api/shared/schema#%E5%86%85%E7%BD%AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F\n **/\n\n";
+export declare const ComponentPropsHelper = "\n/** \n * Example 1\n * Static Props\n **/\n\n{\n  placeholder: \"This is placeholder\"\n}\n\n/** \n * Example 2\n * Associated Props\n **/\n\n{\n  placeholder: $deps.VariableName\n}\n\n\n/** \n * You can use the built-in context variables\n * \n * 1. `$self` is the current Field Model \n * \n * 2. `$form` is the current Form Model \n * \n * 3. `$deps` is the dependencies value\n * \n * 4. `$observable` function is used to create an persistent observable state object\n *\n * 5. `$memo` function is is used to create a persistent data\n * \n * 6. `$effect` function is used to handle side-effect logic\n * \n * 7. `$props` function is used to set component props to current field\n * \n * Document Links\n * \n * https://react.formilyjs.org/api/shared/schema#%E5%86%85%E7%BD%AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F\n **/\n\n";
+export declare const DecoratorPropsHelper = "\n/** \n * Example 1\n * Static Props\n **/\n\n{\n  labelCol:6\n}\n\n/** \n * Example 2\n * Associated Props\n **/\n\n{\n  labelCol: $deps.VariableName\n}\n\n\n/** \n * You can use the built-in context variables\n * \n * 1. `$self` is the current Field Model \n * \n * 2. `$form` is the current Form Model \n * \n * 3. `$deps` is the dependencies value\n * \n * 4. `$observable` function is used to create an persistent observable state object\n *\n * 5. `$memo` function is is used to create a persistent data\n * \n * 6. `$effect` function is used to handle side-effect logic\n * \n * 7. `$props` function is used to set component props to current field\n * \n * Document Links\n * \n * https://react.formilyjs.org/api/shared/schema#%E5%86%85%E7%BD%AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F\n **/\n\n";
+export declare const FulfillRunHelper = "\n/** \n * Example 1\n * Async Select\n **/\n\n$effect(()=>{\n  $self.loading = true\n  fetch('//some.domain/getSomething')\n    .then(response=>response.json())\n    .then(({ data })=>{\n      $self.loading = false\n      $self.dataSource = data\n    },()=>{\n      $self.loading = false\n    })\n},[])\n  \n\n/** \n * Example 2\n * Async Search Select\n **/\n\nconst state = $observable({\n  keyword:''\n})\n\n$props({\n  onSearch(keyword){\n    state.keyword = keyword\n  }\n})\n\n$effect(()=>{\n  $self.loading = true\n  fetch(`//some.domain/getSomething?q=${state.keyword}`)\n    .then(response=>response.json())\n    .then(({ data })=>{\n      $self.loading = false\n      $self.dataSource = data\n    },()=>{\n      $self.loading = false\n    })\n},[ state.keyword ])\n\n/** \n * Example 3\n * Async Associated Select\n **/\n\nconst state = $observable({\n  keyword:''\n})\n\n$props({\n  onSearch(keyword){\n    state.keyword = keyword\n  }\n})\n\n$effect(()=>{\n  $self.loading = true\n  fetch(`//some.domain/getSomething?q=${state.keyword}&other=${$deps.VariableName}`)\n    .then(response=>response.json())\n    .then(({ data })=>{\n      $self.loading = false\n      $self.dataSource = data\n    },()=>{\n      $self.loading = false\n    })\n},[ state.keyword, $deps.VariableName ])\n\n\n/** \n * You can use the built-in context variables\n * \n * 1. `$self` is the current Field Model \n * \n * 2. `$form` is the current Form Model \n * \n * 3. `$deps` is the dependencies value\n * \n * 4. `$observable` function is used to create an persistent observable state object\n *\n * 5. `$memo` function is is used to create a persistent data\n * \n * 6. `$effect` function is used to handle side-effect logic\n * \n * 7. `$props` function is used to set component props to current field\n * \n * Document Links\n * \n * https://react.formilyjs.org/api/shared/schema#%E5%86%85%E7%BD%AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F\n **/\n\n";