amis-editor 4.1.0-beta.4 → 5.2.0-beta.1

package/lib/plugin/Form/InputCity.js

@@ -0,0 +1,139 @@
+/**
+ * amis-editor v5.2.0-beta.1
+ * Copyright 2018-2022 @fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var AMisCodeEditor = require('amis-editor-core');
+var BaseControl = require('../../component/BaseControl.js');
+
+var CityControlPlugin = /** @class */ (function (_super) {
+    tslib.__extends(CityControlPlugin, _super);
+    function CityControlPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'input-city';
+        _this.$schema = '/schemas/CityControlSchema.json';
+        // 组件名称
+        _this.name = '城市选择';
+        _this.isBaseComponent = true;
+        _this.icon = 'fa fa-building-o';
+        _this.description = '可配置是否选择区域或者城市';
+        _this.docLink = '/amis/zh-CN/components/form/input-city';
+        _this.tags = ['表单项'];
+        _this.scaffold = {
+            type: 'input-city',
+            label: '城市选择',
+            name: 'city'
+        };
+        _this.previewSchema = {
+            type: 'form',
+            className: 'text-left',
+            wrapWithPanel: false,
+            mode: 'horizontal',
+            body: [
+                tslib.__assign({}, _this.scaffold)
+            ]
+        };
+        _this.notRenderFormZone = true;
+        _this.panelTitle = '城市选择';
+        // 事件定义
+        _this.events = [
+            {
+                eventName: 'change',
+                eventLabel: '值变化',
+                description: '选中值变化',
+                dataSchema: [
+                    {
+                        type: 'object',
+                        properties: {
+                            'event.data.value': {
+                                type: 'string',
+                                title: '选中值'
+                            }
+                        }
+                    }
+                ]
+            }
+        ];
+        // 动作定义
+        _this.actions = [
+            {
+                actionType: 'clear',
+                actionLabel: '清空',
+                description: '清除选中值'
+            },
+            {
+                actionType: 'reset',
+                actionLabel: '重置',
+                description: '重置为默认值'
+            },
+            {
+                actionType: 'setValue',
+                actionLabel: '赋值',
+                description: '触发组件数据更新'
+            }
+        ];
+        _this.panelBodyCreator = function (context) {
+            return BaseControl.formItemControl({
+                common: {
+                    replace: true,
+                    body: [
+                        AMisCodeEditor.getSchemaTpl('formItemName', {
+                            required: true
+                        }),
+                        AMisCodeEditor.getSchemaTpl('label'),
+                        // getSchemaTpl('switchDefaultValue'),
+                        /*
+                        {
+                          name: 'value',
+                          type: 'input-city',
+                          label: '默认值',
+                          visibleOn: 'typeof data.value !== "undefined"',
+                          validations: 'isNumeric',
+                          labelRemark: {
+                            trigger: 'click',
+                            className: 'm-l-xs',
+                            rootClose: true,
+                            content: '城市编码',
+                            placement: 'left'
+                          }
+                        },
+                        */
+                        AMisCodeEditor.getSchemaTpl('valueFormula', {
+                            rendererSchema: context === null || context === void 0 ? void 0 : context.schema,
+                            rendererWrapper: true,
+                            mode: 'vertical' // 改成上下展示模式
+                        }),
+                        AMisCodeEditor.getSchemaTpl('switch', {
+                            name: 'allowDistrict',
+                            label: '允许选择区域',
+                            pipeIn: AMisCodeEditor.defaultValue(true)
+                        }),
+                        AMisCodeEditor.getSchemaTpl('switch', {
+                            name: 'allowCity',
+                            label: '允许选择城市',
+                            pipeIn: AMisCodeEditor.defaultValue(true)
+                        }),
+                        AMisCodeEditor.getSchemaTpl('switch', {
+                            name: 'searchable',
+                            label: '是否出搜索框',
+                            pipeIn: AMisCodeEditor.defaultValue(false)
+                        }),
+                        AMisCodeEditor.getSchemaTpl('extractValue')
+                    ]
+                },
+                status: {}
+            }, context);
+        };
+        return _this;
+    }
+    return CityControlPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(CityControlPlugin);
+
+exports.CityControlPlugin = CityControlPlugin;

package/{dist → lib}/plugin/Form/InputColor.d.ts

@@ -1,4 +1,4 @@
-import { BasePlugin } from '../../plugin';
+import { BasePlugin, BaseEventContext } from 'amis-editor-core';
 export declare class ColorControlPlugin extends BasePlugin {
     rendererName: string;
     $schema: string;
@@ -14,26 +14,28 @@ export declare class ColorControlPlugin extends BasePlugin {
         name: string;
     };
     previewSchema: any;
+    panelTitle: string;
+    notRenderFormZone: boolean;
+    events: {
+        eventName: string;
+        eventLabel: string;
+        description: string;
+    }[];
+    actions: {
+        actionType: string;
+        actionLabel: string;
+        description: string;
+    }[];
+    panelJustify: boolean;
     getConditionalColorPanel(format: string): {
-        type: string;
-        name: string;
-        format: string;
-        visibleOn: string;
         label: string;
-    };
-    getConditionalColorArray(format: string): {
-        type: string;
         name: string;
-        label: string;
-        addable: boolean;
-        removable: boolean;
+        type: string;
+        format: string;
+        clearable: boolean;
         visibleOn: string;
-        items: {
-            type: string;
-            format: string;
-        };
-        value: string[];
+        presetColors: string[];
     };
-    panelTitle: string;
-    panelBody: any[];
+    getConditionalColorComb(format: string): any;
+    panelBodyCreator: (context: BaseEventContext) => any;
 }

package/lib/plugin/Form/InputColor.js

@@ -0,0 +1,295 @@
+/**
+ * amis-editor v5.2.0-beta.1
+ * Copyright 2018-2022 @fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var AMisCodeEditor = require('amis-editor-core');
+var validator = require('../../validator.js');
+var util = require('../../util.js');
+var BaseControl = require('../../component/BaseControl.js');
+var tinyColor = require('tinycolor2');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var tinyColor__default = /*#__PURE__*/_interopDefaultLegacy(tinyColor);
+
+function convertColor(value, format) {
+    format = format.toLocaleLowerCase();
+    function convert(v) {
+        var color = tinyColor__default["default"](v);
+        if (!color.isValid()) {
+            return '';
+        }
+        if (format !== 'rgba') {
+            color.setAlpha(1);
+        }
+        switch (format) {
+            case 'hex':
+                return color.toHexString();
+            case 'hsl':
+                return color.toHslString();
+            case 'rgb':
+                return color.toRgbString();
+            case 'rgba':
+                var _a = color.toRgb(), r = _a.r, g = _a.g, b = _a.b, a = _a.a;
+                return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(a, ")");
+            default:
+                return color.toString();
+        }
+    }
+    return Array.isArray(value) ? value.map(convert) : convert(value);
+}
+var presetColors = [
+    '#ffffff',
+    '#000000',
+    '#d0021b',
+    '#f5a623',
+    '#f8e71c',
+    '#7ED321',
+    '#4A90E2',
+    '#9013fe'
+];
+var colorFormat = ['hex', 'rgb', 'rgba', 'hsl'];
+var presetColorsByFormat = colorFormat.reduce(function (res, fmt) {
+    res[fmt] = convertColor(presetColors, fmt);
+    return res;
+}, {});
+var ColorControlPlugin = /** @class */ (function (_super) {
+    tslib.__extends(ColorControlPlugin, _super);
+    function ColorControlPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'input-color';
+        _this.$schema = '/schemas/ColorControlSchema.json';
+        // 组件名称
+        _this.name = '颜色框';
+        _this.isBaseComponent = true;
+        _this.icon = 'fa fa-eyedropper';
+        _this.description = '支持<code>hex、hls、rgb、rgba</code>格式，默认为<code>hex</code>格式';
+        _this.docLink = '/amis/zh-CN/components/form/input-color';
+        _this.tags = ['表单项'];
+        _this.scaffold = {
+            type: 'input-color',
+            label: '颜色',
+            name: 'color'
+        };
+        _this.previewSchema = {
+            type: 'form',
+            className: 'text-left',
+            mode: 'horizontal',
+            wrapWithPanel: false,
+            body: [
+                tslib.__assign({}, _this.scaffold)
+            ]
+        };
+        _this.panelTitle = '颜色框';
+        _this.notRenderFormZone = true;
+        _this.events = [
+            {
+                eventName: 'change',
+                eventLabel: '值变化',
+                description: '输入框内容变化'
+            },
+            {
+                eventName: 'focus',
+                eventLabel: '获取焦点',
+                description: '输入框获取焦点'
+            },
+            {
+                eventName: 'blur',
+                eventLabel: '失去焦点',
+                description: '输入框失去焦点'
+            }
+        ];
+        _this.actions = [
+            {
+                actionType: 'clear',
+                actionLabel: '清空',
+                description: '清空输入框内容'
+            },
+            {
+                actionType: 'focus',
+                actionLabel: '获取焦点',
+                description: '输入框获取焦点'
+            }
+        ];
+        _this.panelJustify = true;
+        _this.panelBodyCreator = function (context) {
+            var renderer = context.info.renderer;
+            var formatOptions = colorFormat.map(function (value) { return ({
+                label: value.toUpperCase(),
+                value: value
+            }); });
+            return AMisCodeEditor.getSchemaTpl('tabs', [
+                {
+                    title: '属性',
+                    body: AMisCodeEditor.getSchemaTpl('collapseGroup', [
+                        {
+                            title: '基本',
+                            body: [
+                                AMisCodeEditor.getSchemaTpl('formItemName', {
+                                    required: true
+                                }),
+                                AMisCodeEditor.getSchemaTpl('label'),
+                                {
+                                    type: 'select',
+                                    label: '值格式',
+                                    name: 'format',
+                                    value: 'hex',
+                                    options: formatOptions,
+                                    onChange: function (format, oldFormat, model, form) {
+                                        var _a = form.data, value = _a.value, presetColors = _a.presetColors;
+                                        if (value) {
+                                            form.setValueByName('value', convertColor(value, format));
+                                        }
+                                        if (Array.isArray(presetColors)) {
+                                            form.setValueByName('presetColors', convertColor(presetColors, format));
+                                        }
+                                    }
+                                },
+                                tslib.__spreadArray([], formatOptions.map(function (_a) {
+                                    var value = _a.value;
+                                    return _this.getConditionalColorPanel(value);
+                                }), true),
+                                // {
+                                //   label: '默认值',
+                                //   name: 'value',
+                                //   type: 'input-color',
+                                //   format: '${format}'
+                                // },
+                                AMisCodeEditor.getSchemaTpl('clearable'),
+                                AMisCodeEditor.getSchemaTpl('labelRemark'),
+                                AMisCodeEditor.getSchemaTpl('remark'),
+                                AMisCodeEditor.getSchemaTpl('placeholder'),
+                                AMisCodeEditor.getSchemaTpl('description')
+                            ]
+                        },
+                        {
+                            title: '拾色器',
+                            body: tslib.__spreadArray([
+                                AMisCodeEditor.getSchemaTpl('switch', {
+                                    label: BaseControl.tipedLabel('隐藏调色盘', '开启时，禁止手动输入颜色，只能从备选颜色中选择'),
+                                    name: 'allowCustomColor',
+                                    disabledOn: 'Array.isArray(presetColors) && presetColors.length === 0',
+                                    pipeIn: function (value) {
+                                        return typeof value === 'undefined' ? false : !value;
+                                    },
+                                    pipeOut: function (value) { return !value; }
+                                }),
+                                AMisCodeEditor.getSchemaTpl('switch', {
+                                    label: BaseControl.tipedLabel('备选色', '拾色器底部的备选颜色'),
+                                    name: 'presetColors',
+                                    onText: '自定义',
+                                    offText: '默认',
+                                    pipeIn: function (value) {
+                                        return typeof value === 'undefined' ? false : true;
+                                    },
+                                    pipeOut: function (value, originValue, _a) {
+                                        var _b = _a.format, format = _b === void 0 ? 'hex' : _b;
+                                        return !value ? undefined : presetColorsByFormat[format];
+                                    },
+                                    onChange: function (colors, oldValue, model, form) {
+                                        if (Array.isArray(colors) && colors.length === 0) {
+                                            form.setValueByName('allowCustomColor', true);
+                                        }
+                                    }
+                                })
+                            ], formatOptions.map(function (_a) {
+                                var value = _a.value;
+                                return _this.getConditionalColorComb(value);
+                            }), true)
+                        },
+                        AMisCodeEditor.getSchemaTpl('status', {
+                            isFormItem: true
+                        }),
+                        AMisCodeEditor.getSchemaTpl('validation', {
+                            tag: validator.ValidatorTag.MultiSelect
+                        })
+                    ], tslib.__assign(tslib.__assign({}, context === null || context === void 0 ? void 0 : context.schema), { configTitle: 'props' }))
+                },
+                {
+                    title: '外观',
+                    body: AMisCodeEditor.getSchemaTpl('collapseGroup', [
+                        AMisCodeEditor.getSchemaTpl('style:formItem', { renderer: renderer }),
+                        AMisCodeEditor.getSchemaTpl('style:classNames', {
+                            schema: [
+                                AMisCodeEditor.getSchemaTpl('className', {
+                                    label: '描述',
+                                    name: 'descriptionClassName',
+                                    visibleOn: 'this.description'
+                                })
+                            ]
+                        })
+                    ], tslib.__assign(tslib.__assign({}, context === null || context === void 0 ? void 0 : context.schema), { configTitle: 'style' }))
+                },
+                {
+                    title: '事件',
+                    className: 'p-none',
+                    body: [
+                        AMisCodeEditor.getSchemaTpl('eventControl', tslib.__assign({ name: 'onEvent' }, util.getEventControlConfig(_this.manager, context)))
+                    ]
+                }
+            ]);
+        };
+        return _this;
+    }
+    ColorControlPlugin.prototype.getConditionalColorPanel = function (format) {
+        var visibleOnNoFormat = format === 'hex' ? ' || !this.format' : '';
+        return {
+            label: '默认值',
+            name: 'value',
+            type: 'input-color',
+            format: format,
+            clearable: true,
+            visibleOn: "this.format===\"".concat(format, "\"").concat(visibleOnNoFormat),
+            presetColors: presetColorsByFormat[format]
+        };
+    };
+    ColorControlPlugin.prototype.getConditionalColorComb = function (format) {
+        var visibleOnNoFormat = format === 'hex' ? ' || !this.format' : '';
+        return AMisCodeEditor.getSchemaTpl('combo-container', {
+            type: 'combo',
+            mode: 'normal',
+            name: 'presetColors',
+            items: [
+                {
+                    type: 'input-color',
+                    format: format,
+                    name: 'color',
+                    clearable: false,
+                    presetColors: presetColorsByFormat[format]
+                }
+            ],
+            draggable: false,
+            multiple: true,
+            visibleOn: "this.presetColors !== undefined && (this.format === \"".concat(format, "\"").concat(visibleOnNoFormat, ")"),
+            onChange: function (colors, oldValue, model, form) {
+                if (Array.isArray(colors) && colors.length === 0) {
+                    form.setValueByName('allowCustomColor', true);
+                }
+            },
+            pipeIn: function (value) {
+                return value.map(function (color, index) {
+                    if (color === void 0) { color = ''; }
+                    return ({
+                        key: "".concat(color, "-").concat(index),
+                        color: convertColor(color, format)
+                    });
+                });
+            },
+            pipeOut: function (value) { return value.map(function (_a) {
+                var color = _a.color;
+                return color;
+            }); }
+        });
+    };
+    return ColorControlPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(ColorControlPlugin);
+
+exports.ColorControlPlugin = ColorControlPlugin;

package/lib/plugin/Form/InputDate.d.ts

@@ -0,0 +1,26 @@
+import { BasePlugin, BaseEventContext } from 'amis-editor-core';
+import { RendererAction, RendererEvent } from 'amis-editor-comp/dist/renderers/event-action';
+export declare class DateControlPlugin extends BasePlugin {
+    rendererName: string;
+    $schema: string;
+    order: number;
+    icon: string;
+    name: string;
+    isBaseComponent: boolean;
+    searchKeywords: string;
+    description: string;
+    docLink: string;
+    tags: string[];
+    scaffold: {
+        type: string;
+        label: string;
+        name: string;
+    };
+    previewSchema: any;
+    notRenderFormZone: boolean;
+    panelTitle: string;
+    events: RendererEvent[];
+    actions: RendererAction[];
+    panelJustify: boolean;
+    panelBodyCreator: (context: BaseEventContext) => any;
+}