amis-editor 4.2.0-beta.3 → 5.1.8

package/src/plugin/TooltipWrapper.tsx

@@ -1,6 +1,11 @@
+/**
+ * @file 文字提示容器
+ */
+
 import {registerEditorPlugin} from '../manager';
 import {BasePlugin, RegionConfig, BaseEventContext} from '../plugin';
 import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
+import {tipedLabel} from '../component/control/BaseControl';
 
 export class TooltipWrapperPlugin extends BasePlugin {
   rendererName = 'tooltip-wrapper';
@@ -22,7 +27,10 @@ export class TooltipWrapperPlugin extends BasePlugin {
         type: 'tpl',
         tpl: '内容'
       }
-    ]
+    ],
+    enterable: true,
+    showArrow: true,
+    offset: [0, 0]
   };
 
   previewSchema = {
@@ -38,152 +46,240 @@ export class TooltipWrapperPlugin extends BasePlugin {
   ];
 
   panelTitle = this.name;
+
+  panelJustify = true;
+
   panelBodyCreator = (context: BaseEventContext) => {
     return [
       getSchemaTpl('tabs', [
         {
           title: '属性',
+          className: 'p-none',
           body: [
-            {
-              type: 'input-text',
-              name: 'title',
-              label: '提示标题'
-            },
-            {
-              type: 'textarea',
-              name: 'tooltip',
-              label: '提示内容'
-            },
-            {
-              name: 'wrapperComponent',
-              label: '容器标签',
-              type: 'input-text',
-              options: [
-                'article',
-                'aside',
-                'code',
-                'div',
-                'footer',
-                'header',
-                'p',
-                'section'
-              ],
-              validations: {
-                isAlphanumeric: true,
-                matchRegexp: '/^(?!.*script).*$/' // 禁用一下script标签
-              },
-              validationErrors: {
-                isAlpha: 'HTML标签不合法，请重新输入',
-                matchRegexp: 'HTML标签不合法，请重新输入'
+            getSchemaTpl('collapseGroup', [
+              {
+                title: '常用',
+                body: [
+                  {
+                    type: 'input-text',
+                    name: 'title',
+                    label: '提示标题'
+                  },
+                  {
+                    type: 'textarea',
+                    name: 'tooltip',
+                    label: '提示内容'
+                  },
+
+                  {
+                    name: 'trigger',
+                    type: 'select',
+                    label: tipedLabel('触发方式', '默认方式为”鼠标悬停“'),
+                    multiple: true,
+                    value: ['hover'],
+                    pipeIn: (value: any) =>
+                      Array.isArray(value) ? value.join(',') : [],
+                    pipeOut: (value: any) =>
+                      value && value.length ? value.split(',') : undefined,
+                    options: [
+                      {
+                        label: '鼠标悬停',
+                        value: 'hover'
+                      },
+
+                      {
+                        label: '点击',
+                        value: 'click'
+                      }
+                    ]
+                  },
+                  {
+                    type: 'button-group-select',
+                    name: 'placement',
+                    label: '提示位置',
+                    size: 'sm',
+                    className: 'ae-buttonGroupSelect--justify',
+                    options: [
+                      {
+                        label: '上',
+                        value: 'top'
+                        // icon: 'fa fa-arrow-up'
+                      },
+                      {
+                        label: '下',
+                        value: 'bottom'
+                        // icon: 'fa fa-arrow-down'
+                      },
+                      {
+                        label: '左',
+                        value: 'left'
+                        // icon: 'fa fa-arrow-left'
+                      },
+                      {
+                        label: '右',
+                        value: 'right'
+                        // icon: 'fa fa-arrow-right'
+                      }
+                    ],
+                    pipeIn: defaultValue('top')
+                  },
+                  {
+                    type: 'button-group-select',
+                    name: 'tooltipTheme',
+                    label: '主题色',
+                    size: 'sm',
+                    className: 'ae-buttonGroupSelect--justify',
+                    options: [
+                      {
+                        label: '亮色',
+                        value: 'light',
+                        icon: 'far fa-sun'
+                      },
+                      {
+                        label: '暗色',
+                        value: 'dark',
+                        icon: 'far fa-moon'
+                      }
+                    ],
+                    pipeIn: defaultValue('light')
+                  },
+                  {
+                    name: 'inline',
+                    label: '容器内联',
+                    type: 'switch',
+                    mode: 'row',
+                    inputClassName:
+                      'inline-flex justify-between flex-row-reverse'
+                  },
+                  {
+                    name: 'rootClose',
+                    visibleOn: '~this.trigger.indexOf("click")',
+                    label: '点击容器外部关闭提示',
+                    type: 'switch',
+                    mode: 'row',
+                    inputClassName:
+                      'inline-flex justify-between flex-row-reverse'
+                  }
+                ]
               },
-              validateOnChange: false
-            },
-            {
-              name: 'trigger',
-              type: 'select',
-              label: '触发方式',
-              multiple: true,
-              value: ['hover'],
-              pipeIn: (value: any) =>
-                Array.isArray(value) ? value.join(',') : [],
-              pipeOut: (value: any) =>
-                value && value.length ? value.split(',') : undefined,
-              options: [
-                {
-                  label: '鼠标悬停',
-                  value: 'hover'
-                },
+              {
+                title: '高级',
+                body: [
+                  {
+                    name: 'wrapperComponent',
+                    label: '容器标签',
+                    type: 'input-text',
+                    options: [
+                      'article',
+                      'aside',
+                      'code',
+                      'div',
+                      'footer',
+                      'header',
+                      'p',
+                      'section'
+                    ],
+                    validations: {
+                      isAlphanumeric: true,
+                      matchRegexp: '/^(?!.*script).*$/' // 禁用一下script标签
+                    },
+                    validationErrors: {
+                      isAlpha: 'HTML标签不合法，请重新输入',
+                      matchRegexp: 'HTML标签不合法，请重新输入'
+                    },
+                    validateOnChange: false
+                  },
+                  {
+                    type: 'input-group',
+                    label: tipedLabel(
+                      '浮层偏移量',
+                      '提示浮层位置相对”水平“、”垂直“的偏移量'
+                    ),
+                    body: [
+                      {
+                        type: 'input-number',
+                        name: 'offset',
+                        suffix: 'px',
+                        pipeIn: (value: any) =>
+                          Array.isArray(value) ? value[0] || 0 : 0,
+                        pipeOut: (value: any, oldValue: any, data: any) => [
+                          value,
+                          data.offset[1]
+                        ]
+                      },
+                      {
+                        type: 'input-number',
+                        name: 'offset',
+                        suffix: 'px',
+                        pipeIn: (value: any) =>
+                          Array.isArray(value) ? value[1] || 0 : 0,
+                        pipeOut: (value: any, oldValue: any, data: any) => [
+                          data.offset[0],
+                          value
+                        ]
+                      }
+                    ]
+                  },
+                  {
+                    type: 'switch',
+                    label: tipedLabel(
+                      '可进入浮层',
+                      '关闭后鼠标进入提示浮层后也关闭浮层'
+                    ),
+                    name: 'enterable',
+                    inputClassName: 'is-inline'
+                  },
+                  {
+                    type: 'switch',
+                    label: tipedLabel(
+                      '展示浮层箭头',
+                      '关闭后提示浮层不展示指向箭头'
+                    ),
+                    name: 'showArrow',
+                    inputClassName: 'is-inline'
+                  },
 
-                {
-                  label: '点击',
-                  value: 'click'
-                }
-              ]
-            },
-            {
-              type: 'button-group-select',
-              name: 'placement',
-              label: '提示位置',
-              options: [
-                {
-                  label: '上',
-                  value: 'top',
-                  icon: 'fa fa-arrow-up'
-                },
-                {
-                  label: '下',
-                  value: 'bottom',
-                  icon: 'fa fa-arrow-down'
-                },
-                {
-                  label: '左',
-                  value: 'left',
-                  icon: 'fa fa-arrow-left'
-                },
-                {
-                  label: '右',
-                  value: 'right',
-                  icon: 'fa fa-arrow-right'
-                }
-              ],
-              pipeIn: defaultValue('top')
-            },
-            {
-              type: 'button-group-select',
-              name: 'tooltipTheme',
-              label: '主题色',
-              options: [
-                {
-                  label: '亮色',
-                  value: 'light',
-                  icon: 'fa fa-sun'
-                },
-                {
-                  label: '暗色',
-                  value: 'dark',
-                  icon: 'fas fa-moon'
-                }
-              ],
-              pipeIn: defaultValue('light')
-            },
-            {
-              name: 'inline',
-              label: '容器内联',
-              type: 'switch',
-              mode: 'row',
-              inputClassName: 'inline-flex justify-between flex-row-reverse'
-            },
-            {
-              name: 'rootClose',
-              visibleOn: '~this.trigger.indexOf("click")',
-              label: '点击容器外部关闭提示',
-              type: 'switch',
-              mode: 'row',
-              inputClassName: 'inline-flex justify-between flex-row-reverse'
-            },
-            {
-              label: '延迟关闭时间',
-              type: 'input-number',
-              min: 0,
-              step: 100,
-              name: 'delay',
-              suffix: 'ms',
-              pipeIn: defaultValue(0)
-            }
+                  {
+                    label: '延迟打开',
+                    type: 'input-number',
+                    min: 0,
+                    step: 100,
+                    name: 'mouseEnterDelay',
+                    suffix: 'ms',
+                    pipeIn: defaultValue(0)
+                  },
+                  {
+                    label: '延迟关闭',
+                    type: 'input-number',
+                    min: 0,
+                    step: 100,
+                    name: 'mouseLeaveDelay',
+                    suffix: 'ms',
+                    pipeIn: defaultValue(0)
+                  }
+                ]
+              }
+            ])
           ]
         },
         {
           title: '外观',
-          body: [
-            getSchemaTpl('className', {
-              label: '内容区CSS类名'
-            }),
-            getSchemaTpl('className', {
-              label: '浮层CSS类名',
-              name: 'tooltipClassName'
-            }),
-            getSchemaTpl('style')
-          ]
+          className: 'p-none',
+          body: getSchemaTpl('collapseGroup', [
+            ...getSchemaTpl('style:common'),
+            {
+              title: 'CSS 类名',
+              body: [
+                getSchemaTpl('className', {
+                  label: '内容区CSS类名'
+                }),
+                getSchemaTpl('className', {
+                  label: '浮层CSS类名',
+                  name: 'tooltipClassName'
+                })
+              ]
+            }
+          ])
         }
       ])
     ];

package/src/plugin/Tpl.tsx

@@ -1,13 +1,25 @@
 import {registerEditorPlugin} from '../manager';
-import {
-  BaseEventContext,
-  BasePlugin} from '../plugin';
+import {BaseEventContext, BasePlugin} from '../plugin';
 import {defaultValue, getSchemaTpl, setSchemaTpl} from '../component/schemaTpl';
+import {tipedLabel} from '../component/control/BaseControl';
 
 setSchemaTpl('tpl:content', {
+  label: tipedLabel(
+    '文字内容',
+    '支持使用 <code>\\${xxx}</code> 来获取变量，或者用 lodash.template 语法来写模板逻辑。<a target="_blank" href="/amis/zh-CN/docs/concepts/template">详情</a>'
+  ),
+  type: 'textarea',
+  minRows: 5,
+  language: 'html',
+  visibleOn: 'data.wrapperComponent !== undefined',
+  pipeIn: (value: any, data: any) => value || (data && data.html),
+  name: 'tpl'
+});
+
+setSchemaTpl('tpl:rich-text', {
   label: '内容',
-  // type: 'textarea',
   type: 'input-rich-text',
+  mode: 'normal',
   buttons: [
     'paragraphFormat',
     'quote',
@@ -32,22 +44,21 @@ setSchemaTpl('tpl:content', {
   ],
   minRows: 5,
   language: 'html',
-  // visibleOn: 'data.__mode !="input-rich-text"',
+  visibleOn: 'data.wrapperComponent === undefined',
   pipeIn: (value: any, data: any) => value || (data && data.html),
-  name: 'tpl',
-  description:
-    '支持使用 <code>\\${xxx}</code> 来获取变量，或者用 lodash.template 语法来写模板逻辑。<a target="_blank" href="/amis/zh-CN/docs/concepts/template">详情</a>'
+  name: 'tpl'
 });
 
 setSchemaTpl('tpl:wrapperComponent', {
   name: 'wrapperComponent',
   type: 'select',
-  pipeIn: defaultValue('div'),
-  label: '格式',
+  pipeIn: (value: any) => (value === undefined ? 'rich-text' : value),
+  pipeOut: (value: any) => (value === 'rich-text' ? undefined : value),
+  label: '文字格式',
   options: [
     {
       label: '普通文字',
-      value: 'div'
+      value: ''
     },
     {
       label: '段落',
@@ -76,24 +87,15 @@ setSchemaTpl('tpl:wrapperComponent', {
     {
       label: '六级标题',
       value: 'h6'
+    },
+    {
+      label: '富文本',
+      value: 'rich-text'
     }
-  ]
-});
-
-setSchemaTpl('tpl:inline', {
-  label: '内联模式',
-  type: 'switch',
-  name: 'inline',
-  mode: 'inline',
-  className: 'w-full',
-  pipeIn: defaultValue(true),
-  labelRemark: {
-    trigger: 'click',
-    className: 'm-l-xs',
-    rootClose: true,
-    content:
-      '内联模式采用 <code>span</code> 标签、非内联将采用 <code>div</code> 标签作为容器。',
-    placement: 'left'
+  ],
+  onChange: (value: string, oldValue: string, model: any, form: any) => {
+    (value === undefined || oldValue === undefined) &&
+      form.setValueByName('tpl', '');
   }
 });
 
@@ -116,41 +118,55 @@ export class TplPlugin extends BasePlugin {
   scaffold: any = {
     type: 'tpl',
     tpl: '请编辑内容',
-    inline: false
+    inline: true,
+    wrapperComponent: ''
   };
 
   panelTitle = '文字';
+  panelJustify = true;
   panelBodyCreator = (context: BaseEventContext) => {
     // 在表格/CRUD/模型列表的一列里边
     const isInTable: boolean = /\/cell\/field\/tpl$/.test(context.path);
 
-    return [
-      getSchemaTpl('tabs', [
-        {
-          title: '常规',
-          body: [
-            getSchemaTpl('tpl:content'),
-            !isInTable ? getSchemaTpl('tpl:wrapperComponent') : null
-          ]
-        },
-        {
-          title: '外观',
-          body: [
-            getSchemaTpl('tpl:inline'),
-            getSchemaTpl('className'),
-            getSchemaTpl('style')
-          ]
-        },
-        {
-          title: '显隐',
-          body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
-        }
-      ])
-    ];
+    return getSchemaTpl('tabs', [
+      {
+        title: '属性',
+        body: getSchemaTpl('collapseGroup', [
+          {
+            title: '基本',
+            body: [
+              !isInTable ? getSchemaTpl('tpl:wrapperComponent') : null,
+              getSchemaTpl('switch', {
+                label: tipedLabel(
+                  '内联模式',
+                  '内联模式默认采用 <code>span</code> 标签包裹内容、非内联将默认采用 <code>div</code> 标签作为容器。'
+                ),
+                name: 'inline',
+                pipeIn: defaultValue(true),
+                hiddenOn:'data.wrapperComponent !== ""'
+              }),
+              getSchemaTpl('tpl:content'),
+              getSchemaTpl('tpl:rich-text')
+            ]
+          },
+          getSchemaTpl('status')
+        ])
+      },
+      {
+        title: '外观',
+        body: getSchemaTpl('collapseGroup', [
+          ...getSchemaTpl('style:common', ['layout']),
+          getSchemaTpl('style:classNames', {
+            isFormItem: false
+          })
+        ])
+      }
+    ]);
   };
 
   popOverBody = [
     getSchemaTpl('tpl:content'),
+    getSchemaTpl('tpl:rich-text'),
     getSchemaTpl('tpl:wrapperComponent')
   ];
 }

package/src/plugin/Video.tsx

@@ -48,30 +48,21 @@ export class VideoPlugin extends BasePlugin {
               '可以写静态值，也可以用变量取比如：<code>\\${videoPoster}</code>'
           },
 
-          {
+          getSchemaTpl('switch', {
             name: 'autoPlay',
-            type: 'switch',
-            mode: 'inline',
-            className: 'block',
             label: '自动播放'
-          },
+          }),
 
-          {
+          getSchemaTpl('switch', {
             name: 'muted',
-            type: 'switch',
-            mode: 'inline',
-            className: 'block',
             label: '静音'
-          },
+          }),
 
-          {
+          getSchemaTpl('switch', {
             name: 'isLive',
-            type: 'switch',
-            mode: 'inline',
-            className: 'block',
             label: '直播流',
             description: '如果是直播流，请勾选，否则有可能不能正常播放。'
-          }
+          })
         ]
       },
       {
@@ -103,13 +94,11 @@ export class VideoPlugin extends BasePlugin {
             ]
           },
 
-          {
+          getSchemaTpl('switch', {
             name: 'splitPoster',
-            type: 'switch',
-            mode: 'inline',
-            className: 'block',
             label: '分开显示封面'
-          },
+          }),
+
           getSchemaTpl('className')
         ]
       },