amis-editor 4.2.0-beta.0 → 5.1.8

package/src/plugin/Grid.tsx

@@ -176,183 +176,195 @@ export class GridPlugin extends BasePlugin {
   panelWithOutOthers = false;
   panelBodyCreator(context: BaseEventContext) {
     const asSecondFactor = context.secondFactor;
+
     return [
-      getSchemaTpl('fieldSet', {
-        title: '插入',
-        collapsable: false,
-        body: [
-          asSecondFactor
-            ? null
-            : {
-                type: 'wrapper',
-                size: 'none',
-                className: 'grid grid-cols-2 gap-4 mb-4',
+      getSchemaTpl('tabs', [
+        {
+          title: '属性',
+          className: 'p-none',
+          body: [
+            getSchemaTpl('collapseGroup', [
+              {
+                title: '插入',
+                body: [
+                  asSecondFactor
+                    ? null
+                    : {
+                        type: 'wrapper',
+                        size: 'none',
+                        className: 'grid grid-cols-2 gap-4 mb-4',
+                        body: [
+                          {
+                            children: (
+                              <Button
+                                size="sm"
+                                onClick={() =>
+                                  this.insertRowAfter(context.node)
+                                }
+                              >
+                                <Icon className="icon" icon="arrow-to-bottom" />
+                                <span>下方插入新行</span>
+                              </Button>
+                            )
+                          },
+                          {
+                            children: (
+                              <Button
+                                size="sm"
+                                onClick={() =>
+                                  this.insertRowBefore(context.node)
+                                }
+                              >
+                                <Icon
+                                  className="icon"
+                                  icon="top-arrow-to-top"
+                                />
+                                <span>上方插入新行</span>
+                              </Button>
+                            )
+                          }
+                        ]
+                      }
+                ].filter(item => item)
+              },
+              {
+                title: '布局',
                 body: [
                   {
-                    children: (
-                      <Button
-                        size="sm"
-                        onClick={() => this.insertRowAfter(context.node)}
-                      >
-                        <Icon className="icon" icon="arrow-to-bottom" />
-                        <span>下方插入新行</span>
-                      </Button>
-                    )
+                    label: '列数',
+                    name: 'columns',
+                    type: 'select',
+                    pipeIn: (value: any) =>
+                      Array.isArray(value) ? value.length : undefined,
+                    pipeOut: (value: any, origin: any) => {
+                      if (Array.isArray(origin)) {
+                        if (origin.length > value) {
+                          origin = origin.concat();
+                          origin.splice(value - 1, origin.length - value);
+                        } else {
+                          origin = origin.concat(
+                            repeatArray(
+                              {
+                                body: []
+                              },
+                              value - origin.length
+                            )
+                          );
+                        }
+                      }
+
+                      return origin;
+                    },
+                    options: repeatArray(null, 12).map((_, index) => ({
+                      label: `${index + 1}`,
+                      value: index + 1
+                    }))
                   },
-                  {
-                    children: (
-                      <Button
-                        size="sm"
-                        onClick={() => this.insertRowBefore(context.node)}
-                      >
-                        <Icon className="icon" icon="top-arrow-to-top" />
-                        <span>上方插入新行</span>
-                      </Button>
-                    )
-                  }
-                ]
-              },
 
-          {
-            label: '列数',
-            name: 'columns',
-            type: 'select',
-            pipeIn: (value: any) =>
-              Array.isArray(value) ? value.length : undefined,
-            pipeOut: (value: any, origin: any) => {
-              if (Array.isArray(origin)) {
-                if (origin.length > value) {
-                  origin = origin.concat();
-                  origin.splice(value - 1, origin.length - value);
-                } else {
-                  origin = origin.concat(
-                    repeatArray(
+                  {
+                    type: 'button-group-select',
+                    name: 'gap',
+                    label: '列间距',
+                    size: 'sm',
+                    clearable: true,
+                    tiled: true,
+                    options: [
                       {
-                        body: []
+                        label: '无',
+                        value: 'none'
                       },
-                      value - origin.length
-                    )
-                  );
-                }
-              }
-
-              return origin;
-            },
-            options: repeatArray(null, 12).map((_, index) => ({
-              label: `${index + 1}`,
-              value: index + 1
-            }))
-          },
-
-          {
-            type: 'button-group-select',
-            name: 'gap',
-            label: '列间距',
-            size: 'sm',
-            clearable: true,
-            tiled: true,
-            options: [
-              {
-                label: '无',
-                value: 'none'
-              },
-              {
-                label: '极小',
-                value: 'xs'
-              },
-              {
-                label: '小',
-                value: 'sm'
-              },
-              {
-                label: '正常',
-                value: 'base'
-              },
-              {
-                label: '中',
-                value: 'md'
-              },
-              {
-                label: '大',
-                value: 'lg'
-              }
-            ]
-          }
-        ].filter(item => item)
-      }),
-
-      getSchemaTpl('fieldSet', {
-        title: '对齐',
-        collapsable: false,
-        body: [
-          {
-            type: 'button-group-select',
-            name: 'align',
-            size: 'sm',
-            label: '水平对齐',
-            tiled: true,
-            pipeIn: defaultValue('left'),
-            options: [
-              {
-                value: 'left',
-                label: '左对齐'
-              },
-              {
-                value: 'center',
-                label: '中间对齐'
-              },
-              {
-                value: 'right',
-                label: '右对齐'
-              },
-              {
-                value: 'between',
-                label: '两端对齐'
-              }
-            ]
-          },
-          {
-            type: 'button-group-select',
-            name: 'valign',
-            size: 'sm',
-            label: '垂直对齐',
-            tiled: true,
-            pipeIn: defaultValue('top'),
-            options: [
-              {
-                value: 'top',
-                label: '顶部对齐'
-              },
-              {
-                value: 'middle',
-                label: '中间对齐'
-              },
-              {
-                value: 'bottom',
-                label: '底部对齐'
-              },
-              {
-                value: 'between',
-                label: '两端对齐'
+                      {
+                        label: '极小',
+                        value: 'xs'
+                      },
+                      {
+                        label: '小',
+                        value: 'sm'
+                      },
+                      {
+                        label: '正常',
+                        value: 'base'
+                      },
+                      {
+                        label: '中',
+                        value: 'md'
+                      },
+                      {
+                        label: '大',
+                        value: 'lg'
+                      }
+                    ]
+                  },
+                  {
+                    type: 'button-group-select',
+                    name: 'align',
+                    size: 'sm',
+                    label: '水平对齐',
+                    tiled: true,
+                    pipeIn: defaultValue('left'),
+                    options: [
+                      {
+                        value: 'left',
+                        label: '左对齐'
+                      },
+                      {
+                        value: 'center',
+                        label: '中间对齐'
+                      },
+                      {
+                        value: 'right',
+                        label: '右对齐'
+                      },
+                      {
+                        value: 'between',
+                        label: '两端对齐'
+                      }
+                    ]
+                  },
+                  {
+                    type: 'button-group-select',
+                    name: 'valign',
+                    size: 'sm',
+                    label: '垂直对齐',
+                    tiled: true,
+                    pipeIn: defaultValue('top'),
+                    options: [
+                      {
+                        value: 'top',
+                        label: '顶部对齐'
+                      },
+                      {
+                        value: 'middle',
+                        label: '中间对齐'
+                      },
+                      {
+                        value: 'bottom',
+                        label: '底部对齐'
+                      },
+                      {
+                        value: 'between',
+                        label: '两端对齐'
+                      }
+                    ]
+                  }
+                ]
               }
-            ]
-          }
-        ]
-      }),
-
-      this.panelWithOutOthers
-        ? null
-        : getSchemaTpl('fieldSet', {
-            title: '其他',
-            collapsable: true,
-            body: [
-              getSchemaTpl('className'),
-              getSchemaTpl('subFormItemMode'),
-              getSchemaTpl('subFormHorizontalMode'),
-              getSchemaTpl('subFormHorizontal')
-            ]
-          })
-    ].filter(item => item);
+            ])
+          ]
+        },
+        this.panelWithOutOthers
+          ? null
+          : {
+              title: '外观',
+              body: [
+                getSchemaTpl('className'),
+                getSchemaTpl('subFormItemMode'),
+                getSchemaTpl('subFormHorizontalMode'),
+                getSchemaTpl('subFormHorizontal')
+              ]
+            }
+      ])
+    ];
   }
 
   vRendererConfig: VRendererConfig = {
@@ -369,155 +381,170 @@ export class GridPlugin extends BasePlugin {
       const host = context.node.host;
 
       return [
-        getSchemaTpl('fieldSet', {
-          title: '插入',
-          collapsable: false,
-          body: [
-            {
-              type: 'wrapper',
-              size: 'none',
-              className: 'grid grid-cols-2 gap-4',
-              body: [
-                host.isSecondFactor
-                  ? null
-                  : {
-                      children: (
-                        <Button
-                          size="sm"
-                          onClick={() => this.insertRowAfter(context.node.host)}
-                        >
-                          <Icon className="icon" icon="arrow-to-bottom" />
-                          <span>下方插入新行</span>
-                        </Button>
-                      )
-                    },
-                host.isSecondFactor
-                  ? null
-                  : {
-                      children: (
-                        <Button
-                          size="sm"
-                          onClick={() =>
-                            this.insertRowBefore(context.node.host)
-                          }
-                        >
-                          <Icon className="icon" icon="top-arrow-to-top" />
-                          <span>上方插入新行</span>
-                        </Button>
-                      )
-                    },
-                {
-                  children: (
-                    <Button
-                      size="sm"
-                      onClick={() => this.insertColumnBefore(context)}
-                    >
-                      <Icon className="icon" icon="left-arrow-to-left" />
-                      <span>左侧插入新列</span>
-                    </Button>
-                  )
-                },
-                {
-                  children: (
-                    <Button
-                      size="sm"
-                      onClick={() => this.insertColumnAfter(context)}
-                    >
-                      <Icon className="icon" icon="arrow-to-right" />
-                      <span>右侧插入新列</span>
-                    </Button>
-                  )
-                }
-              ].filter(item => item)
-            }
-          ]
-        }),
-        getSchemaTpl('fieldSet', {
-          title: '宽度设置',
-          collapsable: false,
-          body: [
-            {
-              type: 'button-group-select',
-              name: 'md',
-              size: 'sm',
-              label: false,
-              pipeIn: (value: any) =>
-                typeof value === 'number' ? 'manual' : value || '',
-              pipeOut: (value: any) => (value === 'manual' ? 1 : value),
-              tiled: true,
-              options: [
-                {
-                  value: '',
-                  label: '适配宽度'
-                },
-                {
-                  value: 'auto',
-                  label: '适配内容'
-                },
-                {
-                  value: 'manual',
-                  label: '手动'
-                }
-              ]
-            },
-
-            {
-              visibleOn: 'typeof this.md === "number"',
-              label: '宽度占比',
-              type: 'input-range',
-              name: 'md',
-              min: 1,
-              max: 12,
-              step: 1
-            }
-          ]
-        }),
-
-        getSchemaTpl('fieldSet', {
-          title: '垂直对齐',
-          collapsable: false,
-          body: [
-            {
-              type: 'button-group-select',
-              name: 'valign',
-              size: 'sm',
-              label: false,
-              tiled: true,
-              clearable: true,
-              options: [
-                {
-                  value: 'top',
-                  label: '顶部对齐'
-                },
+        getSchemaTpl('tabs', [
+          {
+            title: '属性',
+            className: 'p-none',
+            body: [
+              getSchemaTpl('collapseGroup', [
                 {
-                  value: 'middle',
-                  label: '中间对齐'
+                  title: '插入',
+                  body: [
+                    {
+                      type: 'wrapper',
+                      size: 'none',
+                      className: 'grid grid-cols-2 gap-4',
+                      body: [
+                        host.isSecondFactor
+                          ? null
+                          : {
+                              children: (
+                                <Button
+                                  size="sm"
+                                  onClick={() =>
+                                    this.insertRowAfter(context.node.host)
+                                  }
+                                >
+                                  <Icon
+                                    className="icon"
+                                    icon="arrow-to-bottom"
+                                  />
+                                  <span>下方插入新行</span>
+                                </Button>
+                              )
+                            },
+                        host.isSecondFactor
+                          ? null
+                          : {
+                              children: (
+                                <Button
+                                  size="sm"
+                                  onClick={() =>
+                                    this.insertRowBefore(context.node.host)
+                                  }
+                                >
+                                  <Icon
+                                    className="icon"
+                                    icon="top-arrow-to-top"
+                                  />
+                                  <span>上方插入新行</span>
+                                </Button>
+                              )
+                            },
+                        {
+                          children: (
+                            <Button
+                              size="sm"
+                              onClick={() => this.insertColumnBefore(context)}
+                            >
+                              <Icon
+                                className="icon"
+                                icon="left-arrow-to-left"
+                              />
+                              <span>左侧插入新列</span>
+                            </Button>
+                          )
+                        },
+                        {
+                          children: (
+                            <Button
+                              size="sm"
+                              onClick={() => this.insertColumnAfter(context)}
+                            >
+                              <Icon className="icon" icon="arrow-to-right" />
+                              <span>右侧插入新列</span>
+                            </Button>
+                          )
+                        }
+                      ].filter(item => item)
+                    }
+                  ]
                 },
                 {
-                  value: 'bottom',
-                  label: '底部对齐'
+                  title: '宽度',
+                  body: [
+                    {
+                      type: 'button-group-select',
+                      name: 'md',
+                      size: 'sm',
+                      label: false,
+                      pipeIn: (value: any) =>
+                        typeof value === 'number' ? 'manual' : value || '',
+                      pipeOut: (value: any) => (value === 'manual' ? 1 : value),
+                      tiled: true,
+                      options: [
+                        {
+                          value: '',
+                          label: '适配宽度'
+                        },
+                        {
+                          value: 'auto',
+                          label: '适配内容'
+                        },
+                        {
+                          value: 'manual',
+                          label: '手动'
+                        }
+                      ]
+                    },
+                    {
+                      visibleOn: 'typeof this.md === "number"',
+                      label: '宽度占比',
+                      type: 'input-range',
+                      name: 'md',
+                      min: 1,
+                      max: 12,
+                      step: 1
+                    }
+                  ]
                 },
                 {
-                  value: 'between',
-                  label: '两端对齐'
+                  title: '布局',
+                  body: [
+                    {
+                      type: 'button-group-select',
+                      name: 'valign',
+                      size: 'sm',
+                      label: false,
+                      tiled: true,
+                      clearable: true,
+                      options: [
+                        {
+                          value: 'top',
+                          label: '顶部对齐'
+                        },
+                        {
+                          value: 'middle',
+                          label: '中间对齐'
+                        },
+                        {
+                          value: 'bottom',
+                          label: '底部对齐'
+                        },
+                        {
+                          value: 'between',
+                          label: '两端对齐'
+                        }
+                      ]
+                    }
+                  ]
                 }
-              ]
-            }
-          ]
-        }),
-
-        this.panelWithOutOthers
-          ? null
-          : getSchemaTpl('fieldSet', {
-              title: 'CSS 设置',
-              body: [
-                getSchemaTpl('className', {
-                  label: '栏 CSS 类名',
-                  name: 'columnClassName'
-                })
-              ]
-            })
-      ].filter(item => item);
+              ])
+            ]
+          },
+          {
+            title: '外观',
+            body: [
+              this.panelWithOutOthers
+                ? null
+                : getSchemaTpl('className', {
+                    label: '栏 CSS 类名',
+                    name: 'columnClassName'
+                  })
+            ]
+          }
+        ])
+      ];
     }
   };
 
@@ -542,6 +569,7 @@ export class GridPlugin extends BasePlugin {
         return (
           <VRenderer
             key={`${node.$$id}-${index}`}
+            type={info.type}
             plugin={info.plugin}
             renderer={info.renderer}
             $schema="/schemas/GridColumn.json"