amis-editor 5.2.0-beta.1 → 5.2.0-beta.2

package/esm/plugin/Cards.js

@@ -0,0 +1,271 @@
+/**
+ * amis-editor v5.2.0-beta.2
+ * Copyright 2018-2022 @fex
+ */
+
+import { __extends, __assign, __rest } from 'tslib';
+import { Button, resolveVariable } from 'amis';
+import React__default from 'react';
+import { getSchemaTpl, defaultValue, diff, repeatArray, JSONPipeOut, BasePlugin, registerEditorPlugin } from 'amis-editor-core';
+import { i18n } from 'i18n-runtime';
+
+var CardsPlugin =
+/** @class */
+function (_super) {
+  __extends(CardsPlugin, _super);
+
+  function CardsPlugin() {
+    var _this = _super !== null && _super.apply(this, arguments) || this; // 关联渲染器名字
+
+
+    _this.rendererName = 'cards';
+    _this.$schema = '/schemas/CardsSchema.json'; // 组件名称
+
+    _this.name = i18n("093c340f7e1fbde1928ca56b5c7f9cc4");
+    _this.isBaseComponent = true;
+    _this.description = i18n("85c17b016309a3f867a1803049b3bcd8");
+    _this.docLink = '/amis/zh-CN/components/cards';
+    _this.tags = [i18n("027446c2f9070b0f5b16a18208bf5fc7")];
+    _this.icon = 'fa fa-window-maximize';
+    _this.pluginIcon = 'cards-plugin';
+    _this.scaffold = {
+      type: 'cards',
+      data: {
+        items: [{
+          a: 1,
+          b: 2
+        }, {
+          a: 3,
+          b: 4
+        }]
+      },
+      columnsCount: 2,
+      card: {
+        type: 'card',
+        className: 'm-b-none',
+        header: {
+          title: i18n("32c65d8d7431e76029678ec7bb73a5ab"),
+          subTitle: i18n("72cf373be86a38b29f6d2f15900b0da1")
+        },
+        body: [{
+          name: 'a',
+          label: 'A'
+        }, {
+          name: 'b',
+          label: 'B'
+        }],
+        actions: [{
+          label: i18n("f26225bde6a250894a04db4c53ea03d0"),
+          type: 'button'
+        }]
+      }
+    };
+    _this.previewSchema = __assign(__assign({}, _this.scaffold), {
+      className: 'text-left '
+    });
+    _this.panelTitle = i18n("6223c41373004e3111e768225450b4e8");
+
+    _this.panelBodyCreator = function (context) {
+      var isCRUDBody = context.schema.type === 'crud';
+      return [getSchemaTpl('tabs', [{
+        title: i18n("22b777e6fcb613b8ba83ced9594cd07e"),
+        body: [{
+          children: React__default.createElement("div", {
+            className: "m-b"
+          }, React__default.createElement(Button, {
+            level: "success",
+            size: "sm",
+            block: true,
+            onClick: _this.editDetail.bind(_this, context.id)
+          }, "\u914D\u7F6E\u5355\u9879\u4FE1\u606F"))
+        }, {
+          type: 'divider'
+        }, {
+          name: 'title',
+          type: 'input-text',
+          label: i18n("32c65d8d7431e76029678ec7bb73a5ab")
+        }, {
+          name: 'href',
+          type: 'input-text',
+          label: i18n("a3f38735bf211edb2066ac4e51b55cb2")
+        }, isCRUDBody ? null : {
+          name: 'source',
+          type: 'input-text',
+          label: i18n("c11322c9cc43ce3c004cf03f5ac0acd0"),
+          pipeIn: defaultValue('${items}'),
+          description: i18n("7ea26d0cb93e59339daf6a1ac68624f3"),
+          test: !isCRUDBody
+        }, {
+          name: 'placeholder',
+          value: i18n("21efd88b67a39834582ad99aabb9dc60"),
+          type: 'input-text',
+          label: i18n("35ba83e053cef95e55dfffde279822b5")
+        }]
+      }, {
+        title: i18n("afcde2611bdd13c1e65b4fb6a2f13425"),
+        body: [getSchemaTpl('switch', {
+          name: 'showHeader',
+          label: i18n("e18d033cc4baab3ebb329f6b29eb3cef"),
+          pipeIn: defaultValue(true)
+        }), getSchemaTpl('switch', {
+          name: 'showFooter',
+          label: i18n("412593f58b9d062a43cbe2ce38f4dc65"),
+          pipeIn: defaultValue(true)
+        }), getSchemaTpl('className', {
+          label: i18n("4434b33a8731a73613ba5fa1eb984efb")
+        }), getSchemaTpl('className', {
+          name: 'headerClassName',
+          label: i18n("e494f1aa112068688ca863db7f39a0b5")
+        }), getSchemaTpl('className', {
+          name: 'footerClassName',
+          label: i18n("d267231d2d8b60e267acc7d7d9955ae2")
+        }), getSchemaTpl('className', {
+          name: 'itemsClassName',
+          label: i18n("af1af0a7fad9e8bdcd21694d0e036e12")
+        }), getSchemaTpl('className', {
+          pipeIn: defaultValue('Grid-col--sm6 Grid-col--md4 Grid-col--lg3'),
+          name: 'itemClassName',
+          label: i18n("b2d2593bfb7a627817c0bd1ef6a254a8")
+        }), {
+          name: 'columnsCount',
+          type: 'input-range',
+          visibleOn: '!this.leftFixed',
+          min: 0,
+          max: 12,
+          step: 1,
+          label: i18n("58e78d512d9ff40c73a263ab616cc652"),
+          description: i18n("3cf0da9fe51f92842e0a6d375fa5c605")
+        }, getSchemaTpl('switch', {
+          name: 'masonryLayout',
+          label: i18n("953e91f3df59837ac2965cc04dec4b0d")
+        })]
+      }, {
+        title: i18n("33bf801796fd255b5f6147e33146669b"),
+        body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
+      }])];
+    };
+
+    return _this;
+  }
+
+  CardsPlugin.prototype.editDetail = function (id) {
+    var manager = this.manager;
+    var store = manager.store;
+    var node = store.getNodeById(id);
+    var value = store.getValueOf(id);
+    node && value && this.manager.openSubEditor({
+      title: i18n("39a6853b109ae98f1aabca90283d7edc"),
+      value: __assign({
+        type: 'card'
+      }, value.card),
+      slot: {
+        type: 'container',
+        body: '$$'
+      },
+      typeMutable: false,
+      onChange: function (newValue) {
+        newValue = __assign(__assign({}, value), {
+          card: newValue
+        });
+        manager.panelChangeValue(newValue, diff(value, newValue));
+      },
+      data: {
+        item: 'mocked data',
+        index: 0
+      }
+    });
+  };
+
+  CardsPlugin.prototype.buildEditorToolbar = function (_a, toolbars) {
+    var id = _a.id,
+        info = _a.info,
+        schema = _a.schema;
+
+    if (info.renderer.name === 'cards' || info.renderer.name === 'crud' && schema.mode === 'cards') {
+      toolbars.push({
+        icon: 'fa fa-expand',
+        order: 100,
+        tooltip: i18n("39a6853b109ae98f1aabca90283d7edc"),
+        onClick: this.editDetail.bind(this, id)
+      });
+    }
+  };
+
+  CardsPlugin.prototype.buildEditorContextMenu = function (_a, menus) {
+    var id = _a.id,
+        schema = _a.schema;
+        _a.region;
+        var info = _a.info,
+        selections = _a.selections;
+
+    if (selections.length || (info === null || info === void 0 ? void 0 : info.plugin) !== this) {
+      return;
+    }
+
+    if (info.renderer.name === 'cards' || info.renderer.name === 'crud' && schema.mode === 'cards') {
+      menus.push('|', {
+        label: i18n("39a6853b109ae98f1aabca90283d7edc"),
+        onSelect: this.editDetail.bind(this, id)
+      });
+    }
+  };
+
+  CardsPlugin.prototype.filterProps = function (props) {
+    var data = __assign(__assign({}, props.defaultData), props.data);
+
+    var arr = Array.isArray(props.value) ? props.value : typeof props.source === 'string' ? resolveVariable(props.source, data) : resolveVariable('items', data);
+
+    if (!Array.isArray(arr) || !arr.length) {
+      var mockedData = {
+        id: 666,
+        title: i18n("6cb01692eea2fa7066d20fe2b6ccaea3"),
+        description: i18n("6cb01692eea2fa7066d20fe2b6ccaea3"),
+        a: i18n("6cb01692eea2fa7066d20fe2b6ccaea3"),
+        b: i18n("6cb01692eea2fa7066d20fe2b6ccaea3")
+      };
+      props.value = repeatArray(mockedData, 1).map(function (item, index) {
+        return __assign(__assign({}, item), {
+          id: index + 1
+        });
+      });
+    }
+
+    var $schema = props.$schema,
+        rest = __rest(props, ["$schema"]);
+
+    return __assign(__assign({}, JSONPipeOut(rest)), {
+      $schema: $schema
+    });
+  };
+
+  CardsPlugin.prototype.getRendererInfo = function (context) {
+    var _a;
+
+    var plugin = this;
+    var renderer = context.renderer,
+        schema = context.schema;
+
+    if (!schema.$$id && ((_a = schema.$$editor) === null || _a === void 0 ? void 0 : _a.renderer.name) === 'crud' && renderer.name === 'cards') {
+      return __assign(__assign({}, {
+        id: schema.$$editor.id
+      }), {
+        name: plugin.name,
+        regions: plugin.regions,
+        patchContainers: plugin.patchContainers,
+        vRendererConfig: plugin.vRendererConfig,
+        wrapperProps: plugin.wrapperProps,
+        wrapperResolve: plugin.wrapperResolve,
+        filterProps: plugin.filterProps,
+        $schema: plugin.$schema,
+        renderRenderer: plugin.renderRenderer
+      });
+    }
+
+    return _super.prototype.getRendererInfo.call(this, context);
+  };
+
+  return CardsPlugin;
+}(BasePlugin);
+registerEditorPlugin(CardsPlugin);
+
+export { CardsPlugin };

