@thienvu18/designable-formily-setters 2.0.0

package/esm/locales/en-US.d.ts

@@ -0,0 +1,93 @@
+declare const _default: {
+    'en-US': {
+        settings: {
+            'x-validator': {
+                title: string;
+                addValidatorRules: string;
+                drawer: string;
+                triggerType: {
+                    title: string;
+                    placeholder: string;
+                    dataSource: string[];
+                };
+                format: {
+                    title: string;
+                    placeholder: string;
+                    dataSource: {
+                        label: string;
+                        value: string;
+                    }[];
+                };
+                validator: {
+                    title: string;
+                    tooltip: string;
+                };
+                pattern: string;
+                len: string;
+                max: string;
+                min: string;
+                exclusiveMaximum: string;
+                exclusiveMinimum: string;
+                whitespace: string;
+                required: string;
+                message: {
+                    title: string;
+                    tooltip: string;
+                };
+            };
+        };
+        SettingComponents: {
+            DataSourceSetter: {
+                nodeProperty: string;
+                pleaseSelectNode: string;
+                addKeyValuePair: string;
+                configureDataSource: string;
+                dataSource: string;
+                defaultTitle: string;
+                dataSourceTree: string;
+                addNode: string;
+                label: string;
+                value: string;
+                item: string;
+            };
+            ReactionsSetter: {
+                configureReactions: string;
+                relationsFields: string;
+                variableName: string;
+                variableNameValidateMessage: string;
+                pleaseInput: string;
+                sourceField: string;
+                sourceProperty: string;
+                variableType: string;
+                operations: string;
+                addRelationField: string;
+                propertyReactions: string;
+                actionReactions: string;
+                visible: string;
+                hidden: string;
+                display: string;
+                pattern: string;
+                title: string;
+                description: string;
+                value: string;
+                initialValue: string;
+                dataSource: string;
+                required: string;
+                component: string;
+                componentProps: string;
+                decorator: string;
+                decoratorProps: string;
+                pleaseSelect: string;
+                expressionValueTypeIs: string;
+            };
+            ValidatorSetter: {
+                pleaseSelect: string;
+                formats: {
+                    label: string;
+                    value: string;
+                }[];
+            };
+        };
+    };
+};
+export default _default;

package/esm/locales/en-US.js

