Merge "amis-saas-6024 [Improvement.] [弹窗/抽屉] 宽度，高度调整" into feat-optimize-5

packages/amis-editor/src/plugin/Dialog.tsx

@@ -6,7 +6,8 @@ import {
   RegionConfig,
   RendererInfo,
   getSchemaTpl,
-  noop
+  noop,
+  defaultValue
 } from 'amis-editor-core';
 import {cloneDeep, assign} from 'lodash';
 import {getEventControlConfig} from '../renderer/event-control/helper';
@@ -99,31 +100,6 @@ export class DialogPlugin extends BasePlugin {
                 type: 'input-text',
                 name: 'title'
               },
-              {
-                label: '尺寸',
-                type: 'button-group-select',
-                value: 'md',
-                name: 'size',
-                size: 'sm',
-                options: [
-                  {
-                    label: '小',
-                    value: 'sm'
-                  },
-                  {
-                    label: '中',
-                    value: 'md'
-                  },
-                  {
-                    label: '大',
-                    value: 'lg'
-                  },
-                  {
-                    label: '超大',
-                    value: 'xl'
-                  }
-                ]
-              },
               getSchemaTpl('switch', {
                 label: '展示关闭按钮',
                 name: 'showCloseButton',
@@ -152,6 +128,36 @@ export class DialogPlugin extends BasePlugin {
       {
         title: '外观',
         body: getSchemaTpl('collapseGroup', [
+          {
+            title: '基本',
+            body: [
+              {
+                label: '尺寸',
+                type: 'button-group-select',
+                name: 'size',
+                size: 'sm',
+                options: [
+                  {
+                    label: '小',
+                    value: 'sm'
+                  },
+                  {
+                    label: '中',
+                    value: 'md'
+                  },
+                  {
+                    label: '大',
+                    value: 'lg'
+                  },
+                  {
+                    label: '超大',
+                    value: 'xl'
+                  }
+                ],
+                pipeIn: defaultValue('md')
+              }
+            ]
+          },
           {
             title: 'CSS类名',
             body: [

packages/amis-editor/src/plugin/Drawer.tsx

@@ -8,7 +8,6 @@ import {
   getSchemaTpl,
   noop
 } from 'amis-editor-core';
-import {assign, cloneDeep} from 'lodash';
 import {getEventControlConfig} from '../renderer/event-control/helper';
 import {InlineModal} from './Dialog';
 import {tipedLabel} from '../component/BaseControl';
@@ -104,7 +103,6 @@ export class DrawerPlugin extends BasePlugin {
                 type: 'button-group-select',
                 name: 'position',
                 label: '位置',
-                value: 'right',
                 mode: 'horizontal',
                 options: [
                   {
@@ -123,37 +121,8 @@ export class DrawerPlugin extends BasePlugin {
                     label: '下',
                     value: 'bottom'
                   }
-                ]
+                ],
-              },
+                pipeIn: defaultValue('right')
-              {
-                type: 'button-group-select',
-                name: 'size',
-                label: '尺寸',
-                value: 'md',
-                size: 'sm',
-                mode: 'horizontal',
-                options: [
-                  {
-                    label: '超小',
-                    value: 'xs'
-                  },
-                  {
-                    label: '小',
-                    value: 'sm'
-                  },
-                  {
-                    label: '中',
-                    value: 'md'
-                  },
-                  {
-                    label: '大',
-                    value: 'lg'
-                  },
-                  {
-                    label: '超大',
-                    value: 'xl'
-                  }
-                ]
               },
               getSchemaTpl('switch', {
                 name: 'overlay',
@@ -190,24 +159,51 @@ export class DrawerPlugin extends BasePlugin {
             title: '基本',
             body: [
               {
-                type: 'input-text',
+                type: 'button-group-select',
-                name: 'width',
+                name: 'size',
-                label: tipedLabel(
+                label: '尺寸',
-                  '宽度',
+                size: 'sm',
-                  '位置为 "左" 或 "右" 时生效。 默认宽度为"尺寸"字段配置的宽度，值单位默认为 px，也支持百分比等单位 ，如：100%'
+                mode: 'horizontal',
-                ),
+                options: [
-                disabledOn: 'this.position === "top" || this.position === "bottom"',
+                  {
-                tooltip: '位置为 为 "左" 或 "右" 时生效'
+                    label: '超小',
+                    value: 'xs'
+                  },
+                  {
+                    label: '小',
+                    value: 'sm'
+                  },
+                  {
+                    label: '中',
+                    value: 'md'
+                  },
+                  {
+                    label: '大',
+                    value: 'lg'
+                  },
+                  {
+                    label: '超大',
+                    value: 'xl'
+                  }
+                ],
+                pipeIn: defaultValue('md')
               },
-              {
+              getSchemaTpl('style:widthHeight', {
-                type: 'input-text',
+                widthSchema: {
-                name: 'height',
+                  label: tipedLabel(
-                label: tipedLabel(
+                    '宽度',
-                  '高度',
+                    '位置为 "左" 或 "右" 时生效。 默认宽度为"尺寸"字段配置的宽度，值单位默认为 px，也支持百分比等单位 ，如：100%'
-                  '位置为 "上" 或 "下" 时生效。 默认宽度为"尺寸"字段配置的高度，值单位默认为 px，也支持百分比等单位 ，如：100%'
+                  ),
-                ),
+                  disabledOn: 'this.position === "top" || this.position === "bottom"'
-                disabledOn: 'this.position === "left" || this.position === "right"'
+                },
-              }
+                heightSchema: {
+                  label: tipedLabel(
+                    '高度',
+                    '位置为 "上" 或 "下" 时生效。 默认宽度为"尺寸"字段配置的高度，值单位默认为 px，也支持百分比等单位 ，如：100%'
+                  ),
+                  disabledOn: 'this.position === "left" || this.position === "right"'
+                }
+              })
             ]
           },
           {

packages/amis-editor/src/tpl/style.tsx

@@ -191,13 +191,44 @@ setSchemaTpl('style:common', (
         }
       ]
     }
-  ].filter(item => 
+  ].filter(item =>
     include.length
       ? ~include.indexOf(item.key)
       : !~exclude.indexOf(item.key)
   );
 });
 
+/**
+ * 宽高配置控件
+ * @param {object | undefined} options witdthSchema(宽度控件配置) heightSchema(高度控件配置)
+ */
+setSchemaTpl('style:widthHeight', (option: any = {}) => {
+  const {widthSchema = {}, heightSchema = {}} = option;
+  return {
+    type: 'container',
+    body: [
+      {
+        type: 'input-number',
+        name: 'width',
+        label: '宽度',
+        unitOptions: [
+          'px', '%', 'rem', 'em', 'vw'
+        ],
+        ...widthSchema
+      },
+      {
+        type: 'input-number',
+        name: 'height',
+        label: '高度',
+        unitOptions: [
+          'px', '%', 'rem', 'em', 'vh'
+        ],
+        ...heightSchema
+      },
+    ]
+  };
+});
+
 /**
  * 样式相关的属性面板，因为预计会比较多所以拆出来
  */