amis-editor 4.2.0-beta.2 → 5.1.9

package/src/plugin/Progress.tsx

@@ -1,6 +1,7 @@
 import {registerEditorPlugin} from '../manager';
 import {BaseEventContext, BasePlugin} from '../plugin';
 import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
+import {tipedLabel} from '../component/control/BaseControl';
 
 export class ProgressPlugin extends BasePlugin {
   // 关联渲染器名字
@@ -9,6 +10,7 @@ export class ProgressPlugin extends BasePlugin {
 
   // 组件名称
   name = '进度展示';
+  searchKeywords = '进度条、progress';
   isBaseComponent = true;
   description = '用来展示进度。可配置各个进度段用不同的颜色展示。';
   docLink = '/amis/zh-CN/components/progress';
@@ -16,109 +18,247 @@ export class ProgressPlugin extends BasePlugin {
   icon = 'fa fa-angle-double-right';
   scaffold = {
     type: 'progress',
-    value: 66.66
+    value: 66,
+    strokeWidth: 6
   };
   previewSchema = {
     ...this.scaffold
   };
 
   panelTitle = '进度';
+
+  panelJustify = true;
+
   panelBodyCreator = (context: BaseEventContext) => {
-    const isUnderField = /\/field\/\w+$/.test(context.path as string);
-    return [
-      getSchemaTpl('tabs', [
-        {
-          title: '常规',
-          body: [
-            isUnderField
-              ? {
-                  type: 'tpl',
-                  inline: false,
-                  className: 'text-info text-sm',
-                  tpl: '<p>当前为字段内容节点配置，选择上层还有更多的配置。</p>'
+    const isFormItem = !!context?.info.renderer.isFormItem;
+    return getSchemaTpl('tabs', [
+      {
+        title: '属性',
+        body: getSchemaTpl('collapseGroup', [
+          {
+            title: '基本',
+            body: [
+              {
+                label: '类型',
+                name: 'mode',
+                type: 'select',
+                option: '继承',
+                value: 'line',
+                tiled: true,
+                options: [
+                  {
+                    label: '线形',
+                    value: 'line'
+                  },
+
+                  {
+                    label: '圆形',
+                    value: 'circle'
+                  },
+
+                  {
+                    label: '仪表盘',
+                    value: 'dashboard'
+                  }
+                ],
+                onChange: (
+                  value: any,
+                  oldValue: boolean,
+                  model: any,
+                  form: any
+                ) => {
+                  if (value === 'circle') {
+                    form.setValueByName('gapDegree', 0);
+                    form.setValueByName('gapPosition', '');
+                  } else if (value === 'dashboard') {
+                    form.setValueByName('gapDegree', 75);
+                    form.setValueByName('gapPosition', 'bottom');
+                  }
+                }
+              },
+              {
+                type: 'input-number',
+                name: 'value',
+                label: '默认值',
+                min: 0,
+                max: 100
+              },
+              getSchemaTpl('menuTpl', {
+                name: 'valueTpl'
+              }),
+
+              getSchemaTpl('switch', {
+                name: 'showLabel',
+                label: '进度值',
+                pipeIn: defaultValue(true)
+              }),
+
+              getSchemaTpl('placeholder', {
+                value: '-',
+                placeholder: '无数据空位提示',
+                label: tipedLabel('占位提示', '数据字段未定义时的值，不包括0')
+              })
+            ]
+          },
+          getSchemaTpl('status', {isFormItem})
+        ])
+      },
+      {
+        title: '外观',
+        body: getSchemaTpl('collapseGroup', [
+          {
+            title: '基本',
+            body: [
+              {
+                type: 'select',
+                name: 'progressClassName',
+                label: '尺寸',
+                value: '',
+                options: [
+                  {
+                    label: '极小',
+                    value: 'w-xs'
+                  },
+
+                  {
+                    label: '小',
+                    value: 'w-sm'
+                  },
+
+                  {
+                    label: '中',
+                    value: 'w-md'
+                  },
+
+                  {
+                    label: '大',
+                    value: 'w-lg'
+                  },
+
+                  {
+                    label: '默认',
+                    value: ''
+                  }
+                ]
+              },
+              {
+                type: 'input-number',
+                name: 'strokeWidth',
+                label: '线条宽度',
+                value: 6,
+                min: 0,
+                max: 100
+              },
+              {
+                type: 'input-number',
+                name: 'gapDegree',
+                visibleOn: 'data.mode === "dashboard"',
+                label: '缺口角度',
+                value: 75,
+                min: 0,
+                max: 295
+              },
+              {
+                label: '缺口位置',
+                name: 'gapPosition',
+                type: 'button-group-select',
+                visibleOn: 'data.mode === "dashboard"',
+                value: defaultValue('bottom'),
+                tiled: true,
+                options: [
+                  {
+                    label: '上',
+                    value: 'top'
+                  },
+
+                  {
+                    label: '下',
+                    value: 'bottom'
+                  },
+
+                  {
+                    label: '左',
+                    value: 'left'
+                  },
+                  {
+                    label: '右',
+                    value: 'right'
+                  }
+                ]
+              },
+              getSchemaTpl('switch', {
+                name: 'animate',
+                label: '显示动画',
+                visibleOn: 'data.mode === "line"'
+              }),
+              {
+                type: 'button-group-select',
+                name: 'style',
+                label: '样式',
+                visibleOn: 'data.mode === "line"',
+                options: [
+                  {
+                    label: '纯色',
+                    value: 'purity'
+                  },
+                  {
+                    label: '条纹',
+                    value: 'stripe'
+                  }
+                ],
+                pipeIn: (value: any, form: any) => {
+                  return form.data?.stripe ? 'stripe' : 'purity';
+                },
+                onChange(value: any, oldValue: boolean, model: any, form: any) {
+                  form.setValueByName('stripe', value === 'stripe');
                 }
-              : null,
-
-            {
-              name: 'showLabel',
-              type: 'switch',
-              mode: 'inline',
-              pipeIn: defaultValue(true),
-              label: '是否显示文字'
-            },
-
-            {
-              name: 'stripe',
-              type: 'switch',
-              mode: 'inline',
-              label: '是否显示条纹'
-            },
-
-            {
-              name: 'animate',
-              type: 'switch',
-              mode: 'inline',
-              label: '是否显示动画'
-            },
-
-            {
-              name: 'map',
-              label: '等级配置',
-              type: 'input-array',
-              items: {
-                type: 'input-text'
               },
-              descrition: '配置不通的值段，用不通的样式提示用户',
-              pipeIn: defaultValue([
-                'bg-danger',
-                'bg-warning',
-                'bg-info',
-                'bg-success',
-                'bg-success'
-              ])
-            },
-
-            getSchemaTpl('switchDefaultValue'),
-
-            {
-              type: 'input-text',
-              name: 'value',
-              label: '默认值',
-              validations: 'isNumeric',
-              visibleOn: 'typeof this.value !== "undefined"'
-            },
-
-            {
-              name: 'placeholder',
-              type: 'input-text',
-              pipeIn: defaultValue('-'),
-              label: '占位符'
-            }
-          ]
-        },
-        {
-          title: '外观',
-          body: [
-            getSchemaTpl('className'),
-            getSchemaTpl('className', {
-              name: 'progressClassName',
-              label: '进度外层 CSS 类名',
-              pipeIn: defaultValue(
-                'progress-xs progress-striped active m-t-xs m-b-none'
-              )
-            }),
-            getSchemaTpl('className', {
-              name: 'progressBarClassName',
-              label: '进度条 CSS 类名'
-            })
-          ]
-        },
-        {
-          title: '显隐',
-          body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
-        }
-      ])
-    ];
+              {
+                name: 'map',
+                type: 'combo',
+                mode: 'normal',
+                multiple: true,
+                label: tipedLabel(
+                  '颜色',
+                  '分配不同的值段，用不同的颜色提示用户'
+                ),
+                items: [
+                  {
+                    type: 'input-number',
+                    name: 'value',
+                    placeholder: 'value',
+                    required: true,
+                    columnClassName: 'w-xs',
+                    unique: true,
+                    min: 0,
+                    step: 10,
+                    precision: 0
+                  },
+                  {
+                    placeholder: 'color',
+                    type: 'input-color',
+                    name: 'color',
+                    required: true
+                  }
+                ],
+                value: [
+                  {color: '#dc3545', value: 20},
+                  {color: '#fad733', value: 60},
+                  {color: '#28a745', value: 100}
+                ],
+                pipeIn: (value: any) => {
+                  return Array.isArray(value) ? value : [];
+                }
+              }
+            ]
+          },
+          getSchemaTpl('style:classNames', {
+            schema: [],
+            isFormItem
+          })
+        ])
+      }
+    ]);
   };
 }
 

package/src/plugin/Service.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import {registerEditorPlugin} from '../manager';
 import {BaseEventContext, BasePlugin, RegionConfig} from '../plugin';
 import {getSchemaTpl} from '../component/schemaTpl';
+import {getEventControlConfig} from '../util';
 
 export class ServicePlugin extends BasePlugin {
   // 关联渲染器名字
@@ -82,15 +83,14 @@ export class ServicePlugin extends BasePlugin {
             step: 500,
             description: '设置后将自动定时刷新，单位 ms'
           },
-          {
+
+          getSchemaTpl('switch', {
             name: 'silentPolling',
             label: '静默加载',
-            mode: 'inline',
-            className: 'block',
-            type: 'switch',
             visibleOn: '!!data.interval',
             description: '设置自动定时刷新是否显示加载动画'
-          },
+          }),
+
           {
             name: 'stopAutoRefreshWhen',
             label: '停止定时刷新检测',
@@ -152,7 +152,11 @@ export class ServicePlugin extends BasePlugin {
         body: [
           getSchemaTpl('ref'),
           getSchemaTpl('name'),
-          getSchemaTpl('visible')
+          getSchemaTpl('visible'),
+          getSchemaTpl('eventControl', {
+            name: 'onEvent',
+            ...getEventControlConfig(this.manager, context)
+          })
         ]
       }
     ]);

package/src/plugin/Table.tsx

@@ -15,6 +15,7 @@ import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
 import {repeatArray} from '../util';
 import {setVariable} from 'amis-core';
 import {mockValue} from '../mocker';
+import {EditorNodeType} from '../store/node';
 import {SchemaObject} from 'amis/lib/Schema';
 
 export class TablePlugin extends BasePlugin {
@@ -242,43 +243,31 @@ export class TablePlugin extends BasePlugin {
             description: '自动即列数量大于5个时自动开启'
           },
 
-          {
+          getSchemaTpl('switch', {
             name: 'affixHeader',
-            type: 'switch',
             label: '是否固顶表头',
-            mode: 'inline',
-            className: 'w-full',
             pipeIn: defaultValue(true)
-          },
+          }),
 
-          {
+          getSchemaTpl('switch', {
             name: 'showHeader',
-            type: 'switch',
-            mode: 'inline',
-            className: 'w-full',
             label: '是否显示头部',
             pipeIn: defaultValue(true)
-          },
+          }),
 
-          {
+          getSchemaTpl('switch', {
             name: 'showFooter',
-            type: 'switch',
-            mode: 'inline',
-            className: 'w-full',
             label: '是否显示底部',
             pipeIn: defaultValue(true)
-          },
+          }),
 
-          {
+          getSchemaTpl('switch', {
             name: 'footable',
-            type: 'switch',
-            mode: 'inline',
-            className: 'w-full',
             label: '是否开启单条底部展示',
             description:
               '如果列太多显示会很臃肿，可以考虑把部分列放在当前行的底部展示',
             pipeIn: (value: any) => !!value
-          },
+          }),
 
           {
             name: 'footable.expand',
@@ -423,6 +412,46 @@ export class TablePlugin extends BasePlugin {
       };
     }
   }
+
+  async buildDataSchemas(node: EditorNodeType, region?: EditorNodeType) {
+    const itemsSchema: any = {
+      $id: 'tableRow',
+      type: 'object',
+      properties: {}
+    };
+    const columns: EditorNodeType = node.children.find(
+      item => item.isRegion && item.region === 'columns'
+    );
+
+    for (let current of columns.children) {
+      const schema = current.schema;
+      if (schema.name) {
+        itemsSchema.properties[schema.name] = current.info?.plugin
+          ?.buildDataSchemas
+          ? await current.info.plugin.buildDataSchemas(current, region)
+          : {
+              type: 'string',
+              title: schema.label || schema.name,
+              description: schema.description
+            };
+      }
+    }
+
+    if (region?.region === 'columns') {
+      return itemsSchema;
+    }
+
+    return {
+      $id: 'table',
+      type: 'object',
+      properties: {
+        items: {
+          type: 'array',
+          items: itemsSchema
+        }
+      }
+    };
+  }
 }
 
 registerEditorPlugin(TablePlugin);