@thienvu18/designable-formily-setters 2.0.0

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

@@ -0,0 +1,11 @@
+export declare const FieldProperties: ({
+    key: string;
+    type: string;
+    helpCode: string;
+    token?: undefined;
+} | {
+    key: string;
+    token: string;
+    type: string;
+    helpCode: string;
+})[];

package/lib/components/ReactionsSetter/properties.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldProperties = void 0;
+const helpers_1 = require("./helpers");
+exports.FieldProperties = [
+    {
+        key: 'visible',
+        type: 'boolean',
+        helpCode: helpers_1.BooleanHelper,
+    },
+    { key: 'hidden', type: 'boolean', helpCode: helpers_1.BooleanHelper },
+    {
+        key: 'display',
+        type: '"visible" | "hidden" | "none"',
+        helpCode: helpers_1.DisplayHelper,
+    },
+    {
+        key: 'pattern',
+        type: '"editable" | "disabled" | "readOnly" | "readPretty"',
+        helpCode: helpers_1.PatternHelper,
+    },
+    { key: 'title', type: 'string', helpCode: helpers_1.StringHelper },
+    { key: 'description', type: 'string', helpCode: helpers_1.StringHelper },
+    { key: 'value', type: 'any', helpCode: helpers_1.AnyHelper },
+    { key: 'initialValue', type: 'any', helpCode: helpers_1.AnyHelper },
+    { key: 'required', type: 'boolean', helpCode: helpers_1.BooleanHelper },
+    {
+        key: 'dataSource',
+        type: 'Array<{label?:string,value?:any}>',
+        helpCode: helpers_1.DataSourceHelper,
+    },
+    {
+        key: 'componentProps',
+        token: 'componentProps',
+        type: 'object',
+        helpCode: helpers_1.ComponentPropsHelper,
+    },
+    {
+        key: 'decoratorProps',
+        token: 'decoratorProps',
+        type: 'object',
+        helpCode: helpers_1.DecoratorPropsHelper,
+    },
+];

package/lib/components/ReactionsSetter/styles.less

@@ -0,0 +1,105 @@
+
+.dn-reactions-setter {
+  width: 100%;
+  min-height: 623px;
+  overflow: hidden;
+
+  ::-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);
+  }
+
+  .@{ant-prefix}-collapse {
+    border: 1px solid var(--dn-color-border-secondary, rgba(5, 5, 5, 0.06));
+
+    &-header {
+      padding: 8px 10px !important;
+      background-color: var(--dn-color-bg-container, #fff) !important;
+      border-bottom: 1px solid var(--dn-color-border-secondary, rgba(5, 5, 5, 0.06)) !important;
+      font-weight: 500 !important;
+
+      .@{ant-prefix}-collapse-arrow {
+        margin-right: 4px !important;
+      }
+    }
+
+    &-item {
+      border: none !important;
+    }
+
+    &-content {
+      border: none !important;
+      transition: none !important;
+    }
+
+    &-content-box {
+      padding: 12px !important;
+    }
+  }
+
+  .reaction-runner {
+    .@{ant-prefix}-collapse-content-box {
+      padding: 12px 0 !important;
+    }
+  }
+
+  .reaction-state {
+    .@{ant-prefix}-collapse-content-box {
+      padding: 12px 0 !important;
+    }
+  }
+
+  .dn-field-property-setter {
+    display: flex;
+    height: 300px;
+
+    &-coder-wrapper {
+      display: flex;
+      flex-grow: 2;
+      height: 100%;
+      padding-left: 10px;
+      position: relative;
+      flex-direction: column;
+    }
+
+    &-coder-start {
+      font-size: 18px;
+      line-height: 30px;
+      margin-bottom: 4px;
+      color: var(--dn-color-text, rgba(0, 0, 0, 0.88));
+      font-weight: 300;
+      flex-grow: 0;
+      opacity: 0.96;
+      height: 31px;
+    }
+
+    &-coder-end {
+      font-size: 18px;
+      height: 31px;
+      color: var(--dn-color-text, rgba(0, 0, 0, 0.88));
+      margin-top: 4px;
+      margin-bottom: 4px;
+      line-height: 30px;
+      font-weight: 300;
+      flex-grow: 0;
+      opacity: 0.96;
+    }
+
+    &-coder {
+      min-width: 0;
+      flex-grow: 2;
+      padding-left: 10px;
+    }
+  }
+}
+@ant-prefix: ant;

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

@@ -0,0 +1,13 @@
+export interface IReaction {
+    dependencies?: {
+        [key: string]: string;
+    };
+    fulfill?: {
+        state?: {
+            [key: string]: string;
+        };
+        schema?: {
+            [key: string]: string;
+        };
+    };
+}

package/lib/components/ReactionsSetter/types.js

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

package/lib/components/ValidatorSetter/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface IValidatorSetterProps {
+    value?: any;
+    onChange?: (value: any) => void;
+}
+export declare const ValidatorSetter: React.FC<IValidatorSetterProps>;

