amis-editor 5.2.0-beta.1 → 5.2.0

package/src/plugin/Form/InputImage.tsx

@@ -0,0 +1,266 @@
+import {getSchemaTpl, valuePipeOut} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {BasePlugin} from '../../plugin';
+
+export class ImageControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'input-image';
+  $schema = '/schemas/ImageControlSchema.json';
+
+  // 组件名称
+  name = '图片上传';
+  isBaseComponent = true;
+  description = `可以对图片实现裁剪，限制图片的宽高以及大小，支持自动上传及上传多张图片`;
+  docLink = '/amis/zh-CN/components/form/input-image';
+  tags = ['表单项'];
+  icon = 'fa fa-crop';
+  scaffold = {
+    type: 'input-image',
+    label: '图片上传',
+    name: 'image',
+    imageClassName: 'r w-full'
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: [
+      {
+        ...this.scaffold
+      }
+    ]
+  };
+
+  panelTitle = '图片上传';
+  panelBody = [
+    getSchemaTpl('switchDefaultValue'),
+
+    {
+      type: 'input-text',
+      name: 'value',
+      label: '默认值',
+      visibleOn: 'typeof this.value !== "undefined"'
+    },
+
+    getSchemaTpl('multiple', {
+      value: false,
+      visibleOn: '!data.crop',
+      description: '开启后，不能同时开启裁剪功能'
+    }),
+    getSchemaTpl('joinValues'),
+    getSchemaTpl('delimiter'),
+    getSchemaTpl('extractValue'),
+    {
+      name: 'maxSize',
+      type: 'input-number',
+      label: '图片最大体积',
+      description: '超出大小不允许上传，单位字节'
+    },
+    {
+      name: 'maxLength',
+      type: 'input-number',
+      label: '图片最大数量',
+      visibleOn: 'data.multiple',
+      description: '超出数量不允许上传'
+    },
+    getSchemaTpl('api', {
+      label: '文件接收接口',
+      name: 'receiver',
+      description: '文件接收接口，默认不填则上传到 hiphoto',
+      value: '/api/upload',
+      __isUpload: true
+    }),
+
+    getSchemaTpl('autoFill'),
+
+    {
+      type: 'input-text',
+      value: '.jpeg, .jpg, .png, .gif',
+      name: 'accept',
+      label: '图片类型',
+      description:
+        '请填入图片的后缀或 <code>MimeType</code>，多个类型用<code>,</code>隔开'
+    },
+
+    {
+      type: 'input-text',
+      name: 'defaultImage',
+      label: '占位图片地址'
+    },
+
+    {
+      type: 'switch',
+      name: 'fixedSize',
+      value: false,
+      label: '是否开启固定尺寸',
+      mode: 'inline',
+      className: 'w-full'
+    },
+
+    {
+      type: 'switch',
+      name: 'hideUploadButton',
+      value: false,
+      label: '隐藏上传按钮',
+      mode: 'inline',
+      className: 'w-full'
+    },
+
+    {
+      type: 'switch',
+      name: 'autoUpload',
+      value: false,
+      label: '自动上传',
+      mode: 'inline',
+      className: 'w-full'
+    },
+
+    {
+      name: 'compress',
+      type: 'switch',
+      label: '开启压缩',
+      value: true,
+      mode: 'inline',
+      className: 'w-full',
+      description: '由 hiphoto 实现，自定义接口将无效'
+    },
+
+    {
+      type: 'combo',
+      name: 'compressOptions',
+      multiLine: true,
+      label: '压缩配置',
+      visibleOn: 'data.compress',
+      items: [
+        {
+          type: 'input-number',
+          label: '最大宽度',
+          name: 'maxWidth'
+        },
+
+        {
+          type: 'input-number',
+          label: '最大高度',
+          name: 'maxHeight'
+        }
+      ]
+    },
+
+    {
+      name: 'showCompressOptions',
+      type: 'switch',
+      label: '是否显示压缩选项',
+      mode: 'inline',
+      className: 'w-full'
+    },
+
+    {
+      name: 'crop',
+      type: 'switch',
+      label: '是否开启裁剪',
+      mode: 'inline',
+      visibleOn: '!data.multiple',
+      className: 'w-full',
+      description: '开启后，不能同时开启多选模式',
+      pipeIn: (value: any) => !!value
+    },
+
+    {
+      name: 'crop.aspectRatio',
+      type: 'input-text',
+      label: '裁剪比率',
+      visibleOn: 'data.crop',
+      pipeOut: valuePipeOut
+    },
+
+    {
+      name: 'crop.rotatable',
+      type: 'switch',
+      label: '裁剪时是否可旋转',
+      visibleOn: 'data.crop',
+      pipeOut: valuePipeOut
+    },
+
+    {
+      name: 'crop.scalable',
+      type: 'switch',
+      label: '裁剪时否可缩放',
+      visibleOn: 'data.crop',
+      pipeOut: valuePipeOut
+    },
+
+    {
+      name: 'crop.viewMode',
+      type: 'select',
+      label: '裁剪区域限制',
+      value: 1,
+      options: [
+        {label: '无限制', value: 0},
+        {label: '绘图区域', value: 1}
+      ],
+      visibleOn: 'data.crop',
+      pipeOut: valuePipeOut
+    },
+
+    {
+      type: 'fieldSet',
+      title: '图片限制',
+      collapsed: true,
+      collapsable: true,
+      className: 'fieldset',
+      body: [
+        {
+          type: 'input-number',
+          name: 'limit.width',
+          label: '限制宽度'
+        },
+
+        {
+          type: 'input-number',
+          name: 'limit.height',
+          label: '限制高度'
+        },
+
+        {
+          type: 'input-number',
+          name: 'limit.maxWidth',
+          label: '限制最大宽度'
+        },
+
+        {
+          type: 'input-number',
+          name: 'limit.maxHeight',
+          label: '限制最大高度'
+        },
+
+        {
+          type: 'input-number',
+          name: 'limit.minWidth',
+          label: '限制最小宽度'
+        },
+
+        {
+          type: 'input-number',
+          name: 'limit.minHeight',
+          label: '限制最小高度'
+        },
+
+        {
+          type: 'input-number',
+          name: 'limit.aspectRatio',
+          label: '限制宽高比率'
+        },
+
+        {
+          type: 'input-text',
+          name: 'limit.限制最小高度',
+          label: '宽高比描述',
+          description: '当宽高比没有满足条件时，此描述将作为提示信息显示'
+        }
+      ]
+    }
+  ];
+}
+
+registerEditorPlugin(ImageControlPlugin);

