amis-editor 4.2.0-beta.2 → 5.1.9

package/src/plugin/Form/InputRating.tsx

@@ -1,8 +1,16 @@
-import {getSchemaTpl} from '../../component/schemaTpl';
+import {
+  defaultValue,
+  getSchemaTpl,
+  undefinedPipeOut
+} from '../../component/schemaTpl';
 import {registerEditorPlugin} from '../../manager';
-import {BasePlugin} from '../../plugin';
+import {BasePlugin, BaseEventContext} from '../../plugin';
+import {formItemControl, tipedLabel} from '../../component/control/BaseControl';
+import {getEventControlConfig, isObject} from '../../util';
+import {ValidatorTag} from '../../component/validator';
+import {RendererAction, RendererEvent} from '../../event-action';
 
-export class RatingControlPlugin extends BasePlugin {
+export class RateControlPlugin extends BasePlugin {
   // 关联渲染器名字
   rendererName = 'input-rating';
   $schema = '/schemas/RatingControlSchema.json';
@@ -31,48 +39,352 @@ export class RatingControlPlugin extends BasePlugin {
       }
     ]
   };
+  notRenderFormZone = true;
 
   panelTitle = '评分';
-  panelBody = [
-    getSchemaTpl('switchDefaultValue'),
 
+  count = 5;
+
+  // 事件定义
+  events: RendererEvent[] = [
     {
-      type: 'input-number',
-      name: 'value',
-      label: '默认值',
-      visibleOn: 'typeof this.value !== "undefined"'
-    },
+      eventName: 'change',
+      eventLabel: '值变化',
+      description: '评分值变化时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '评分值'
+            }
+          }
+        }
+      ]
+    }
+  ];
 
+  // 动作定义
+  actions: RendererAction[] = [
     {
-      label: '最大值',
-      name: 'count',
-      type: 'input-number',
-      value: 5
+      actionType: 'clear',
+      actionLabel: '清空',
+      description: '清空评分值'
     },
     {
-      type: 'switch',
-      name: 'half',
-      mode: 'inline',
-      className: 'w-full',
-      label: '允许半星',
-      value: false
+      actionType: 'reset',
+      actionLabel: '重置',
+      description: '将值重置为resetValue，若没有配置resetValue，则清空'
     },
-
     {
-      type: 'switch',
-      name: 'allowClear',
-      mode: 'inline',
-      className: 'w-full',
-      label: '可清除',
-      description: '是否允许再次点击后清除',
-      value: false
-    },
-    getSchemaTpl('className', {
-      label: '描述 CSS 类名',
-      name: 'descriptionClassName',
-      visibleOn: 'data.description'
-    })
+      actionType: 'setValue',
+      actionLabel: '赋值',
+      description: '触发组件数据更新'
+    }
   ];