package/lib/components/ValidatorSetter/index.js

@@ -0,0 +1,138 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ValidatorSetter = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@formily/react");
+const designable_core_1 = require("@thienvu18/designable-core");
+const formily_antd_v6_1 = require("@thienvu18/formily-antd-v6");
+const designable_react_settings_form_1 = require("@thienvu18/designable-react-settings-form");
+const antd_1 = require("antd");
+const ValidatorSchema = {
+    type: 'array',
+    items: {
+        type: 'object',
+        'x-decorator': 'ArrayItems.Item',
+        'x-decorator-props': {
+            style: {
+                alignItems: 'center',
+                borderRadius: 3,
+                paddingTop: 6,
+                paddingBottom: 6,
+            },
+        },
+        properties: {
+            sortable: {
+                type: 'void',
+                'x-component': 'ArrayItems.SortHandle',
+                'x-component-props': { style: { marginRight: 10 } },
+            },
+            drawer: {
+                type: 'void',
+                'x-component': 'DrawerSetter',
+                properties: {
+                    triggerType: {
+                        type: 'string',
+                        enum: ['onInput', 'onFocus', 'onBlur'],
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Select',
+                    },
+                    validator: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'ValueInput',
+                        'x-component-props': {
+                            include: ['EXPRESSION'],
+                        },
+                    },
+                    message: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Input.TextArea',
+                    },
+                    format: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Select',
+                        'x-component-props': {
+                            allowClear: true,
+                        },
+                    },
+                    pattern: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Input',
+                        'x-component-props': {
+                            prefix: '/',
+                            suffix: '/',
+                        },
+                    },
+                    len: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'NumberPicker',
+                    },
+                    max: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'NumberPicker',
+                    },
+                    min: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'NumberPicker',
+                    },
+                    exclusiveMaximum: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'NumberPicker',
+                    },
+                    exclusiveMinimum: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'NumberPicker',
+                    },
+                    whitespace: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Switch',
+                    },
+                    required: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Switch',
+                    },
+                },
+            },
+            moveDown: {
+                type: 'void',
+                'x-component': 'ArrayItems.MoveDown',
+                'x-component-props': { style: { marginLeft: 10 } },
+            },
+            moveUp: {
+                type: 'void',
+                'x-component': 'ArrayItems.MoveUp',
+                'x-component-props': { style: { marginLeft: 5 } },
+            },
+            remove: {
+                type: 'void',
+                'x-component': 'ArrayItems.Remove',
+                'x-component-props': { style: { marginLeft: 5 } },
+            },
+        },
+    },
+    properties: {
+        addValidatorRules: {
+            type: 'void',
+            'x-component': 'ArrayItems.Addition',
+            'x-component-props': {
+                style: {
+                    marginBottom: 10,
+                },
+            },
+        },
+    },
+};
+exports.ValidatorSetter = (0, react_1.observer)((props) => {
+    const field = (0, react_1.useField)();
+    return ((0, jsx_runtime_1.jsxs)(designable_react_settings_form_1.FoldItem, { label: field.title, children: [(0, jsx_runtime_1.jsx)(designable_react_settings_form_1.FoldItem.Base, { children: (0, jsx_runtime_1.jsx)(antd_1.Select, { value: Array.isArray(props.value) ? undefined : props.value, onChange: props.onChange, allowClear: true, placeholder: designable_core_1.GlobalRegistry.getDesignerMessage('SettingComponents.ValidatorSetter.pleaseSelect'), options: designable_core_1.GlobalRegistry.getDesignerMessage('SettingComponents.ValidatorSetter.formats') }) }), (0, jsx_runtime_1.jsx)(designable_react_settings_form_1.FoldItem.Extra, { children: (0, jsx_runtime_1.jsx)(react_1.SchemaContext.Provider, { value: new react_1.Schema(ValidatorSchema), children: (0, jsx_runtime_1.jsx)(formily_antd_v6_1.ArrayItems, {}) }) })] }));
+});

package/lib/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './DataSourceSetter';
+export * from './ReactionsSetter';
+export * from './ValidatorSetter';

package/lib/components/index.js

@@ -0,0 +1,19 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./DataSourceSetter"), exports);
+__exportStar(require("./ReactionsSetter"), exports);
+__exportStar(require("./ValidatorSetter"), exports);

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+import './locales';
+export * from './components';

package/lib/index.js

@@ -0,0 +1,18 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./locales");
+__exportStar(require("./components"), exports);

package/lib/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/lib/locales/en-US.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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' },
+];
+exports.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/lib/locales/index.d.ts

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

package/lib/locales/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const designable_core_1 = require("@thienvu18/designable-core");
+const zh_CN_1 = __importDefault(require("./zh-CN"));
+const en_US_1 = __importDefault(require("./en-US"));
+const ko_KR_1 = __importDefault(require("./ko-KR"));
+designable_core_1.GlobalRegistry.registerDesignerLocales(zh_CN_1.default, en_US_1.default, ko_KR_1.default);

package/lib/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;