package/esm/plugin/Carousel.d.ts

@@ -0,0 +1,41 @@
+import { BaseEventContext, BasePlugin, BasicToolbarItem } from 'amis-editor-core';
+export declare class CarouselPlugin extends BasePlugin {
+    rendererName: string;
+    $schema: string;
+    name: string;
+    isBaseComponent: boolean;
+    description: string;
+    docLink: string;
+    tags: string[];
+    icon: string;
+    pluginIcon: string;
+    scaffold: {
+        type: string;
+        options: ({
+            image: string | string[];
+            html?: undefined;
+        } | {
+            html: string;
+            image?: undefined;
+        })[];
+    };
+    previewSchema: {
+        type: string;
+        options: ({
+            image: string | string[];
+            html?: undefined;
+        } | {
+            html: string;
+            image?: undefined;
+        })[];
+    };
+    panelTitle: string;
+    panelBodyCreator: (context: BaseEventContext) => any[];
+    filterProps(props: any): any;
+    /**
+     * 补充切换的 toolbar
+     * @param context
+     * @param toolbars
+     */
+    buildEditorToolbar(context: BaseEventContext, toolbars: Array<BasicToolbarItem>): void;
+}

package/esm/plugin/Carousel.js

@@ -0,0 +1,314 @@
+/**
+ * amis-editor v5.2.0-beta.2
+ * Copyright 2018-2022 @fex
+ */
+
+import { __extends, __assign } from 'tslib';
+import { mockValue, getSchemaTpl, defaultValue, BasePlugin, registerEditorPlugin } from 'amis-editor-core';
+import { i18n } from 'i18n-runtime';
+
+var CarouselPlugin =
+/** @class */
+function (_super) {
+  __extends(CarouselPlugin, _super);
+
+  function CarouselPlugin() {
+    var _this = _super !== null && _super.apply(this, arguments) || this; // 关联渲染器名字
+
+
+    _this.rendererName = 'carousel';
+    _this.$schema = '/schemas/CarouselSchema.json'; // 组件名称
+
+    _this.name = i18n("0c0180cb06a322199a67f10d4ec41cd5");
+    _this.isBaseComponent = true;
+    _this.description = i18n("1007c97dbf952e032ce13be3cb811f23");
+    _this.docLink = '/amis/zh-CN/components/carousel';
+    _this.tags = [i18n("027446c2f9070b0f5b16a18208bf5fc7")];
+    _this.icon = 'fa fa-images';
+    _this.pluginIcon = 'carousel-plugin';
+    _this.scaffold = {
+      type: 'carousel',
+      options: [{
+        image: mockValue({
+          type: 'image'
+        })
+      }, {
+        html: '<div style="width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;">carousel data</div>'
+      }, {
+        image: mockValue({
+          type: 'image'
+        })
+      }]
+    };
+    _this.previewSchema = __assign({}, _this.scaffold);
+    _this.panelTitle = i18n("0c0180cb06a322199a67f10d4ec41cd5");
+
+    _this.panelBodyCreator = function (context) {
+      var isUnderField = /\/field\/\w+$/.test(context.path);
+      return [getSchemaTpl('tabs', [{
+        title: i18n("22b777e6fcb613b8ba83ced9594cd07e"),
+        body: [isUnderField ? {
+          type: 'tpl',
+          inline: false,
+          className: 'text-info text-sm',
+          tpl: i18n("37b12f2666b9e4e37f33eb5e83533d5e")
+        } : null, {
+          type: 'formula',
+          name: '__mode',
+          autoSet: false,
+          formula: '!this.name && !this.source && Array.isArray(this.options) ? 2 : 1'
+        }, {
+          label: i18n("c11322c9cc43ce3c004cf03f5ac0acd0"),
+          name: '__mode',
+          type: 'button-group-select',
+          size: 'xs',
+          mode: 'inline',
+          className: 'w-full',
+          options: [{
+            label: i18n("0a2907a421b8f980986117e4f3044f92"),
+            value: 1
+          }, {
+            label: i18n("e760ec18028fc075c5705bf184589e70"),
+            value: 2
+          }]
+        }, {
+          label: i18n("d314558953b3c76adb7e131aaec8bd86"),
+          name: 'name',
+          type: 'input-text',
+          description: i18n("793a763e73f1f742e3a16ddc2ed95ccb"),
+          visibleOn: 'this.__mode == 1'
+        }, {
+          type: 'combo',
+          name: 'options',
+          visibleOn: 'this.__mode == 2',
+          label: i18n("b9994cc749b4cfbbac0a9b140addd242"),
+          multiple: true,
+          multiLine: true,
+          addable: true,
+          removable: true,
+          typeSwitchable: false,
+          conditions: [{
+            label: i18n("20def7942674282277c3714ed7ea6ce0"),
+            test: 'this.type === "image"',
+            items: [getSchemaTpl('imageUrl', {
+              name: 'content'
+            }), {
+              type: 'input-text',
+              label: i18n("c6c7456d446d62a906c2809b6ba19ce1"),
+              name: 'title',
+              visibleOn: 'this.type == "image"'
+            }, getSchemaTpl('className', {
+              label: i18n("ab8a46ccf46acbf82d020d11468291b1"),
+              name: 'titleClassName',
+              visibleOn: 'this.type == "image"'
+            }), {
+              type: 'textarea',
+              label: i18n("098c3d959911b48b4d912cb85ccc4942"),
+              name: 'description',
+              visibleOn: 'this.type == "image"'
+            }, getSchemaTpl('className', {
+              label: i18n("c6fc4066471664a8602c636cfe1cc766"),
+              name: 'descriptionClassName',
+              visibleOn: 'this.type == "image"'
+            }), {
+              type: 'input-text',
+              label: i18n("a3f38735bf211edb2066ac4e51b55cb2"),
+              name: 'href',
+              visibleOn: 'this.type == "image"'
+            }],
+            scaffold: {
+              type: 'input-image',
+              image: ''
+            }
+          }, {
+            label: 'HTML',
+            test: 'this.type === "html"',
+            items: [getSchemaTpl('richText', {
+              label: i18n("2d711b09bd0db0ad240cc83b30dd8014"),
+              name: 'content'
+            })],
+            scaffold: {
+              type: 'html',
+              content: i18n("cfb6f6e4c92a61ed0e0717abc8d0eec7")
+            }
+          }],
+          pipeIn: function (value) {
+            return Array.isArray(value) && value.length ? value.map(function (item) {
+              return item && item.hasOwnProperty('html') ? {
+                type: 'html',
+                content: item.html
+              } : {
+                type: 'image',
+                content: item.image,
+                title: item.title,
+                titleClassName: item.titleClassName,
+                description: item.description,
+                descriptionClassName: item.descriptionClassName
+              };
+            }) : [];
+          },
+          pipeOut: function (value, originValue, data) {
+            return Array.isArray(value) && value.length ? value.map(function (item) {
+              return item.type === 'html' ? {
+                html: item.content
+              } : {
+                image: item.content,
+                title: item.title,
+                titleClassName: item.titleClassName,
+                description: item.description,
+                descriptionClassName: item.descriptionClassName
+              };
+            }) : [];
+          }
+        }]
+      }, {
+        title: i18n("afcde2611bdd13c1e65b4fb6a2f13425"),
+        body: [{
+          name: 'auto',
+          type: 'switch',
+          mode: 'inline',
+          className: 'w-full',
+          label: i18n("97cc997910b99083bd23c6ac39294ff3"),
+          pipeIn: defaultValue(true)
+        }, {
+          name: 'interval',
+          type: 'input-range',
+          label: i18n("8c2a12c5dee794b8b9608bc1f8087947"),
+          min: 1,
+          max: 100,
+          step: 1,
+          unit: 's',
+          pipeIn: function (value) {
+            return (value !== null && value !== void 0 ? value : 3000) / 1000;
+          },
+          pipeOut: function (value, originValue, data) {
+            return value * 1000;
+          }
+        }, {
+          name: 'duration',
+          type: 'input-range',
+          label: i18n("6265104f900789dd51d75b449c3b9f89"),
+          min: 100,
+          max: 2000,
+          step: 10,
+          pipeIn: defaultValue(500),
+          unit: 'ms'
+        }, {
+          name: 'animation',
+          label: i18n("5bc37c57ee54d407f441b222f02391db"),
+          type: 'button-group-select',
+          mode: 'inline',
+          className: 'w-full',
+          size: 'sm',
+          pipeIn: defaultValue('fade'),
+          options: [{
+            label: 'fade',
+            value: 'fade'
+          }, {
+            label: 'slide',
+            value: 'slide'
+          }]
+        }, {
+          name: 'controlsTheme',
+          label: i18n("8a0d716ded7baa7ee356ff39c3cf0bec"),
+          type: 'button-group-select',
+          size: 'sm',
+          pipeIn: defaultValue('light'),
+          mode: 'inline',
+          className: 'w-full',
+          options: [{
+            label: 'light',
+            value: 'light'
+          }, {
+            label: 'dark',
+            value: 'dark'
+          }]
+        }, {
+          name: 'controls',
+          label: i18n("f7471313dce32bc3669d338764a0d036"),
+          type: 'button-group-select',
+          size: 'sm',
+          mode: 'inline',
+          className: 'w-full',
+          pipeIn: defaultValue('dots,arrows'),
+          multiple: true,
+          options: [{
+            label: i18n("1c0fe943329339003e9e3c1b12a27fe3"),
+            value: 'dots'
+          }, {
+            label: i18n("e030190fd1c10b0c967f48e789fa86b1"),
+            value: 'arrows'
+          }]
+        }, {
+          name: 'width',
+          type: 'input-text',
+          label: i18n("c28479019e24e0e4745f4948e9e97ee7"),
+          validations: 'isNumeric',
+          addOn: {
+            type: 'button',
+            label: 'px'
+          }
+        }, {
+          name: 'height',
+          type: 'input-text',
+          label: i18n("c1df04eec5fa0857bc0df2d68d8e953c"),
+          validations: 'isNumeric',
+          addOn: {
+            type: 'button',
+            label: 'px'
+          }
+        }, getSchemaTpl('className')]
+      }, {
+        title: i18n("33bf801796fd255b5f6147e33146669b"),
+        body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
+      }])];
+    };
+
+    return _this;
+  }
+
+  CarouselPlugin.prototype.filterProps = function (props) {
+    // 编辑的时候别自动轮播，影响编辑
+    props.auto = false;
+    return props;
+  };
+  /**
+   * 补充切换的 toolbar
+   * @param context
+   * @param toolbars
+   */
+
+
+  CarouselPlugin.prototype.buildEditorToolbar = function (context, toolbars) {
+    if (context.info.plugin === this && context.info.renderer.name === 'carousel' && !context.info.hostId) {
+      var node_1 = context.node;
+      toolbars.push({
+        level: 'secondary',
+        icon: 'fa fa-chevron-left',
+        tooltip: i18n("ad5a36ee5f4054594c30b6dc481e2d81"),
+        onClick: function () {
+          var _a;
+
+          var control = node_1.getComponent();
+          (_a = control === null || control === void 0 ? void 0 : control.prev) === null || _a === void 0 ? void 0 : _a.call(control);
+        }
+      });
+      toolbars.push({
+        level: 'secondary',
+        icon: 'fa fa-chevron-right',
+        tooltip: i18n("49e0f68798e3c69b7990076bd8f1f47f"),
+        onClick: function () {
+          var _a;
+
+          var control = node_1.getComponent();
+          (_a = control === null || control === void 0 ? void 0 : control.next) === null || _a === void 0 ? void 0 : _a.call(control);
+        }
+      });
+    }
+  };
+
+  return CarouselPlugin;
+}(BasePlugin);
+registerEditorPlugin(CarouselPlugin);
+
+export { CarouselPlugin };

package/esm/plugin/Chart.d.ts

@@ -0,0 +1,50 @@
+import { BaseEventContext, BasePlugin, RendererPluginAction } from 'amis-editor-core';
+export declare class ChartPlugin extends BasePlugin {
+    rendererName: string;
+    $schema: string;
+    name: string;
+    isBaseComponent: boolean;
+    description: string;
+    docLink: string;
+    tags: string[];
+    icon: string;
+    pluginIcon: string;
+    scaffold: {
+        type: string;
+        config: {
+            xAxis: {
+                type: string;
+                data: string[];
+            };
+            yAxis: {
+                type: string;
+            };
+            series: {
+                data: number[];
+                type: string;
+            }[];
+        };
+        replaceChartOption: boolean;
+    };
+    previewSchema: {
+        type: string;
+        config: {
+            xAxis: {
+                type: string;
+                data: string[];
+            };
+            yAxis: {
+                type: string;
+            };
+            series: {
+                data: number[];
+                type: string;
+            }[];
+        };
+        replaceChartOption: boolean;
+    };
+    actions: RendererPluginAction[];
+    panelTitle: string;
+    panelBodyCreator: (context: BaseEventContext) => any[];
+    editDrillDown(id: string): void;
+}