amis-editor 4.1.0-beta.1 → 4.1.0-beta.20

package/src/plugin/Form/InputMonth.tsx

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

package/src/plugin/Form/InputMonthRange.tsx

@@ -0,0 +1,195 @@
+import {relativeValueRe} from 'amis';
+import {
+  defaultValue,
+  getSchemaTpl,
+  valuePipeOut
+} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {
+  BasePlugin,
+  BasicSubRenderInfo,
+  RendererEventContext,
+  SubRendererInfo
+} from '../../plugin';
+
+export class MonthRangeControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  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
+      }
+    ]
+  };
+
+  panelTitle = '月份范围';
+  panelBody = [
+    getSchemaTpl('placeholder', {
+      pipeIn: defaultValue('请选择月份范围')
+    }),
+
+    {
+      type: 'input-text',
+      name: 'format',
+      label: '值格式',
+      description:
+        '请参考 <a href="https://momentjs.com/" target="_blank">moment</a> 中的格式用法。',
+      pipeIn: defaultValue('X')
+    },
+
+    getSchemaTpl('switchDefaultValue'),
+
+    {
+      type: 'input-text',
+      name: 'value',
+      label: '默认值',
+      visibleOn: 'typeof this.value !== "undefined"',
+      placeholder: '请输入相对值',
+      description:
+        '支持 <code>now、+1day、-2weeks</code>这种相对值用法，由于包含开始和结束时间，请用逗号隔开。'
+    },
+
+    {
+      type: 'fieldSet',
+      title: '使用固定值',
+      visibleOn: 'typeof this.value !== "undefined"',
+      collapsed: true,
+      collapsable: true,
+      className: 'fieldset',
+      body: [
+        {
+          type: 'input-month-range',
+          name: 'value',
+          pipeIn: (value: any) =>
+            value
+              ? value
+                  .split(',')
+                  .map((item: any) =>
+                    relativeValueRe.test(item) ||
+                    ~['now', 'today'].indexOf(item)
+                      ? ''
+                      : item
+                  )
+              : ''
+        }
+      ]
+    },
+    getSchemaTpl('clearable', {
+      pipeIn: defaultValue(true)
+    }),
+    {
+      type: 'input-text',
+      name: 'minDate',
+      label: '最小日期',
+      placeholder: '请输入相对值',
+      description:
+        '支持 <code>now、+1day、-2weeks</code>这种相对值用法，同时支持变量如<code>\\${start_date}</code>'
+    },
+
+    {
+      type: 'fieldSet',
+      title: '使用固定值',
+      collapsed: true,
+      collapsable: true,
+      className: 'fieldset',
+      body: [
+        {
+          type: 'input-date',
+          name: 'minDate',
+          pipeIn: (value: any) =>
+            relativeValueRe.test(value) || ~['now', 'today'].indexOf(value)
+              ? ''
+              : value
+        }
+      ]
+    },
+
+    {
+      type: 'divider'
+    },
+
+    {
+      type: 'input-text',
+      name: 'maxDate',
+      label: '最大日期',
+      placeholder: '请输入相对值',
+      description:
+        '支持 <code>now、+1day、-2weeks</code>这种相对值用法，同时支持变量如<code>\\${start_date}</code>'
+    },
+
+    {
+      type: 'fieldSet',
+      title: '使用固定值',
+      collapsed: true,
+      collapsable: true,
+      className: 'fieldset',
+      body: [
+        {
+          type: 'input-date',
+          name: 'maxDate',
+          pipeIn: (value: any) =>
+            relativeValueRe.test(value) || ~['now', 'today'].indexOf(value)
+              ? ''
+              : value
+        }
+      ]
+    },
+    {
+      type: 'input-text',
+      name: 'minDuration',
+      label: '限制最小跨度',
+      description: '比如 2days'
+    },
+    {
+      type: 'input-text',
+      name: 'maxDuration',
+      label: '限制最大跨度',
+      description: '比如 1year'
+    },
+    {
+      name: 'utc',
+      label: '是否使用 UTC 时间',
+      type: 'switch',
+      mode: 'inline',
+      className: 'block'
+    },
+    {
+      name: 'clearable',
+      label: '是否可清除',
+      type: 'switch',
+      mode: 'inline',
+      className: 'block'
+    },
+    {
+      name: 'embed',
+      label: '是否内嵌模式',
+      type: 'switch',
+      mode: 'inline',
+      className: 'block'
+    }
+  ];
+}
+
+registerEditorPlugin(MonthRangeControlPlugin);

