amis-editor 4.2.0-beta.0 → 5.2.0-beta.0

package/src/plugin/TooltipWrapper.tsx

@@ -1,193 +0,0 @@
-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

@@ -1,158 +0,0 @@
-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

@@ -1,158 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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);