amis-editor 4.1.0-beta.4 → 4.2.0-beta.3

package/src/plugin/TooltipWrapper.tsx

@@ -0,0 +1,193 @@
+import {registerEditorPlugin} from '../manager';
+import {BasePlugin, RegionConfig, BaseEventContext} from '../plugin';
+import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
+
+export class TooltipWrapperPlugin extends BasePlugin {
+  rendererName = 'tooltip-wrapper';
+  $schema = '/schemas/TooltipWrapperSchema.json';
+
+  isBaseComponent = true;
+  name = '文字提示容器';
+  description =
+    '类似容器，可以将多个渲染器放置在一起，当用户鼠标悬停或者点击容器时，显示文字提示浮层';
+  docLink = '/amis/zh-CN/components/tooltip';
+  tags = ['容器'];
+  icon = 'fa fa-comment-alt';
+
+  scaffold = {
+    type: 'tooltip-wrapper',
+    tooltip: '提示文字',
+    body: [
+      {
+        type: 'tpl',
+        tpl: '内容'
+      }
+    ]
+  };
+
+  previewSchema = {
+    ...this.scaffold,
+    className: 'p-1 mr-3 border-2 border-solid border-indigo-400'
+  };
+
+  regions: Array<RegionConfig> = [
+    {
+      key: 'body',
+      label: '内容区'
+    }
+  ];
+
+  panelTitle = this.name;
+  panelBodyCreator = (context: BaseEventContext) => {
+    return [
+      getSchemaTpl('tabs', [
+        {
+          title: '属性',
+          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标签不合法，请重新输入'
+              },
+              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'
+                },
+
+                {
+                  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)
+            }
+          ]
+        },
+        {
+          title: '外观',
+          body: [
+            getSchemaTpl('className', {
+              label: '内容区CSS类名'
+            }),
+            getSchemaTpl('className', {
+              label: '浮层CSS类名',
+              name: 'tooltipClassName'
+            }),
+            getSchemaTpl('style')
+          ]
+        }
+      ])
+    ];
+  };
+}
+
+registerEditorPlugin(TooltipWrapperPlugin);

package/src/plugin/Tpl.tsx

@@ -0,0 +1,158 @@
+import {registerEditorPlugin} from '../manager';
+import {
+  BaseEventContext,
+  BasePlugin} from '../plugin';
+import {defaultValue, getSchemaTpl, setSchemaTpl} from '../component/schemaTpl';
+
+setSchemaTpl('tpl:content', {
+  label: '内容',
+  // type: 'textarea',
+  type: 'input-rich-text',
+  buttons: [
+    'paragraphFormat',
+    'quote',
+    'color',
+    '|',
+    'bold',
+    'italic',
+    'underline',
+    'strikeThrough',
+    '|',
+    'formatOL',
+    'formatUL',
+    'align',
+    '|',
+    'insertLink',
+    'insertImage',
+    'insertTable',
+    '|',
+    'undo',
+    'redo',
+    'fullscreen'
+  ],
+  minRows: 5,
+  language: 'html',
+  // visibleOn: 'data.__mode !="input-rich-text"',
+  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>'
+});
+
+setSchemaTpl('tpl:wrapperComponent', {
+  name: 'wrapperComponent',
+  type: 'select',
+  pipeIn: defaultValue('div'),
+  label: '格式',
+  options: [
+    {
+      label: '普通文字',
+      value: 'div'
+    },
+    {
+      label: '段落',
+      value: 'p'
+    },
+    {
+      label: '一级标题',
+      value: 'h1'
+    },
+    {
+      label: '二级标题',
+      value: 'h2'
+    },
+    {
+      label: '三级标题',
+      value: 'h3'
+    },
+    {
+      label: '四级标题',
+      value: 'h4'
+    },
+    {
+      label: '五级标题',
+      value: 'h5'
+    },
+    {
+      label: '六级标题',
+      value: 'h6'
+    }
+  ]
+});
+
+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'
+  }
+});
+
+export class TplPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'tpl';
+  $schema = '/schemas/TplSchema.json';
+
+  // 组件名称
+  name = '文字';
+  isBaseComponent = true;
+  icon = 'fa fa-file-o';
+  description = '用来展示文字或者段落，支持模板语法可用来关联动态数据。';
+  docLink = '/amis/zh-CN/components/tpl';
+  tags = ['展示'];
+  previewSchema = {
+    type: 'tpl',
+    tpl: '这是模板内容当前时间<%- new Date() %>'
+  };
+  scaffold: any = {
+    type: 'tpl',
+    tpl: '请编辑内容',
+    inline: false
+  };
+
+  panelTitle = '文字';
+  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')]
+        }
+      ])
+    ];
+  };
+
+  popOverBody = [
+    getSchemaTpl('tpl:content'),
+    getSchemaTpl('tpl:wrapperComponent')
+  ];
+}
+
+registerEditorPlugin(TplPlugin);

package/src/plugin/Video.tsx