package/src/plugin/Form/InputNumber.tsx

@@ -0,0 +1,97 @@
+import {SchemaObject} from 'amis';
+import flatten from 'lodash/flatten';
+import {ContainerWrapper} from '../../component/ContainerWrapper';
+import {registerEditorPlugin} from '../../manager';
+import {
+  BasePlugin,
+  BasicSubRenderInfo,
+  RendererEventContext,
+  SubRendererInfo
+} from '../../plugin';
+import {defaultValue, 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,33 @@
+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'
+  };
+
+  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,35 @@
+import {registerEditorPlugin} from '../../manager';
+
+import {DateControlPlugin} from './InputDate';
+
+export class InputQuarterPlugin extends DateControlPlugin {
+  // 关联渲染器名字
+  rendererName = 'input-quarter';
+  $schema = '/schemas/QuarterControlSchema.json';
+
+  // 组件名称
+  name = 'Quarter';
+  isBaseComponent = true;
+  icon = 'fa fa-calendar';
+  description = `季度选择`;
+  docLink = '/amis/zh-CN/components/form/input-quarter';
+  tags = ['表单项'];
+  // @ts-ignore
+  scaffold = {
+    type: 'input-quarter',
+    name: 'month'
+  };
+  previewSchema: any = {
+    type: 'form',
+    wrapWithPanel: false,
+    body: [
+      {
+        ...this.scaffold
+      }
+    ]
+  };
+
+  panelTitle = 'Quarter';
+}
+
+registerEditorPlugin(InputQuarterPlugin);

package/src/plugin/Form/InputQuarterRange.tsx

@@ -0,0 +1,195 @@
+import {relativeValueRe} from 'amis';
+import {
+  defaultValue,
+  getSchemaTpl,
+  valuePipeOut
+} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {
+  BasePlugin,
+  BasicSubRenderInfo,
+  RendererEventContext,
+  SubRendererInfo
+} from '../../plugin';
+
+export class QuarterRangePlugin extends BasePlugin {
+  // 关联渲染器名字
+  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
+      }
+    ]
+  };
+
+  panelTitle = '季度范围';
+  panelBody = [
+    getSchemaTpl('placeholder', {
+      pipeIn: defaultValue('请选择月份范围')
+    }),
+
+    {
+      type: 'input-text',
+      name: 'format',
+      label: '值格式',
+      description:
+        '请参考 <a href="https://momentjs.com/" target="_blank">moment</a> 中的格式用法。',
+      pipeIn: defaultValue('X')
+    },
+
+    getSchemaTpl('switchDefaultValue'),
+
+    {
+      type: 'input-text',
+      name: 'value',
+      label: '默认值',
+      visibleOn: 'typeof this.value !== "undefined"',
+      placeholder: '请输入相对值',
+      description:
+        '支持 <code>now、+1day、-2weeks</code>这种相对值用法，由于包含开始和结束时间，请用逗号隔开。'
+    },
+
+    {
+      type: 'fieldSet',
+      title: '使用固定值',
+      visibleOn: 'typeof this.value !== "undefined"',
+      collapsed: true,
+      collapsable: true,
+      className: 'fieldset',
+      body: [
+        {
+          type: 'input-quarter-range',
+          name: 'value',
+          pipeIn: (value: any) =>
+            value
+              ? value
+                  .split(',')
+                  .map((item: any) =>
+                    relativeValueRe.test(item) ||
+                    ~['now', 'today'].indexOf(item)
+                      ? ''
+                      : item
+                  )
+              : ''
+        }
+      ]
+    },
+    getSchemaTpl('clearable', {
+      pipeIn: defaultValue(true)
+    }),
+    {
+      type: 'input-text',
+      name: 'minDate',
+      label: '最小日期',
+      placeholder: '请输入相对值',
+      description:
+        '支持 <code>now、+1day、-2weeks</code>这种相对值用法，同时支持变量如<code>\\${start_date}</code>'
+    },
+
+    {
+      type: 'fieldSet',
+      title: '使用固定值',
+      collapsed: true,
+      collapsable: true,
+      className: 'fieldset',
+      body: [
+        {
+          type: 'input-date',
+          name: 'minDate',
+          pipeIn: (value: any) =>
+            relativeValueRe.test(value) || ~['now', 'today'].indexOf(value)
+              ? ''
+              : value
+        }
+      ]
+    },
+
+    {
+      type: 'divider'
+    },
+
+    {
+      type: 'input-text',
+      name: 'maxDate',
+      label: '最大日期',
+      placeholder: '请输入相对值',
+      description:
+        '支持 <code>now、+1day、-2weeks</code>这种相对值用法，同时支持变量如<code>\\${start_date}</code>'
+    },
+
+    {
+      type: 'fieldSet',
+      title: '使用固定值',
+      collapsed: true,
+      collapsable: true,
+      className: 'fieldset',
+      body: [
+        {
+          type: 'input-date',
+          name: 'maxDate',
+          pipeIn: (value: any) =>
+            relativeValueRe.test(value) || ~['now', 'today'].indexOf(value)
+              ? ''
+              : value
+        }
+      ]
+    },
+    {
+      type: 'input-text',
+      name: 'minDuration',
+      label: '限制最小跨度',
+      description: '比如 2days'
+    },
+    {
+      type: 'input-text',
+      name: 'maxDuration',
+      label: '限制最大跨度',
+      description: '比如 1year'
+    },
+    {
+      name: 'utc',
+      label: '是否使用 UTC 时间',
+      type: 'switch',
+      mode: 'inline',
+      className: 'block'
+    },
+    {
+      name: 'clearable',
+      label: '是否可清除',
+      type: 'switch',
+      mode: 'inline',
+      className: 'block'
+    },
+    {
+      name: 'embed',
+      label: '是否内嵌模式',
+      type: 'switch',
+      mode: 'inline',
+      className: 'block'
+    }
+  ];
+}
+
+registerEditorPlugin(QuarterRangePlugin);