@@ -0,0 +1,98 @@
+const ValidatorFormats = [
+    { label: 'URL', value: 'url' },
+    { label: 'Email', value: 'email' },
+    { label: 'Number', value: 'number' },
+    { label: 'Integer', value: 'integer' },
+    { label: 'ID', value: 'idcard' },
+    { label: 'Phone Number', value: 'phone' },
+    { label: 'Currency', value: 'money' },
+    { label: 'Chinese', value: 'zh' },
+    { label: 'Date', value: 'date' },
+    { label: 'Zip', value: 'zip' },
+];
+export default {
+    'en-US': {
+        settings: {
+            'x-validator': {
+                title: 'Validator',
+                addValidatorRules: 'Add Validator Rules',
+                drawer: 'Edit Rules',
+                triggerType: {
+                    title: 'Trigger Type',
+                    placeholder: 'Please Select',
+                    dataSource: ['onInput', 'onFocus', 'onBlur'],
+                },
+                format: {
+                    title: 'Format',
+                    placeholder: 'Please Select',
+                    dataSource: ValidatorFormats,
+                },
+                validator: {
+                    title: 'Custom Validator',
+                    tooltip: 'Format: function (value){ return "Error Message"}',
+                },
+                pattern: 'RegExp',
+                len: 'Length Limit',
+                max: 'Length/Value Lt',
+                min: 'Length/Value Gt',
+                exclusiveMaximum: 'Length/Value Lte',
+                exclusiveMinimum: 'Length/Value Gte',
+                whitespace: 'No Whitespace',
+                required: 'Required',
+                message: {
+                    title: 'Error Message',
+                    tooltip: 'The error message is only effective for one built-in rule of the current rule set. If you need to customize the error message for different built-in rules, please split into multiple rules',
+                },
+            },
+        },
+        SettingComponents: {
+            DataSourceSetter: {
+                nodeProperty: 'Node Property',
+                pleaseSelectNode: 'please select node from the tree on the left',
+                addKeyValuePair: 'Add Key Value Pair',
+                configureDataSource: 'Configure',
+                dataSource: 'Options',
+                defaultTitle: 'Default Title',
+                dataSourceTree: 'Options Tree',
+                addNode: 'Add Node',
+                label: 'label',
+                value: 'value',
+                item: 'Item',
+            },
+            ReactionsSetter: {
+                configureReactions: 'Configure',
+                relationsFields: 'Associated Fields',
+                variableName: 'Variable Name',
+                variableNameValidateMessage: 'This is not a standard variable name',
+                pleaseInput: 'Please Input',
+                sourceField: 'Source Field',
+                sourceProperty: 'Field Property',
+                variableType: 'Variable Type',
+                operations: 'Operations',
+                addRelationField: 'Add Associated Field',
+                propertyReactions: 'Property Reactions(Only Support Javascript Expression)',
+                actionReactions: 'Action Reactions(Optional, Support Javascript Statement)',
+                visible: 'Show/None',
+                hidden: 'Show/UI Hidden',
+                display: 'Display',
+                pattern: 'Pattern',
+                title: 'Title',
+                description: 'Description',
+                value: 'Value',
+                initialValue: 'InitialValue',
+                dataSource: 'Options',
+                required: 'Required',
+                component: 'Component',
+                componentProps: 'Component Props',
+                decorator: 'Decorator',
+                decoratorProps: 'Decorator Props',
+                pleaseSelect: 'Please Select',
+                expressionValueTypeIs: 'Expression value type is',
+            },
+            ValidatorSetter: {
+                pleaseSelect: 'Please Select',
+                formats: ValidatorFormats,
+            },
+        },
+    },
+};

package/esm/locales/index.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/locales/index.js

@@ -0,0 +1,5 @@
+import { GlobalRegistry } from '@thienvu18/designable-core';
+import zhCN from './zh-CN';
+import enUS from './en-US';
+import koKR from './ko-KR';
+GlobalRegistry.registerDesignerLocales(zhCN, enUS, koKR);

package/esm/locales/ko-KR.d.ts

@@ -0,0 +1,93 @@
+declare const _default: {
+    'ko-KR': {
+        settings: {
+            'x-validator': {
+                title: string;
+                addValidatorRules: string;
+                drawer: string;
+                triggerType: {
+                    title: string;
+                    placeholder: string;
+                    dataSource: string[];
+                };
+                format: {
+                    title: string;
+                    placeholder: string;
+                    dataSource: {
+                        label: string;
+                        value: string;
+                    }[];
+                };
+                validator: {
+                    title: string;
+                    tooltip: string;
+                };
+                pattern: string;
+                len: string;
+                max: string;
+                min: string;
+                exclusiveMaximum: string;
+                exclusiveMinimum: string;
+                whitespace: string;
+                required: string;
+                message: {
+                    title: string;
+                    tooltip: string;
+                };
+            };
+        };
+        SettingComponents: {
+            DataSourceSetter: {
+                nodeProperty: string;
+                pleaseSelectNode: string;
+                addKeyValuePair: string;
+                configureDataSource: string;
+                dataSource: string;
+                defaultTitle: string;
+                dataSourceTree: string;
+                addNode: string;
+                label: string;
+                value: string;
+                item: string;
+            };
+            ReactionsSetter: {
+                configureReactions: string;
+                relationsFields: string;
+                variableName: string;
+                variableNameValidateMessage: string;
+                pleaseInput: string;
+                sourceField: string;
+                sourceProperty: string;
+                variableType: string;
+                operations: string;
+                addRelationField: string;
+                propertyReactions: string;
+                actionReactions: string;
+                visible: string;
+                hidden: string;
+                display: string;
+                pattern: string;
+                title: string;
+                description: string;
+                value: string;
+                initialValue: string;
+                dataSource: string;
+                required: string;
+                component: string;
+                componentProps: string;
+                decorator: string;
+                decoratorProps: string;
+                pleaseSelect: string;
+                expressionValueTypeIs: string;
+            };
+            ValidatorSetter: {
+                pleaseSelect: string;
+                formats: {
+                    label: string;
+                    value: string;
+                }[];
+            };
+        };
+    };
+};
+export default _default;