package/src/plugin/Form/InputKV.tsx

@@ -0,0 +1,133 @@
+/**
+ * @file input-kv 组件的素项目部
+ */
+import {RendererAction, RendererEvent} from '../../event-action';
+import {
+  defaultValue,
+  getSchemaTpl,
+  valuePipeOut
+} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {
+  BasePlugin,
+  BasicSubRenderInfo,
+  RendererEventContext,
+  SubRendererInfo
+} from '../../plugin';
+
+export class KVControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'input-kv';
+  $schema = '/schemas/KVControlSchema.json';
+
+  // 组件名称
+  name = 'KV 键值对';
+  isBaseComponent = true;
+  icon = 'fa fa-eyedropper';
+  description = '用于编辑键值对类型的数据';
+  docLink = '/amis/zh-CN/components/form/input-kv';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'input-kv',
+    label: 'KV',
+    name: 'kv'
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: [
+      {
+        ...this.scaffold
+      }
+    ]
+  };
+
+   // 事件定义
+   events: RendererEvent[] = [
+    {
+      eventName: 'add',
+      eventLabel: '添加',
+      description: '添加组合项时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'object',
+              title: '当前组合项的值'
+            }
+          }
+        }
+      ]
+    },
+    {
+      eventName: 'delete',
+      eventLabel: '删除',
+      description: '删除组合项时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.key': {
+              type: 'string',
+              title: '删除项的索引'
+            },
+            'event.data.value': {
+              type: 'string',
+              title: '当前组合项的值'
+            }
+          }
+        }
+      ]
+    }
+  ];
+
+  // 动作定义
+  actions: RendererAction[] = [
+    {
+      actionType: 'clear',
+      actionLabel: '清空',
+      description: '清除选中值'
+    },
+    {
+      actionType: 'reset',
+      actionLabel: '重置',
+      description: '将值重置为resetValue，若没有配置resetValue，则清空'
+    },
+    {
+      actionType: 'setValue',
+      actionLabel: '赋值',
+      description: '触发组件数据更新'
+    }
+  ];
+
+  panelTitle = 'KV 键值对';
+  panelBody = [
+    {
+      type: 'input-text',
+      name: 'valueType',
+      label: '值类型',
+      pipeIn: defaultValue('input-text')
+    },
+    {
+      type: 'input-text',
+      name: 'keyPlaceholder',
+      label: 'key 的提示信息'
+    },
+    {
+      type: 'input-text',
+      name: 'valuePlaceholder',
+      label: 'value 的提示信息'
+    },
+    {
+      type: 'switch',
+      name: 'draggable',
+      label: '是否可排序',
+      pipeIn: defaultValue(true)
+    }
+  ];
+}
+
+registerEditorPlugin(KVControlPlugin);