package/src/plugin/Form/InputRange.tsx

@@ -0,0 +1,121 @@
+import {defaultValue, getSchemaTpl} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {BasePlugin} from '../../plugin';
+
+export class RangeControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'input-range';
+  $schema = '/schemas/RangeControlSchema.json';
+
+  // 组件名称
+  name = '滑块';
+  isBaseComponent = true;
+  icon = 'fa fa-sliders';
+  description = `选择某个值或者某个范围`;
+  docLink = '/amis/zh-CN/components/form/input-range';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'input-range',
+    label: '滑块',
+    name: 'range'
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: [
+      {
+        ...this.scaffold
+      }
+    ]
+  };
+
+  panelTitle = '滑块';
+  panelBody = [
+    getSchemaTpl('switchDefaultValue'),
+    {
+      type: 'input-number',
+      name: 'value',
+      label: '默认值',
+      validations: 'isNumeric',
+      visibleOn: 'typeof data.value !== "undefined" && !data.multiple',
+      pipeIn: (value: any) => {
+        return typeof value === 'number' ? value : 0;
+      },
+      pipeOut: (value: any, origin: any, data: any) => {
+        return (
+          (value < data.min && data.min) ||
+          (value > data.max && data.max) ||
+          value
+        );
+      }
+    },
+
+    {
+      type: 'combo',
+      name: 'value',
+      visibleOn: 'typeof data.value !== "undefined" && this.multiple',
+      items: [
+        {
+          type: 'input-number',
+          validations: 'isNumeric',
+          name: 'min',
+          label: '小值'
+        },
+
+        {
+          type: 'input-number',
+          validations: 'isNumeric',
+          name: 'max',
+          label: '大值'
+        }
+      ]
+    },
+
+    {
+      label: '最小值',
+      name: 'min',
+      type: 'input-number',
+      value: 0
+    },
+
+    {
+      label: '最大值',
+      name: 'max',
+      type: 'input-number',
+      value: 100
+    },
+
+    {
+      label: '步长',
+      name: 'step',
+      type: 'input-number',
+      value: 1
+    },
+
+    {
+      type: 'input-text',
+      name: 'unit',
+      label: '单位',
+      value: ''
+    },
+
+    {
+      type: 'switch',
+      name: 'showInput',
+      mode: 'inline',
+      label: '是否显示输入框',
+      value: false
+    },
+
+    getSchemaTpl('clearable'),
+    getSchemaTpl('multiple', {
+      pipeIn: defaultValue(false)
+    }),
+    getSchemaTpl('joinValues'),
+    getSchemaTpl('delimiter')
+  ];
+}
+
+registerEditorPlugin(RangeControlPlugin);