package/esm/locales/ko-KR.js

@@ -0,0 +1,98 @@
+const ValidatorFormats = [
+    { label: 'URL', value: 'url' },
+    { label: '이메일', value: 'email' },
+    { label: '숫자', value: 'number' },
+    { label: '상수', value: 'integer' },
+    { label: 'ID', value: 'idcard' },
+    { label: '휴대폰 번호', value: 'phone' },
+    { label: '통화', value: 'money' },
+    { label: '중국', value: 'zh' },
+    { label: '날짜', value: 'date' },
+    { label: 'Zip', value: 'zip' },
+];
+export default {
+    'ko-KR': {
+        settings: {
+            'x-validator': {
+                title: '유효성 검사 도구',
+                addValidatorRules: '유효성 검사 규칙 추가',
+                drawer: '규칙 수정',
+                triggerType: {
+                    title: '트리거 타입',
+                    placeholder: '선택하세요',
+                    dataSource: ['onInput', 'onFocus', 'onBlur'],
+                },
+                format: {
+                    title: '포맷',
+                    placeholder: '선택하세요',
+                    dataSource: ValidatorFormats,
+                },
+                validator: {
+                    title: '사용자 정의 유효성 검사 도구',
+                    tooltip: '형식: function (value){ return "Error Message"}',
+                },
+                pattern: 'RegExp',
+                len: '길이 제한',
+                max: '길이/값 Lt',
+                min: '길이/값 Gt',
+                exclusiveMaximum: '길이/값 Lte',
+                exclusiveMinimum: '길이/값 Gte',
+                whitespace: '공백 없음',
+                required: '필수 항목',
+                message: {
+                    title: '오류 메시지',
+                    tooltip: '오류 메시지는 현재의 규칙 셋의 하나의 빌트인 규칙에 대해서만 적용됩니다. 여러 빌트인 규칙에 대한 오류 메시지를 사용자 정의해야 하는 경우 여러 규칙으로 분할하세요.',
+                },
+            },
+        },
+        SettingComponents: {
+            DataSourceSetter: {
+                nodeProperty: '노드 속성',
+                pleaseSelectNode: '왼쪽에 있는 트리에서 노드를 선택하세요.',
+                addKeyValuePair: '키/값 쌍 추가',
+                configureDataSource: '구성',
+                dataSource: 'Options',
+                defaultTitle: '기본 제목',
+                dataSourceTree: 'Options 트리',
+                addNode: '노드 추가',
+                label: '레이블',
+                value: '값',
+                item: '아이템',
+            },
+            ReactionsSetter: {
+                configureReactions: '구성',
+                relationsFields: '관련 필드',
+                variableName: '변수 이름',
+                variableNameValidateMessage: '표준 변수 이름이 아닙니다.',
+                pleaseInput: '입력해주세요',
+                sourceField: 'Source Field',
+                sourceProperty: '필드 속성',
+                variableType: '변수 타입',
+                operations: '작업',
+                addRelationField: '관련 필드 추가',
+                propertyReactions: '구성 리엑션(자바스크립트 표현식만 지원함)',
+                actionReactions: '액션 리엑션(선택사항, 자바스크립트 구문을 지원함)',
+                visible: '보기/없음',
+                hidden: '보기/UI 숨기기',
+                display: '디스플레이',
+                pattern: '패턴',
+                title: '제목',
+                description: '설명',
+                value: '값',
+                initialValue: '초기값',
+                dataSource: 'Options',
+                required: '필수 항목',
+                component: '컴포넌트',
+                componentProps: '컴포넌트 속성',
+                decorator: '테코레이터',
+                decoratorProps: '테코레이터 속성',
+                pleaseSelect: '선택하세요',
+                expressionValueTypeIs: '표현식 값 타입은',
+            },
+            ValidatorSetter: {
+                pleaseSelect: '선택하세요',
+                formats: ValidatorFormats,
+            },
+        },
+    },
+};