@@ -0,0 +1,158 @@
+import {registerEditorPlugin} from '../manager';
+import {BasePlugin} from '../plugin';
+import {getSchemaTpl} from '../component/schemaTpl';
+import {JSONPipeOut} from '../util';
+import {mockValue} from '../mocker';
+
+export class VideoPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'video';
+  $schema = '/schemas/VideoSchema.json';
+
+  // 组件名称
+  name = '视频';
+  isBaseComponent = true;
+  description = '视频控件，可以用来播放各种视频文件，包括 flv 和 hls 格式。';
+  docLink = '/amis/zh-CN/components/video';
+  tags = ['功能'];
+  icon = 'fa fa-video-camera';
+  scaffold = {
+    type: 'video',
+    autoPlay: false,
+    src: 'https://media.w3.org/2010/05/sintel/trailer_hd.mp4',
+    poster: mockValue({type: 'image'})
+  };
+  previewSchema = {
+    ...this.scaffold
+  };
+
+  panelTitle = '视频';
+  panelBody = [
+    getSchemaTpl('tabs', [
+      {
+        title: '常规',
+        body: [
+          {
+            name: 'src',
+            type: 'input-text',
+            label: '视频地址',
+            description:
+              '可以写静态值，也可以用变量取比如：<code>\\${videoSrc}</code>'
+          },
+
+          {
+            name: 'poster',
+            type: 'input-text',
+            label: '视频封面图片地址',
+            description:
+              '可以写静态值，也可以用变量取比如：<code>\\${videoPoster}</code>'
+          },
+
+          {
+            name: 'autoPlay',
+            type: 'switch',
+            mode: 'inline',
+            className: 'block',
+            label: '自动播放'
+          },
+
+          {
+            name: 'muted',
+            type: 'switch',
+            mode: 'inline',
+            className: 'block',
+            label: '静音'
+          },
+
+          {
+            name: 'isLive',
+            type: 'switch',
+            mode: 'inline',
+            className: 'block',
+            label: '直播流',
+            description: '如果是直播流，请勾选，否则有可能不能正常播放。'
+          }
+        ]
+      },
+      {
+        title: '外观',
+        body: [
+          {
+            name: 'aspectRatio',
+            label: '视频比例',
+            type: 'button-group-select',
+            size: 'sm',
+            mode: 'inline',
+            className: 'block',
+            value: 'auto',
+            options: [
+              {
+                label: '自动',
+                value: 'auto'
+              },
+
+              {
+                label: '4:3',
+                value: '4:3'
+              },
+
+              {
+                label: '16:9',
+                value: '16:9'
+              }
+            ]
+          },
+
+          {
+            name: 'splitPoster',
+            type: 'switch',
+            mode: 'inline',
+            className: 'block',
+            label: '分开显示封面'
+          },
+          getSchemaTpl('className')
+        ]
+      },
+      {
+        title: '显隐',
+        body: [getSchemaTpl('visible')]
+      },
+      {
+        title: '其他',
+        body: [
+          getSchemaTpl('ref'),
+          {
+            type: 'input-text',
+            name: 'rates',
+            label: '视频速率',
+            multiple: true,
+            joinValues: false,
+            extractValue: true,
+            options: [0.5, 1, 1.25, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5].map(
+              item => ({
+                label: item,
+                value: item
+              })
+            )
+          },
+
+          {
+            name: 'frames',
+            type: 'input-text',
+            label: '视频帧信息',
+            description:
+              '比如填写：<code>\\${videoFrames}</code>会在当前作用域中查找 videoFrames 变量，如果是对象，将生成视频截图列表，点击后可跳转到对应的帧。'
+          }
+        ]
+      }
+    ])
+  ];
+
+  filterProps(props: any) {
+    props.frames = JSONPipeOut(props.frames);
+
+    return props;
+  }
+}
+
+registerEditorPlugin(VideoPlugin);

package/src/plugin/WebComponent.tsx

@@ -0,0 +1,53 @@
+import {registerEditorPlugin} from '../manager';
+import {BasePlugin} from '../plugin';
+import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter';
+
+// 需要一个示例，不然默认的没有高度都无法选中
+class WebComponentDemo extends HTMLElement {
+  connectedCallback() {
+    const shadow = this.attachShadow({mode: 'open'});
+    shadow.textContent = 'web-component-demo';
+  }
+}
+try {
+  customElements.define('web-component-demo', WebComponentDemo);
+} catch (error: any) {
+  console.log('[amis-editor]', error);
+}
+
+export class WebComponentPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'web-component';
+  $schema = '/schemas/WebComponentSchema.json';
+
+  // 组件名称
+  name = 'Web Component';
+  isBaseComponent = true;
+  description = '用于渲染 Web Component 组件';
+  docLink = '/amis/zh-CN/components/web-component';
+  tags = ['容器'];
+  icon = 'fa fa-square-o';
+  scaffold = {
+    type: 'web-component',
+    tag: 'web-component-demo'
+  };
+  previewSchema = {
+    ...this.scaffold
+  };
+
+  panelTitle = '包裹';
+  panelBody = [
+    {
+      type: 'input-text',
+      label: '标签',
+      name: 'tag'
+    },
+    {
+      type: 'input-kv',
+      label: '属性',
+      name: 'props'
+    }
+  ];
+}
+
+registerEditorPlugin(WebComponentPlugin);