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

package/lib/plugin/Tpl.js

@@ -0,0 +1,183 @@
+/**
+ * amis-editor v5.2.0-beta.0
+ * Copyright 2018-2022 @fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var AMisCodeEditor = require('amis-editor-core');
+var BaseControl = require('../component/BaseControl.js');
+
+AMisCodeEditor.setSchemaTpl('tpl:content', {
+    label: BaseControl.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: function (value, data) { return value || (data && data.html); },
+    name: 'tpl'
+});
+AMisCodeEditor.setSchemaTpl('tpl:rich-text', {
+    label: '内容',
+    type: 'input-rich-text',
+    mode: 'normal',
+    buttons: [
+        'paragraphFormat',
+        'quote',
+        'color',
+        '|',
+        'bold',
+        'italic',
+        'underline',
+        'strikeThrough',
+        '|',
+        'formatOL',
+        'formatUL',
+        'align',
+        '|',
+        'insertLink',
+        'insertImage',
+        'insertTable',
+        '|',
+        'undo',
+        'redo',
+        'fullscreen'
+    ],
+    minRows: 5,
+    language: 'html',
+    visibleOn: 'data.wrapperComponent === undefined',
+    pipeIn: function (value, data) { return value || (data && data.html); },
+    name: 'tpl'
+});
+AMisCodeEditor.setSchemaTpl('tpl:wrapperComponent', {
+    name: 'wrapperComponent',
+    type: 'select',
+    pipeIn: function (value) { return (value === undefined ? 'rich-text' : value); },
+    pipeOut: function (value) { return (value === 'rich-text' ? undefined : value); },
+    label: '文字格式',
+    options: [
+        {
+            label: '普通文字(内联)',
+            value: 'span'
+        },
+        {
+            label: '普通文字(行级)',
+            value: 'div'
+        },
+        {
+            label: '段落',
+            value: 'p'
+        },
+        {
+            label: '一级标题',
+            value: 'h1'
+        },
+        {
+            label: '二级标题',
+            value: 'h2'
+        },
+        {
+            label: '三级标题',
+            value: 'h3'
+        },
+        {
+            label: '四级标题',
+            value: 'h4'
+        },
+        {
+            label: '五级标题',
+            value: 'h5'
+        },
+        {
+            label: '六级标题',
+            value: 'h6'
+        },
+        {
+            label: '富文本',
+            value: 'rich-text'
+        }
+    ],
+    onChange: function (value, oldValue, model, form) {
+        (!value || !oldValue) && form.setValueByName('tpl', '');
+    }
+});
+var TplPlugin = /** @class */ (function (_super) {
+    tslib.__extends(TplPlugin, _super);
+    function TplPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'tpl';
+        _this.$schema = '/schemas/TplSchema.json';
+        // 组件名称
+        _this.name = '文字';
+        _this.isBaseComponent = true;
+        _this.icon = 'fa fa-file-o';
+        _this.description = '用来展示文字或者段落，支持模板语法可用来关联动态数据。';
+        _this.docLink = '/amis/zh-CN/components/tpl';
+        _this.tags = ['展示'];
+        _this.previewSchema = {
+            type: 'tpl',
+            tpl: '这是模板内容当前时间<%- new Date() %>'
+        };
+        _this.scaffold = {
+            type: 'tpl',
+            tpl: '请编辑内容',
+            inline: false,
+            wrapperComponent: 'span'
+        };
+        _this.panelTitle = '文字';
+        _this.panelJustify = true;
+        _this.panelBodyCreator = function (context) {
+            // 在表格/CRUD/模型列表的一列里边
+            var isInTable = /\/cell\/field\/tpl$/.test(context.path);
+            return AMisCodeEditor.getSchemaTpl('tabs', [
+                {
+                    title: '属性',
+                    body: AMisCodeEditor.getSchemaTpl('collapseGroup', [
+                        {
+                            title: '基本',
+                            body: [
+                                !isInTable ? AMisCodeEditor.getSchemaTpl('tpl:wrapperComponent') : null,
+                                AMisCodeEditor.getSchemaTpl('tpl:content'),
+                                AMisCodeEditor.getSchemaTpl('tpl:rich-text')
+                            ]
+                        },
+                        AMisCodeEditor.getSchemaTpl('status')
+                    ])
+                },
+                {
+                    title: '外观',
+                    body: AMisCodeEditor.getSchemaTpl('collapseGroup', tslib.__spreadArray(tslib.__spreadArray([
+                        {
+                            title: '布局',
+                            body: [
+                                AMisCodeEditor.getSchemaTpl('switch', {
+                                    label: BaseControl.tipedLabel('内联模式', '内联模式采用 <code>span</code> 标签、非内联将采用 <code>div</code> 标签作为容器。'),
+                                    name: 'inline',
+                                    pipeIn: AMisCodeEditor.defaultValue(true)
+                                })
+                            ]
+                        }
+                    ], AMisCodeEditor.getSchemaTpl('style:common', ['layout']), true), [
+                        AMisCodeEditor.getSchemaTpl('style:classNames', {
+                            isFormItem: false
+                        })
+                    ], false))
+                }
+            ]);
+        };
+        _this.popOverBody = [
+            AMisCodeEditor.getSchemaTpl('tpl:content'),
+            AMisCodeEditor.getSchemaTpl('tpl:rich-text'),
+            AMisCodeEditor.getSchemaTpl('tpl:wrapperComponent')
+        ];
+        return _this;
+    }
+    return TplPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(TplPlugin);
+
+exports.TplPlugin = TplPlugin;

package/{dist → lib}/plugin/Video.d.ts

@@ -1,4 +1,4 @@
-import { BasePlugin } from '../plugin';
+import { BasePlugin } from 'amis-editor-core';
 export declare class VideoPlugin extends BasePlugin {
     rendererName: string;
     $schema: string;

package/lib/plugin/Video.js

@@ -0,0 +1,140 @@
+/**
+ * amis-editor v5.2.0-beta.0
+ * Copyright 2018-2022 @fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var AMisCodeEditor = require('amis-editor-core');
+
+var VideoPlugin = /** @class */ (function (_super) {
+    tslib.__extends(VideoPlugin, _super);
+    function VideoPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'video';
+        _this.$schema = '/schemas/VideoSchema.json';
+        // 组件名称
+        _this.name = '视频';
+        _this.isBaseComponent = true;
+        _this.description = '视频控件，可以用来播放各种视频文件，包括 flv 和 hls 格式。';
+        _this.docLink = '/amis/zh-CN/components/video';
+        _this.tags = ['功能'];
+        _this.icon = 'fa fa-video-camera';
+        _this.scaffold = {
+            type: 'video',
+            autoPlay: false,
+            src: 'https://media.w3.org/2010/05/sintel/trailer_hd.mp4',
+            poster: AMisCodeEditor.mockValue({ type: 'image' })
+        };
+        _this.previewSchema = tslib.__assign({}, _this.scaffold);
+        _this.panelTitle = '视频';
+        _this.panelBody = [
+            AMisCodeEditor.getSchemaTpl('tabs', [
+                {
+                    title: '常规',
+                    body: [
+                        {
+                            name: 'src',
+                            type: 'input-text',
+                            label: '视频地址',
+                            description: '可以写静态值，也可以用变量取比如：<code>\\${videoSrc}</code>'
+                        },
+                        {
+                            name: 'poster',
+                            type: 'input-text',
+                            label: '视频封面图片地址',
+                            description: '可以写静态值，也可以用变量取比如：<code>\\${videoPoster}</code>'
+                        },
+                        AMisCodeEditor.getSchemaTpl('switch', {
+                            name: 'autoPlay',
+                            label: '自动播放'
+                        }),
+                        AMisCodeEditor.getSchemaTpl('switch', {
+                            name: 'muted',
+                            label: '静音'
+                        }),
+                        AMisCodeEditor.getSchemaTpl('switch', {
+                            name: 'isLive',
+                            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'
+                                }
+                            ]
+                        },
+                        AMisCodeEditor.getSchemaTpl('switch', {
+                            name: 'splitPoster',
+                            label: '分开显示封面'
+                        }),
+                        AMisCodeEditor.getSchemaTpl('className')
+                    ]
+                },
+                {
+                    title: '显隐',
+                    body: [AMisCodeEditor.getSchemaTpl('visible')]
+                },
+                {
+                    title: '其他',
+                    body: [
+                        AMisCodeEditor.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(function (item) { return ({
+                                label: item,
+                                value: item
+                            }); })
+                        },
+                        {
+                            name: 'frames',
+                            type: 'input-text',
+                            label: '视频帧信息',
+                            description: '比如填写：<code>\\${videoFrames}</code>会在当前作用域中查找 videoFrames 变量，如果是对象，将生成视频截图列表，点击后可跳转到对应的帧。'
+                        }
+                    ]
+                }
+            ])
+        ];
+        return _this;
+    }
+    VideoPlugin.prototype.filterProps = function (props) {
+        props.frames = AMisCodeEditor.JSONPipeOut(props.frames);
+        return props;
+    };
+    return VideoPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(VideoPlugin);
+
+exports.VideoPlugin = VideoPlugin;

package/{dist → lib}/plugin/WebComponent.d.ts

@@ -1,4 +1,4 @@
-import { BasePlugin } from '../plugin';
+import { BasePlugin } from 'amis-editor-core';
 import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter';
 export declare class WebComponentPlugin extends BasePlugin {
     rendererName: string;

package/lib/plugin/WebComponent.js

@@ -0,0 +1,70 @@
+/**
+ * amis-editor v5.2.0-beta.0
+ * Copyright 2018-2022 @fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var AMisCodeEditor = require('amis-editor-core');
+require('@webcomponents/webcomponentsjs/custom-elements-es5-adapter');
+
+// 需要一个示例，不然默认的没有高度都无法选中
+var WebComponentDemo = /** @class */ (function (_super) {
+    tslib.__extends(WebComponentDemo, _super);
+    function WebComponentDemo() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    WebComponentDemo.prototype.connectedCallback = function () {
+        var shadow = this.attachShadow({ mode: 'open' });
+        shadow.textContent = 'web-component-demo';
+    };
+    return WebComponentDemo;
+}(HTMLElement));
+try {
+    customElements.define('web-component-demo', WebComponentDemo);
+}
+catch (error) {
+    console.log('[amis-editor]', error);
+}
+var WebComponentPlugin = /** @class */ (function (_super) {
+    tslib.__extends(WebComponentPlugin, _super);
+    function WebComponentPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'web-component';
+        _this.$schema = '/schemas/WebComponentSchema.json';
+        // 组件名称
+        _this.name = 'Web Component';
+        _this.isBaseComponent = true;
+        _this.description = '用于渲染 Web Component 组件';
+        _this.docLink = '/amis/zh-CN/components/web-component';
+        _this.tags = ['容器'];
+        _this.icon = 'fa fa-square-o';
+        _this.scaffold = {
+            type: 'web-component',
+            tag: 'web-component-demo'
+        };
+        _this.previewSchema = tslib.__assign({}, _this.scaffold);
+        _this.panelTitle = '包裹';
+        _this.panelBody = [
+            {
+                type: 'input-text',
+                label: '标签',
+                name: 'tag'
+            },
+            {
+                type: 'input-kv',
+                label: '属性',
+                name: 'props'
+            }
+        ];
+        return _this;
+    }
+    return WebComponentPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(WebComponentPlugin);
+
+exports.WebComponentPlugin = WebComponentPlugin;

package/{dist → lib}/plugin/Wizard.d.ts

@@ -1,4 +1,5 @@
-import { BaseEventContext, BasePlugin, BasicToolbarItem, VRendererConfig } from '../plugin';
+import { BaseEventContext, BasePlugin, BasicToolbarItem, VRendererConfig } from 'amis-editor-core';
+import { RendererAction, RendererEvent } from 'amis-editor-comp/dist/renderers/event-action';
 export declare class WizardPlugin extends BasePlugin {
     rendererName: string;
     $schema: string;
@@ -31,8 +32,10 @@ export declare class WizardPlugin extends BasePlugin {
             }[];
         }[];
     };
+    events: RendererEvent[];
+    actions: RendererAction[];
     panelTitle: string;
-    panelBody: any[];
+    panelBodyCreator: (context: BaseEventContext) => any[];
     /**
      * 补充切换的 toolbar
      * @param context