package/esm/locales/zh-CN.d.ts

@@ -0,0 +1,93 @@
+declare const _default: {
+    'zh-CN': {
+        settings: {
+            'x-validator': {
+                title: string;
+                addValidatorRules: string;
+                drawer: string;
+                triggerType: {
+                    title: string;
+                    placeholder: string;
+                    dataSource: string[];
+                };
+                format: {
+                    title: string;
+                    placeholder: string;
+                    dataSource: {
+                        label: string;
+                        value: string;
+                    }[];
+                };
+                validator: {
+                    title: string;
+                    tooltip: string;
+                };
+                pattern: string;
+                len: string;
+                max: string;
+                min: string;
+                exclusiveMaximum: string;
+                exclusiveMinimum: string;
+                whitespace: string;
+                required: string;
+                message: {
+                    title: string;
+                    tooltip: string;
+                };
+            };
+        };
+        SettingComponents: {
+            DataSourceSetter: {
+                nodeProperty: string;
+                pleaseSelectNode: string;
+                addKeyValuePair: string;
+                configureDataSource: string;
+                dataSource: string;
+                defaultTitle: string;
+                dataSourceTree: string;
+                addNode: string;
+                label: string;
+                value: string;
+                item: string;
+            };
+            ReactionsSetter: {
+                configureReactions: string;
+                relationsFields: string;
+                variableName: string;
+                variableNameValidateMessage: string;
+                pleaseInput: string;
+                sourceField: string;
+                sourceProperty: string;
+                variableType: string;
+                operations: string;
+                addRelationField: string;
+                propertyReactions: string;
+                actionReactions: string;
+                visible: string;
+                hidden: string;
+                display: string;
+                pattern: string;
+                title: string;
+                description: string;
+                value: string;
+                initialValue: string;
+                dataSource: string;
+                required: string;
+                component: string;
+                componentProps: string;
+                decorator: string;
+                decoratorProps: string;
+                pleaseSelect: string;
+                expressionValueTypeIs: string;
+            };
+            ValidatorSetter: {
+                pleaseSelect: string;
+                formats: {
+                    label: string;
+                    value: string;
+                }[];
+            };
+        };
+    };
+};
+export default _default;

package/esm/locales/zh-CN.js