package/src/plugin/Form/InputMonth.tsx

@@ -0,0 +1,37 @@
+import {registerEditorPlugin} from '../../manager';
+
+import {DateControlPlugin} from './InputDate';
+
+export class MonthControlPlugin extends DateControlPlugin {
+  // 关联渲染器名字
+  rendererName = 'input-month';
+  $schema = '/schemas/MonthControlSchema.json';
+
+  // 组件名称
+  name = '日期';
+  isBaseComponent = true;
+  icon = 'fa fa-calendar';
+  description = `月份选择`;
+  docLink = '/amis/zh-CN/components/form/input-month';
+  tags = ['表单项'];
+  // @ts-ignore
+  scaffold = {
+    type: 'input-month',
+    name: 'month'
+  };
+
+  disabledRendererPlugin = true;
+  previewSchema: any = {
+    type: 'form',
+    wrapWithPanel: false,
+    body: [
+      {
+        ...this.scaffold
+      }
+    ]
+  };
+
+  panelTitle = 'Month';
+}
+
+registerEditorPlugin(MonthControlPlugin);

package/src/plugin/Form/InputMonthRange.tsx

@@ -0,0 +1,41 @@
+import {registerEditorPlugin} from '../../manager';
+
+import {DateRangeControlPlugin} from './InputDateRange';
+
+export class MonthRangeControlPlugin extends DateRangeControlPlugin {
+  // 关联渲染器名字
+  rendererName = 'input-month-range';
+  $schema = '/schemas/MonthRangeControlSchema.json';
+
+  order = -440;
+
+  // 组件名称
+  icon = 'fa fa-calendar';
+  name = '月份范围';
+  isBaseComponent = true;
+  description =
+    '月份范围选择，可通过<code>minDate</code>、<code>maxDate</code>设定最小、最大日期';
+  docLink = '/amis/zh-CN/components/form/input-month-range';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'input-month-range',
+    label: '日期范围',
+    name: 'month-range'
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: [
+      {
+        ...this.scaffold
+      }
+    ]
+  };
+
+  disabledRendererPlugin = true;
+  notRenderFormZone = true;
+}
+
+registerEditorPlugin(MonthRangeControlPlugin);

package/src/plugin/Form/InputNumber.tsx