+
+  panelJustify = true;
+  panelBodyCreator = (context: BaseEventContext) => {
+    return getSchemaTpl('tabs', [
+      {
+        title: '属性',
+        body: getSchemaTpl('collapseGroup', [
+          {
+            title: '基本',
+            body: [
+              getSchemaTpl('formItemName', {
+                required: true
+              }),
+
+              {
+                label: 'Label',
+                name: 'label',
+                type: 'input-text'
+              },
+
+              {
+                label: '最大值',
+                name: 'count',
+                type: 'input-number',
+                max: 10,
+                min: 1,
+                value: 5,
+                pipeIn: (value: number) => (this.count = value),
+                pipeOut: (value: number) => (this.count = value)
+              },
+
+              {
+                type: 'input-number',
+                name: 'value',
+                label: '默认值',
+                max: 10,
+                min: 0
+              },
+
+              getSchemaTpl('switch', {
+                name: 'allowClear',
+                label: tipedLabel('可清除', '是否允许再次点击后清除'),
+                value: false
+              }),
+
+              getSchemaTpl('switch', {
+                name: 'half',
+                label: '允许半星',
+                value: false
+              }),
+
+              getSchemaTpl('labelRemark'),
+
+              getSchemaTpl('remark'),
+
+              getSchemaTpl('combo-container', {
+                type: 'combo',
+                label: '描述',
+                mode: 'normal',
+                name: 'texts',
+                items: [
+                  {
+                    placeholder: 'Key',
+                    type: 'input-number',
+                    unique: true,
+                    name: 'key',
+                    columnClassName: 'w-xs flex-none',
+                    min: 0,
+                    step: 1,
+                    max: 10,
+                    precision: 0
+                  },
+
+                  {
+                    placeholder: '描述内容',
+                    type: 'input-text',
+                    name: 'value'
+                  }
+                ],
+                draggable: false,
+                multiple: true,
+                pipeIn: (value: any) => {
+                  if (!isObject(value)) {
+                    return Array.isArray(value) ? value : [];
+                  }
+
+                  const res = Object.keys(value).map((item: any) => {
+                    return {
+                      key: item || 0,
+                      value: value[item] || ''
+                    };
+                  }); //.filter((item: any) => item.key <= this.count);
+
+                  return res;
+                },
+                pipeOut: (value: any[]) => {
+                  if (!value.length) {
+                    return undefined;
+                  }
+
+                  const res: any = {};
+                  const findMinCanUsedKey = (
+                    keys: string[],
+                    max: number
+                  ): void | number => {
+                    for (let i = 1; i <= max; i++) {
+                      if (!keys.includes(String(i))) {
+                        return i;
+                      }
+                    }
+                  };
+
+                  value.forEach(item => {
+                    const key =
+                      item.key !== undefined
+                        ? Number(item.key)
+                        : findMinCanUsedKey(Object.keys(res), this.count);
+
+                    // && key <= this.count
+                    if (key) {
+                      res[key] = item?.value || '';
+                    }
+                  });
+
+                  return res;
+                }
+              })
+            ]
+          },
+          getSchemaTpl('status', {isFormItem: true, readonly: true}),
+          getSchemaTpl('validation', {
+            tag: ValidatorTag.Check
+          })
+        ])
+      },
+      {
+        title: '外观',
+        body: [
+          getSchemaTpl('collapseGroup', [
+            getSchemaTpl('style:formItem', {
+              renderer: context.info.renderer
+            }),
+            {
+              title: '图标',
+              body: [
+                {
+                  type: 'ae-switch-more',
+                  label: '自定义',
+                  bulk: true,
+                  mode: 'normal',
+                  value: false,
+                  formType: 'extend',
+                  form: {
+                    body: [
+                      {
+                        type: 'input-text',
+                        label: '字符',
+                        name: 'char'
+                      }
+                    ]
+                  },
+                  pipeIn: (value: string) => {
+                    if (typeof value === 'string' && value.length) {
+                      return {
+                        character: value
+                      };
+                    }
+                    return undefined;
+                  },
+                  pipeOut: (value: any) => {
+                    if (!isObject(value)) {
+                      return undefined;
+                    }
+                    return typeof value.character === 'string'
+                      ? value.character
+                      : undefined;
+                  }
+                },
+
+                {
+                  type: 'input-color',
+                  label: tipedLabel('未选中色值', '默认未选中色值为 #e7e7e8'),
+                  name: 'inactiveColor',
+                  pipeIn: defaultValue('#e7e7e8'),
+                  pipeOut: undefinedPipeOut
+                },
+
+                getSchemaTpl('combo-container', {
+                  type: 'combo',
+                  label: '选中色值',
+                  mode: 'normal',
+                  name: 'colors',
+                  items: [
+                    {
+                      placeholder: 'Key',
+                      type: 'input-number',
+                      unique: true,
+                      name: 'key',
+                      columnClassName: 'w-xs flex-none',
+                      min: 0,
+                      max: 10,
+                      step: 1,
+                      precision: 0
+                    },
+
+                    {
+                      placeholder: 'Value',
+                      type: 'input-color',
+                      name: 'value'
+                    }
+                  ],
+                  value: {
+                    2: '#abadb1',
+                    3: '#787b81',
+                    5: '#ffa900'
+                  },
+                  draggable: false,
+                  multiple: true,
+                  pipeIn: (value: any) => {
+                    if (!isObject(value)) {
+                      return Array.isArray(value) ? value : [];
+                    }
+
+                    const res = Object.keys(value).map((item: any) => {
+                      return {
+                        key: item,
+                        value: value[item] || ''
+                      };
+                    }); //.filter((item: any) => item.key <= this.count);
+
+                    return res;
+                  },
+                  pipeOut: (value: any[]) => {
+                    if (!value.length) {
+                      return undefined;
+                    }
+
+                    const res: any = {};
+                    const findMinCanUsedKey = (
+                      keys: string[],
+                      max: number
+                    ): void | number => {
+                      for (let i = 1; i <= max; i++) {
+                        if (!keys.includes(String(i))) {
+                          return i;
+                        }
+                      }
+                    };
+
+                    value.forEach(item => {
+                      const key =
+                        item.key !== undefined
+                          ? Number(item.key)
+                          : findMinCanUsedKey(Object.keys(res), this.count);
+
+                      if (key) {
+                        res[key] = item?.value || '';
+                      }
+                    });
+
+                    return res;
+                  }
+                })
+              ]
+            },
+            {
+              title: '描述',
+              body: [
+                getSchemaTpl('horizontal-align', {
+                  name: 'textPosition',
+                  pipeIn: defaultValue('right')
+                })
+              ]
+            },
+            getSchemaTpl('style:classNames', {
+              schema: [
+                getSchemaTpl('className', {
+                  label: '图标',
+                  name: 'charClassName'
+                }),
+
+                getSchemaTpl('className', {
+                  label: '评分描述',
+                  name: 'textClassName'
+                })
+              ]
+            })
+          ])
+        ]
+      },
+      {
+        title: '事件',
+        className: 'p-none',
+        body: [
+          getSchemaTpl('eventControl', {
+            name: 'onEvent',
+            ...getEventControlConfig(this.manager, context)
+          })
+        ]
+      }
+    ]);
+  };
 }
 