@@ -0,0 +1,98 @@
+const ValidatorFormats = [
+    { label: 'URL地址', value: 'url' },
+    { label: '邮箱格式', value: 'email' },
+    { label: '数字格式', value: 'number' },
+    { label: '整数格式', value: 'integer' },
+    { label: '身份证格式', value: 'idcard' },
+    { label: '手机号格式', value: 'phone' },
+    { label: '货币格式', value: 'money' },
+    { label: '中文格式', value: 'zh' },
+    { label: '日期格式', value: 'date' },
+    { label: '邮编格式', value: 'zip' },
+];
+export default {
+    'zh-CN': {
+        settings: {
+            'x-validator': {
+                title: '校验规则',
+                addValidatorRules: '添加校验规则',
+                drawer: '配置规则',
+                triggerType: {
+                    title: '触发类型',
+                    placeholder: '请选择',
+                    dataSource: ['输入时', '聚焦时', '失焦时'],
+                },
+                format: {
+                    title: '格式校验',
+                    placeholder: '请选择',
+                    dataSource: ValidatorFormats,
+                },
+                validator: {
+                    title: '自定义校验器',
+                    tooltip: '格式: function (value){ return "Error Message"}',
+                },
+                pattern: '正则表达式',
+                len: '长度限制',
+                max: '长度/数值小于',
+                min: '长度/数值大于',
+                exclusiveMaximum: '长度/数值小于等于',
+                exclusiveMinimum: '长度/数值大于等于',
+                whitespace: '不允许空白符',
+                required: '是否必填',
+                message: {
+                    title: '错误消息',
+                    tooltip: '错误消息只对当前规则集的一个内置规则生效，如果需要对不同内置规则定制错误消息，请拆分成多条规则',
+                },
+            },
+        },
+        SettingComponents: {
+            DataSourceSetter: {
+                nodeProperty: '节点属性',
+                pleaseSelectNode: '请先选择左侧树节点',
+                addKeyValuePair: '添加键值对',
+                configureDataSource: '配置可选项',
+                dataSource: '可选项',
+                defaultTitle: '默认标题',
+                dataSourceTree: '可选项节点树',
+                addNode: '新增节点',
+                label: '键名',
+                value: '键值',
+                item: '选项',
+            },
+            ReactionsSetter: {
+                configureReactions: '配置响应器',
+                relationsFields: '依赖字段',
+                variableName: '变量名',
+                variableNameValidateMessage: '不符合变量命名规则',
+                pleaseInput: '请输入',
+                sourceField: '来源字段',
+                sourceProperty: '字段属性',
+                variableType: '变量类型',
+                operations: '操作',
+                addRelationField: '添加依赖字段',
+                propertyReactions: '属性响应(仅支持JS表达式)',
+                actionReactions: '动作响应(高级，可选，支持JS语句)',
+                visible: '显示/隐藏',
+                hidden: 'UI隐藏',
+                display: '展示状态',
+                pattern: 'UI形态',
+                title: '标题',
+                description: '描述',
+                value: '字段值',
+                initialValue: '默认值',
+                dataSource: '可选项',
+                required: '是否必填',
+                component: '组件',
+                componentProps: '组件属性',
+                decorator: '容器',
+                decoratorProps: '容器属性',
+                pleaseSelect: '请选择',
+                expressionValueTypeIs: '表达式值类型为',
+            },
+            ValidatorSetter: {
+                pleaseSelect: '请选择',
+                formats: ValidatorFormats,
+            },
+        },
+    },
+};

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Form as FormCore } from '@formily/core';
+import { ITreeDataSource } from './types';
+import './styles.less';
+export interface IDataSettingPanelProps {
+    treeDataSource: ITreeDataSource;
+    allowExtendOption?: boolean;
+    effects?: (form: FormCore<any>) => void;
+}
+export declare const DataSettingPanel: React.FC<IDataSettingPanelProps>;