@@ -0,0 +1,89 @@
+import {registerEditorPlugin} from '../../manager';
+import {BasePlugin} from '../../plugin';
+import {getSchemaTpl} from '../../component/schemaTpl';
+
+export class NumberControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'input-number';
+  $schema = '/schemas/NumberControlSchema.json';
+
+  order = -410;
+
+  // 组件名称
+  name = '数字框';
+  isBaseComponent = true;
+  icon = 'fa fa-sort-numeric-asc';
+  description = '支持设定最大值和最小值，以及步长与精度';
+  docLink = '/amis/zh-CN/components/form/input-number';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'input-number',
+    label: '数字',
+    name: 'number-text'
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: [
+      {
+        ...this.scaffold,
+        value: 88
+      }
+    ]
+  };
+
+  panelTitle = '数字框';
+  panelBody = [
+    getSchemaTpl('switchDefaultValue'),
+
+    {
+      type: 'input-number',
+      name: 'value',
+      label: '默认值',
+      visibleOn: 'typeof this.value !== "undefined"'
+    },
+
+    {
+      type: 'input-text',
+      name: 'min',
+      label: '最小值',
+      description:
+        '请输入数字或使用 <code>\\${xxx}</code> 来获取变量，否则该配置不生效'
+    },
+
+    {
+      type: 'input-text',
+      name: 'max',
+      label: '最大值',
+      description:
+        '请输入数字或使用 <code>\\${xxx}</code> 来获取变量，否则该配置不生效'
+    },
+
+    {
+      type: 'input-number',
+      name: 'step',
+      label: '步长'
+    },
+
+    {
+      type: 'input-number',
+      name: 'precision',
+      label: '小数点精度',
+      min: 0,
+      max: 100
+    },
+
+    {
+      type: 'input-array',
+      name: 'unitOptions',
+      label: '单位选项',
+      items: {
+        type: 'input-text'
+      }
+    }
+  ];
+}
+
+registerEditorPlugin(NumberControlPlugin);

package/src/plugin/Form/InputPassword.tsx

@@ -0,0 +1,35 @@
+import {registerEditorPlugin} from '../../manager';
+import {TextControlPlugin} from './InputText';
+
+export class PasswordControlPlugin extends TextControlPlugin {
+  // 关联渲染器名字
+  rendererName = 'input-password';
+  $schema = '/schemas/TextControlSchema.json';
+  name = '密码框';
+  isBaseComponent = true;
+  icon = 'fa fa-asterisk';
+
+  description = '验证输入是否符合邮箱的格式';
+
+  scaffold = {
+    type: 'input-password',
+    label: '密码',
+    name: 'password'
+  };
+
+  disabledRendererPlugin = true;
+
+  previewSchema = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: {
+      ...this.scaffold
+    }
+  };
+
+  panelTitle = this.name;
+}
+
+registerEditorPlugin(PasswordControlPlugin);

package/src/plugin/Form/InputQuarter.tsx

@@ -0,0 +1,37 @@
+import {registerEditorPlugin} from '../../manager';
+
+import {DateControlPlugin} from './InputDate';
+
+export class InputQuarterPlugin extends DateControlPlugin {
+  // 关联渲染器名字
+  rendererName = 'input-quarter';
+  $schema = '/schemas/QuarterControlSchema.json';
+
+  // 组件名称
+  name = '季度';
+  isBaseComponent = true;
+  icon = 'fa fa-calendar';
+  description = `季度选择`;
+  docLink = '/amis/zh-CN/components/form/input-quarter';
+  tags = ['表单项'];
+  // @ts-ignore
+  scaffold = {
+    type: 'input-quarter',
+    name: 'month'
+  };
+
+  disabledRendererPlugin = true;
+  previewSchema: any = {
+    type: 'form',
+    wrapWithPanel: false,
+    body: [
+      {
+        ...this.scaffold
+      }
+    ]
+  };
+
+  panelTitle = 'Quarter';
+}
+
+registerEditorPlugin(InputQuarterPlugin);

package/src/plugin/Form/InputQuarterRange.tsx

@@ -0,0 +1,41 @@
+import {registerEditorPlugin} from '../../manager';
+
+import {DateRangeControlPlugin} from './InputDateRange';
+
+export class QuarterRangePlugin extends DateRangeControlPlugin {
+  // 关联渲染器名字
+  rendererName = 'input-quarter-range';
+  $schema = '/schemas/MonthRangeControlSchema.json';
+
+  order = -440;
+
+  // 组件名称
+  icon = 'fa fa-calendar';
+  name = '季度范围';
+  isBaseComponent = true;
+  description =
+    '月份范围选择，可通过<code>minDate</code>、<code>maxDate</code>设定最小、最大日期';
+  docLink = '/amis/zh-CN/components/form/input-quarter-range';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'input-quarter-range',
+    label: '日期范围',
+    name: 'quarter-range'
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: [
+      {
+        ...this.scaffold
+      }
+    ]
+  };
+
+  disabledRendererPlugin = true;
+  notRenderFormZone = true;
+}
+
+registerEditorPlugin(QuarterRangePlugin);