-registerEditorPlugin(RatingControlPlugin);
+registerEditorPlugin(RateControlPlugin);

package/src/plugin/Form/InputRichText.tsx

@@ -147,12 +147,11 @@ export class RichTextControlPlugin extends BasePlugin {
           noBorder: true,
           multiLine: true,
           items: [
-            {
-              type: 'switch',
+            getSchemaTpl('switch', {
               label: '是否显示菜单栏',
               value: 'true',
               name: 'menubar'
-            },
+            }),
             {
               type: 'input-number',
               label: '高度',

package/src/plugin/Form/InputTable.tsx

@@ -100,7 +100,7 @@ export class TableControlPlugin extends BasePlugin {
             type: 'select',
             name: 'type',
             placeholder: '类型',
-            value: 'input-text',
+            value: 'text',
             options: [
               {
                 value: 'text',
@@ -177,13 +177,10 @@ export class TableControlPlugin extends BasePlugin {
           }),
           getSchemaTpl('label'),
           getSchemaTpl('description'),
-          {
+          getSchemaTpl('switch', {
             label: '是否可新增',
-            type: 'switch',
-            name: 'addable',
-            mode: 'inline',
-            className: 'w-full'
-          },
+            name: 'addable'
+          }),
           {
             type: 'input-text',
             name: 'addBtnLabel',
@@ -195,6 +192,7 @@ export class TableControlPlugin extends BasePlugin {
             name: 'addBtnIcon',
             label: '增加按钮图标',
             type: 'icon-picker',
+            className: 'fix-icon-picker-overflow',
             visibleOn: 'data.addable'
           },
           getSchemaTpl('api', {
@@ -202,13 +200,10 @@ export class TableControlPlugin extends BasePlugin {
             label: '新增时提交的 API',
             visibleOn: 'data.addable'
           }),
-          {
+          getSchemaTpl('switch', {
             label: '是否可删除',
-            type: 'switch',
-            name: 'removable',
-            mode: 'inline',
-            className: 'w-full'
-          },
+            name: 'removable'
+          }),
           {
             type: 'input-text',
             name: 'deleteBtnLabel',
@@ -220,6 +215,7 @@ export class TableControlPlugin extends BasePlugin {
             name: 'deleteBtnIcon',
             label: '删除按钮图标',
             type: 'icon-picker',
+            className: 'fix-icon-picker-overflow',
             visibleOn: 'data.removable'
           },
           getSchemaTpl('api', {
@@ -227,13 +223,10 @@ export class TableControlPlugin extends BasePlugin {
             label: '删除时提交的 API',
             visibleOn: 'data.removable'
           }),
-          {
+          getSchemaTpl('switch', {
             label: '是否可编辑',
-            type: 'switch',
-            name: 'editable',
-            mode: 'inline',
-            className: 'w-full'
-          },
+            name: 'editable'
+          }),
           {
             type: 'input-text',
             name: 'editBtnLabel',
@@ -245,15 +238,13 @@ export class TableControlPlugin extends BasePlugin {
             name: 'editBtnIcon',
             label: '编辑按钮图标',
             type: 'icon-picker',
+            className: 'fix-icon-picker-overflow',
             visibleOn: 'data.editable'
           },
-          {
+          getSchemaTpl('switch', {
             label: '是否可复制',
-            type: 'switch',
-            name: 'copyable',
-            mode: 'inline',
-            className: 'w-full'
-          },
+            name: 'copyable'
+          }),
           {
             type: 'input-text',
             name: 'copyBtnLabel',
@@ -265,6 +256,7 @@ export class TableControlPlugin extends BasePlugin {
             name: 'copyBtnIcon',
             label: '复制按钮图标',
             type: 'icon-picker',
+            className: 'fix-icon-picker-overflow',
             visibleOn: 'data.copyable'
           },
           getSchemaTpl('api', {
@@ -283,6 +275,7 @@ export class TableControlPlugin extends BasePlugin {
             name: 'confirmBtnIcon',
             label: '确认编辑按钮图标',
             type: 'icon-picker',
+            className: 'fix-icon-picker-overflow',
             visibleOn: 'data.editable'
           },
           {
@@ -296,31 +289,25 @@ export class TableControlPlugin extends BasePlugin {
             name: 'cancelBtnIcon',
             label: '取消编辑按钮图标',
             type: 'icon-picker',
+            className: 'fix-icon-picker-overflow',
             visibleOn: 'data.editable'
           },
-          {
+          getSchemaTpl('switch', {
             label: '是否可拖拽排序',
-            type: 'switch',
-            name: 'draggable',
-            mode: 'inline',
-            className: 'w-full'
-          },
-          {
+            name: 'draggable'
+          }),
+
+          getSchemaTpl('switch', {
             label: '确认模式',
-            type: 'switch',
-            name: 'needConfirm',
-            mode: 'inline',
-            className: 'w-full'
-          },
-          {
+            name: 'needConfirm'
+          }),
+          getSchemaTpl('switch', {
             label: '严格模式',
-            type: 'switch',
             name: 'strictMode', // 同时需要配置strictMode
-            value: true,
-            mode: 'inline',
-            className: 'w-full'
-          },
-          {
+            value: true
+          }),
+
+          getSchemaTpl('switch', {
             label: '获取父级数据',
             labelRemark: {
               trigger: 'click',
@@ -330,7 +317,6 @@ export class TableControlPlugin extends BasePlugin {
                 '配置"canAccessSuperData": true 同时配置 "strictMode": false 开启此特性，初始会自动映射父级数据域的同名变量。需要注意的是，这里只会初始会映射，一旦修改过就是当前行数据为主了。也就是说，表单项类型的，只会起到初始值的作用',
               placement: 'left'
             },
-            type: 'switch',
             onChange: (value: any, oldValue: any, model: any, form: any) => {
               if (value && !oldValue) {
                 form.setValues({strictMode: false});
@@ -338,10 +324,8 @@ export class TableControlPlugin extends BasePlugin {
                 form.setValues({strictMode: true});
               }
             },
-            name: 'canAccessSuperData', // 同时需要配置strictMode
-            mode: 'inline',
-            className: 'w-full'
-          }
+            name: 'canAccessSuperData' // 同时需要配置strictMode
+          })
         ])
       },
       {

package/src/plugin/Form/InputTag.tsx

@@ -67,4 +67,4 @@ export class TagControlPlugin extends BasePlugin {
   ];
 }
 
-registerEditorPlugin(TagControlPlugin);
+registerEditorPlugin(TagControlPlugin);