package/lib/components/DataSourceSetter/DataSettingPanel.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataSettingPanel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const antd_1 = require("antd");
+const icons_1 = require("@ant-design/icons");
+const formily_antd_v6_1 = require("@thienvu18/formily-antd-v6");
+const core_1 = require("@formily/core");
+const reactive_react_1 = require("@formily/reactive-react");
+const react_2 = require("@formily/react");
+const designable_react_settings_form_1 = require("@thienvu18/designable-react-settings-form");
+const designable_react_1 = require("@thienvu18/designable-react");
+const Header_1 = require("./Header");
+const shared_1 = require("./shared");
+require("./styles.less");
+const SchemaField = (0, react_2.createSchemaField)({
+    components: {
+        FormItem: formily_antd_v6_1.FormItem,
+        Input: formily_antd_v6_1.Input,
+        ArrayItems: formily_antd_v6_1.ArrayItems,
+        ValueInput: designable_react_settings_form_1.ValueInput,
+    },
+});
+exports.DataSettingPanel = (0, reactive_react_1.observer)((props) => {
+    const { allowExtendOption, effects } = props;
+    const prefix = (0, designable_react_1.usePrefix)('data-source-setter');
+    const form = (0, react_1.useMemo)(() => {
+        let values;
+        (0, shared_1.traverseTree)(props.treeDataSource.dataSource, (dataItem) => {
+            if (dataItem.key === props.treeDataSource.selectedKey) {
+                values = dataItem;
+            }
+        });
+        return (0, core_1.createForm)({
+            values,
+            effects: effects,
+        });
+    }, [
+        props.treeDataSource.selectedKey,
+        props.treeDataSource.dataSource.length,
+    ]);
+    if (!props.treeDataSource.selectedKey)
+        return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Header_1.Header, { title: (0, jsx_runtime_1.jsx)(designable_react_1.TextWidget, { token: "SettingComponents.DataSourceSetter.nodeProperty" }), extra: null }), (0, jsx_runtime_1.jsx)("div", { className: `${prefix + '-layout-item-content'}`, children: (0, jsx_runtime_1.jsx)(designable_react_1.TextWidget, { token: "SettingComponents.DataSourceSetter.pleaseSelectNode" }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Header_1.Header, { title: (0, jsx_runtime_1.jsx)(designable_react_1.TextWidget, { token: "SettingComponents.DataSourceSetter.nodeProperty" }), extra: allowExtendOption ? ((0, jsx_runtime_1.jsx)(antd_1.Button, { type: "text", onClick: () => {
+                        form.setFieldState('map', (state) => {
+                            state.value.push({});
+                        });
+                    }, icon: (0, jsx_runtime_1.jsx)(icons_1.PlusOutlined, {}), children: (0, jsx_runtime_1.jsx)(designable_react_1.TextWidget, { token: "SettingComponents.DataSourceSetter.addKeyValuePair" }) })) : null }), (0, jsx_runtime_1.jsx)("div", { className: `${prefix + '-layout-item-content'}`, children: (0, jsx_runtime_1.jsx)(formily_antd_v6_1.Form, { form: form, labelWidth: 60, wrapperWidth: 160, children: (0, jsx_runtime_1.jsx)(SchemaField, { children: (0, jsx_runtime_1.jsx)(SchemaField.Array, { name: "map", "x-component": "ArrayItems", children: (0, jsx_runtime_1.jsxs)(SchemaField.Object, { "x-decorator": "ArrayItems.Item", "x-decorator-props": { type: 'divide' }, children: [(0, jsx_runtime_1.jsx)(SchemaField.String, { title: (0, jsx_runtime_1.jsx)(designable_react_1.TextWidget, { token: "SettingComponents.DataSourceSetter.label" }), "x-decorator": "FormItem", "x-disabled": !allowExtendOption, name: "label", "x-component": "Input" }), (0, jsx_runtime_1.jsx)(SchemaField.String, { title: (0, jsx_runtime_1.jsx)(designable_react_1.TextWidget, { token: "SettingComponents.DataSourceSetter.value" }), "x-decorator": "FormItem", name: "value", "x-component": "ValueInput" }), (0, jsx_runtime_1.jsx)(SchemaField.Void, { "x-component": "ArrayItems.Remove", "x-visible": allowExtendOption, "x-component-props": {
+                                            style: {
+                                                margin: 5,
+                                                display: 'flex',
+                                                justifyContent: 'center',
+                                                alignItems: 'center',
+                                            },
+                                        } })] }) }) }) }) })] }));
+});

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

@@ -0,0 +1,7 @@
+import React, { ReactNode } from 'react';
+import './styles.less';
+export interface IHeaderProps {
+    extra: ReactNode | null;
+    title: ReactNode | string;
+}
+export declare const Header: React.FC<IHeaderProps>;

package/lib/components/DataSourceSetter/Header.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const reactive_react_1 = require("@formily/reactive-react");
+const designable_react_1 = require("@thienvu18/designable-react");
+require("./styles.less");
+exports.Header = (0, reactive_react_1.observer)(({ extra, title }) => {
+    const prefix = (0, designable_react_1.usePrefix)('data-source-setter');
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `${prefix + '-layout-item-header'}`, children: [(0, jsx_runtime_1.jsx)("div", { className: `${prefix + '-layout-item-title'}`, children: title }), extra] }));
+});