amis-editor 5.2.0 → 5.2.1-beta.19

package/esm/plugin/TableCell2.d.ts

@@ -0,0 +1,8 @@
+import { BasePlugin, BasicRendererInfo, RendererInfoResolveEventContext, ReplaceEventContext, PluginEvent, AfterBuildPanelBody } from 'amis-editor-core';
+export declare class TableCell2Plugin extends BasePlugin {
+    panelTitle: string;
+    panelIcon: string;
+    afterBuildPanelBody(event: PluginEvent<AfterBuildPanelBody>): void;
+    getRendererInfo(context: RendererInfoResolveEventContext): BasicRendererInfo | void;
+    beforeReplace(event: PluginEvent<ReplaceEventContext>): void;
+}

package/esm/plugin/TableCell2.js

@@ -0,0 +1,485 @@
+/**
+ * amis-editor v5.2.1-beta.19
+ * Copyright 2018-2022 @fex
+ */
+
+import { __extends, __assign, __spreadArray } from 'tslib';
+import { Button, Icon } from 'amis';
+import React__default from 'react';
+import { getVariable } from 'amis-core';
+import { tipedLabel, getSchemaTpl, defaultValue, BasePlugin, registerEditorPlugin } from 'amis-editor-core';
+import { fromPairs } from 'lodash';
+import { remarkTpl } from '../component/BaseControl.js';
+import { i18n } from 'i18n-runtime';
+
+var TableCell2Plugin = /** @class */function (_super) {
+  __extends(TableCell2Plugin, _super);
+  function TableCell2Plugin() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+    Object.defineProperty(_this, "panelTitle", {
+      enumerable: true,
+      configurable: true,
+      writable: true,
+      value: i18n("dc7558211f2990370954c2e7ca498ee9")
+    });
+    Object.defineProperty(_this, "panelIcon", {
+      enumerable: true,
+      configurable: true,
+      writable: true,
+      value: 'fa fa-columns'
+    });
+    return _this;
+  }
+  Object.defineProperty(TableCell2Plugin.prototype, "afterBuildPanelBody", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (event) {
+      var _this = this;
+      var _a, _b, _c;
+      var _d = event.context,
+        context = _d.context,
+        data = _d.data;
+      if (!((_b = (_a = context.node.parent) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.type) || context.node.parent.parent.type !== 'table2') {
+        return;
+      }
+      // @ts-ignore
+      var base = [context.node.info.plugin.withDataSource === false ? false : {
+        sameName: context.info.renderer.isFormItem ? 'name' : undefined,
+        name: 'name',
+        type: 'ae-DataBindingControl',
+        label: i18n("4ca07911d10b74cc7c357b510e7cc948"),
+        onBindingChange: function (field, onBulkChange) {
+          var _a;
+          var schema = ((_a = field === null || field === void 0 ? void 0 : field.resolveColumnSchema) === null || _a === void 0 ? void 0 : _a.call(field, 'List')) || {
+            title: field.label
+          };
+          onBulkChange(schema);
+        }
+      }, {
+        sameName: context.info.renderer.isFormItem ? 'label' : undefined,
+        name: 'title',
+        label: i18n("eb2719a7e6cebda7ca234560f21fb448"),
+        type: 'input-text'
+      }, remarkTpl({
+        name: 'remark',
+        label: i18n("3ba265c6b63bde0319822afd6b9a649d"),
+        labelRemark: i18n("7ad83bbe4646a0011ece7fd338d1e189")
+      }), {
+        name: 'placeholder',
+        type: 'input-text',
+        label: tipedLabel(i18n("940b12c19fcf7aced0cdd164edc9acbc"), i18n("f35c90b504521a2da346960b9db23828")),
+        value: '-'
+      }].filter(Boolean);
+      var advanced = [getSchemaTpl('switch', {
+        name: 'sorter',
+        label: tipedLabel(i18n("b4521626a48dcb61001fc563d2433ed3"), i18n("ac83dbca40c9d2151b5f7d81795535cc"))
+      }), getSchemaTpl('switch', {
+        name: 'searchable',
+        label: i18n("af9cbd3988196fc104af4fed9461e152"),
+        pipeIn: function (value) {
+          return !!value;
+        }
+      }), {
+        visibleOn: 'data.searchable',
+        name: 'searchable',
+        asFormItem: true,
+        label: false,
+        children: function (_a) {
+          var value = _a.value,
+            onChange = _a.onChange,
+            data = _a.data;
+          if (value === true) {
+            value = {};
+          } else if (typeof value === 'undefined') {
+            value = getVariable(data, 'searchable');
+          }
+          var originMode = value.mode;
+          value = __assign(__assign({}, value), {
+            type: 'form',
+            mode: 'normal',
+            wrapWithPanel: false,
+            body: [{
+              type: 'input-text',
+              name: data.key
+            }]
+          });
+          delete value.mode;
+          // todo 多个快速编辑表单模式看来只能代码模式编辑了。
+          return React__default.createElement(Button, {
+            className: "w-full flex flex-col items-center",
+            onClick: function () {
+              _this.manager.openSubEditor({
+                title: i18n("34dceb7c51000849ea3596fbaab6f67c"),
+                value: value,
+                onChange: function (value) {
+                  return onChange(__assign(__assign({}, value), {
+                    mode: originMode
+                  }), 'searchable');
+                }
+              });
+            }
+          }, React__default.createElement("span", {
+            className: "inline-flex items-center"
+          }, React__default.createElement(Icon, {
+            icon: "edit",
+            className: "mr-1 w-3"
+          }), "\u914D\u7F6E\u5217\u641C\u7D22\u7C7B\u578B"));
+        }
+      }, {
+        name: 'quickEdit',
+        label: tipedLabel(i18n("9a899d9ab83d8ffa6308fb31e93f23a1"), i18n("9306b956ca5950203ee49a2680cac63d")),
+        type: 'ae-switch-more',
+        mode: 'normal',
+        formType: 'extend',
+        bulk: true,
+        defaultData: {
+          mode: 'popOver'
+        },
+        form: {
+          body: [{
+            name: 'quickEdit.mode',
+            type: 'button-group-select',
+            label: i18n("f0789e79d48f135e5d870753f7a85d05"),
+            value: 'popOver',
+            options: [{
+              label: i18n("78f395c15aaf8c92d9223f6ca69b41a4"),
+              value: 'popOver'
+            }, {
+              label: i18n("c6e1b91d329a61b691d0d5d2eb343ddd"),
+              value: 'inline'
+            }]
+          }, getSchemaTpl('switch', {
+            name: 'quickEdit.saveImmediately',
+            label: tipedLabel(i18n("4562be5a3f9823a5f61b25f8d14b2b43"), i18n("c115f372bcdced1e70824bcbf42b5923")),
+            pipeIn: function (value) {
+              return !!value;
+            }
+          }), {
+            name: 'quickEdit',
+            asFormItem: true,
+            label: false,
+            children: function (_a) {
+              var value = _a.value,
+                onBulkChange = _a.onBulkChange,
+                name = _a.name,
+                data = _a.data;
+              if (value === true) {
+                value = {};
+              } else if (typeof value === 'undefined') {
+                value = getVariable(data, 'quickEdit');
+              }
+              var originMode = (value === null || value === void 0 ? void 0 : value.mode) || 'popOver';
+              value = __assign(__assign({}, value), {
+                type: 'form',
+                mode: 'normal',
+                wrapWithPanel: false,
+                body: [{
+                  type: 'input-text',
+                  name: data.key
+                }]
+              });
+              if (value.mode) {
+                delete value.mode;
+              }
+              // todo 多个快速编辑表单模式看来只能代码模式编辑了。
+              return React__default.createElement(Button, {
+                className: "w-full flex flex-col items-center",
+                onClick: function () {
+                  _this.manager.openSubEditor({
+                    title: i18n("c3ed36e4abb96c18a6c83350994cdea7"),
+                    value: value,
+                    onChange: function (value) {
+                      var _a;
+                      return onBulkChange((_a = {}, _a[name] = __assign(__assign({}, value), {
+                        mode: originMode
+                      }), _a));
+                    }
+                  });
+                }
+              }, React__default.createElement("span", {
+                className: "inline-flex items-center"
+              }, React__default.createElement(Icon, {
+                icon: "edit",
+                className: "mr-1 w-3"
+              }), "\u914D\u7F6E\u7F16\u8F91\u8868\u5355"));
+            }
+          }]
+        }
+      }, {
+        name: 'popOver',
+        label: i18n("90ef7c485bd31fab681c6e9d9afd5be8"),
+        type: 'ae-switch-more',
+        mode: 'normal',
+        formType: 'extend',
+        bulk: true,
+        form: {
+          body: [{
+            name: 'popOver.mode',
+            label: i18n("f0789e79d48f135e5d870753f7a85d05"),
+            type: 'button-group-select',
+            pipeIn: defaultValue('popOver'),
+            options: [{
+              label: i18n("71c0319fce9f416330b18e554e0acc55"),
+              value: 'popOver'
+            }, {
+              label: i18n("ab3aec075a09d055b2a28c8b61925ee0"),
+              value: 'dialog'
+            }, {
+              label: i18n("2a2924380dfcaea998bd8a49703545a9"),
+              value: 'drawer'
+            }]
+          }, {
+            name: 'popOver.position',
+            label: i18n("64035b04a21bc337a351b5a2a5d12acb"),
+            type: 'select',
+            visibleOn: 'data.popOver.mode === "popOver"',
+            pipeIn: defaultValue('center'),
+            options: [{
+              label: i18n("68b54e7b408c4fb83561c931aa668eae"),
+              value: 'center'
+            }, {
+              label: i18n("e18459c93769a5afec01e1ce60f9b9fd"),
+              value: 'left-top'
+            }, {
+              label: i18n("1fc3cdd8437f5057774cde2f2c51f97c"),
+              value: 'right-top'
+            }, {
+              label: i18n("63dd9faca92bccfd436ff21a6b4b3151"),
+              value: 'left-bottom'
+            }, {
+              label: i18n("d01c239688b9c8fc145191ee642dc080"),
+              value: 'right-bottom'
+            }, {
+              label: i18n("8fcf9802436282672a8e28ebd6262390"),
+              value: 'fixed-left-top'
+            }, {
+              label: i18n("aed25160b4e8cfc613a743c4549e9222"),
+              value: 'fixed-right-top'
+            }, {
+              label: i18n("d4a4ab1916187e09b9c037705fd49ffa"),
+              value: 'fixed-left-bottom'
+            }, {
+              label: i18n("921fccbb84c829bf8c6f0b9957029f44"),
+              value: 'fixed-right-bottom'
+            }]
+          }, {
+            name: 'popOver',
+            asFormItem: true,
+            label: false,
+            children: function (_a) {
+              var value = _a.value,
+                onBulkChange = _a.onBulkChange,
+                name = _a.name;
+              value = __assign({
+                type: 'panel',
+                title: i18n("5b48dbb8dc710cffe6313bb56a7f6d47"),
+                body: i18n("1d53f83df1d889a70131b7a93c819575")
+              }, value);
+              return React__default.createElement(Button, {
+                className: "w-full flex flex-col items-center",
+                onClick: function () {
+                  _this.manager.openSubEditor({
+                    title: i18n("8dda45360dcf9ca501fd7d0eb53045b5"),
+                    value: value,
+                    onChange: function (value) {
+                      var _a;
+                      return onBulkChange((_a = {}, _a[name] = value, _a));
+                    }
+                  });
+                }
+              }, React__default.createElement("span", {
+                className: "inline-flex items-center"
+              }, React__default.createElement(Icon, {
+                icon: "edit",
+                className: "mr-1 w-3"
+              }), "\u914D\u7F6E\u5185\u5BB9"));
+            }
+          }]
+        }
+      }, {
+        name: 'copyable',
+        label: tipedLabel(i18n("6a086902a84969a835423002718e86b4"), i18n("622e14515c4fd5ca6fe6946e3a1bfb4a")),
+        type: 'ae-switch-more',
+        mode: 'normal',
+        formType: 'extend',
+        bulk: true,
+        defaultData: {},
+        form: {
+          body: [{
+            name: 'copyable.content',
+            type: 'textarea',
+            placehoder: i18n("ca60c525372028b9f75ee4c708cccae1"),
+            label: i18n("ac04259507be8ba6b891dc9dc208f491")
+          }]
+        }
+      }, {
+        name: 'rowSpanExpr',
+        type: 'ae-formulaControl',
+        label: i18n("c9f7324519225bc72fce24a09518a8a8")
+      }, {
+        name: 'colSpanExpr',
+        type: 'ae-formulaControl',
+        label: i18n("9af45e91a08b54764610ada28272d590")
+      }];
+      var baseStyle = [getSchemaTpl('withUnit', {
+        name: 'width',
+        label: tipedLabel(i18n("bdd9d38d7e2929024089363dc8f48b7a"), i18n("b198805e7a6b35830ba813f51db2fdc4")),
+        control: {
+          name: 'width',
+          type: 'input-number'
+        },
+        unit: 'px'
+      }), {
+        name: 'fixed',
+        type: 'button-group-select',
+        label: i18n("65f7e01d58cb5065f49e0e8f48cc16be"),
+        pipeIn: defaultValue(''),
+        pipeOut: function (value) {
+          if (!value) {
+            return undefined;
+          }
+          return value;
+        },
+        options: [{
+          value: '',
+          label: i18n("9ed8a4c5d1b3726121175dc986268b0c")
+        }, {
+          value: 'left',
+          label: i18n("39a2cb79c6d9762783e20522ea86dcff")
+        }, {
+          value: 'right',
+          label: i18n("de2a774bf98944b8f0ec8755d5f59d64")
+        }]
+      }, getSchemaTpl('switch', {
+        name: 'toggled',
+        label: i18n("ad96280bb24a38f9a83051b16ebc9688"),
+        pipeIn: defaultValue(true)
+      }), getSchemaTpl('switch', {
+        name: 'className',
+        label: i18n("eb58b078f2f8560160ebf87bc7109de9"),
+        pipeIn: function (value) {
+          return typeof value === 'string' && /\word\-break\b/.test(value);
+        },
+        pipeOut: function (value, originValue) {
+          return (value ? 'word-break ' : '') + (originValue || '').replace(/\bword\-break\b/g, '').trim();
+        }
+      })];
+      // 之前的面板，不是新的组件面板，需要添加新的tab，不能合并
+      if (Array.isArray(data)) {
+        if (data[0].type === 'tabs') {
+          var body = data[0];
+          body.tabs.forEach(function (tab) {
+            var _a, _b;
+            if (tab.title === i18n("22b777e6fcb613b8ba83ced9594cd07e")) {
+              (_a = tab.body).unshift.apply(_a, base.concat(advanced));
+            }
+            if (tab.title === i18n("afcde2611bdd13c1e65b4fb6a2f13425")) {
+              (_b = tab.body).unshift.apply(_b, baseStyle);
+            }
+          });
+        } else {
+          console.error(i18n("f1f4c88f30744f2365b65f1790c71da8"));
+        }
+        return;
+      }
+      (_c = data.tabs) === null || _c === void 0 ? void 0 : _c.forEach(function (tab) {
+        var _a, _b, _c, _d;
+        if (tab.title === i18n("24d67862f87f439db7ca957aecb77cce")) {
+          tab.body[0].body.forEach(function (collapse) {
+            var _a;
+            if (collapse.title === i18n("4092ed98e9035652d4c9ca9441701ed7")) {
+              var appendItems_1 = fromPairs(base.map(function (item) {
+                var _a;
+                return [(_a = item.sameName) !== null && _a !== void 0 ? _a : item.name, item];
+              }));
+              var removeIndex_1 = [];
+              collapse.body.forEach(function (item, index) {
+                var key = item.name;
+                // 重复意义的配置用现在的表达文案替换一下
+                if (appendItems_1.hasOwnProperty(key)) {
+                  removeIndex_1.push(index);
+                  appendItems_1[key] = __assign(__assign({}, item), appendItems_1[key]);
+                  return;
+                }
+                if (item.name === 'labelRemark') {
+                  removeIndex_1.push(index);
+                }
+              });
+              removeIndex_1.reverse();
+              removeIndex_1.forEach(function (index) {
+                collapse.body.splice(index, 1);
+              });
+              (_a = collapse.body).unshift.apply(_a, Object.values(appendItems_1));
+            }
+          });
+          var moreCollapse = getSchemaTpl('collapseGroup', [{
+            title: i18n("cb2f68c9c24e85d21e6b090b6e5657d8"),
+            body: advanced
+          }]);
+          (_a = tab.body[0].body).splice.apply(_a, __spreadArray([1, 0], moreCollapse.body, false));
+          // 让折叠器默认都展开
+          (_b = tab.body[0].activeKey).push.apply(_b, moreCollapse.activeKey);
+        }
+        if (tab.title === i18n("afcde2611bdd13c1e65b4fb6a2f13425")) {
+          var moreCollapse = getSchemaTpl('collapseGroup', [{
+            title: i18n("cb2f68c9c24e85d21e6b090b6e5657d8"),
+            body: baseStyle
+          }]);
+          (_c = tab.body[0].body).splice.apply(_c, __spreadArray([1, 0], moreCollapse.body, false));
+          // 让折叠器默认都展开
+          (_d = tab.body[0].activeKey).push.apply(_d, moreCollapse.activeKey);
+        }
+      });
+    }
+  });
+  // filterProps(props: any) {
+  //   props = JSONPipeOut(props, true);
+  //   return props;
+  // }
+  Object.defineProperty(TableCell2Plugin.prototype, "getRendererInfo", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (context) {
+      var renderer = context.renderer,
+        schema = context.schema;
+      if (renderer.name === 'cell-field') {
+        return {
+          name: schema.title ? "<".concat(schema.title, ">\u5217") : i18n("044892c0c637f2d9e78e78956b1ded01"),
+          $schema: '/schemas/TableColumn.json',
+          multifactor: true,
+          wrapperResolve: function (dom) {
+            var _a, _b;
+            // 固定这种结构 amis里改了 这里也得改
+            var parent = (_a = dom.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
+            var groupId = parent === null || parent === void 0 ? void 0 : parent.getAttribute('data-group-id');
+            var wrapper = (_b = dom.closest('table').parentElement) === null || _b === void 0 ? void 0 : _b.parentElement;
+            return [].slice.call(wrapper === null || wrapper === void 0 ? void 0 : wrapper.querySelectorAll("th[data-group-id=\"".concat(groupId, "\"],\n              td[data-group-id=\"").concat(groupId, "\"]")));
+          }
+          // filterProps: this.filterProps
+        };
+      }
+    }
+  });
+  /*exchangeRenderer(id: string) {
+    this.manager.showReplacePanel(id, '展示');
+  }*/
+  Object.defineProperty(TableCell2Plugin.prototype, "beforeReplace", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (event) {
+      var context = event.context;
+      // 替换字段的时候保留 label 和 name 值。
+      if (context.info.plugin === this && context.data) {
+        context.data.title = context.data.title || context.schema.title;
+        context.data.key = context.data.key || context.schema.key;
+      }
+    }
+  });
+  return TableCell2Plugin;
+}(BasePlugin);
+registerEditorPlugin(TableCell2Plugin);
+
+export { TableCell2Plugin };

package/esm/plugin/TableView.d.ts

@@ -0,0 +1,135 @@
+/**
+ * @file table view 组件的可视化编辑
+ */
+/// <reference types="react" />
+import { BaseEventContext, BasePlugin, BasicPanelItem, BasicToolbarItem, BuildPanelEventContext, RegionConfig, VRendererConfig } from 'amis-editor-core';
+export declare class TableViewPlugin extends BasePlugin {
+    rendererName: string;
+    $schema: string;
+    name: string;
+    isBaseComponent: boolean;
+    icon: string;
+    pluginIcon: string;
+    description: string;
+    docLink: string;
+    tags: string[];
+    scaffold: {
+        type: string;
+        trs: ({
+            background: string;
+            tds: {
+                body: {
+                    type: string;
+                    tpl: string;
+                };
+            }[];
+        } | {
+            tds: ({
+                rowspan: number;
+                body: {
+                    type: string;
+                    tpl: string;
+                };
+            } | {
+                body: {
+                    type: string;
+                    tpl: string;
+                };
+                rowspan?: undefined;
+            })[];
+            background?: undefined;
+        })[];
+    };
+    previewSchema: {
+        type: string;
+        trs: ({
+            background: string;
+            tds: {
+                body: {
+                    type: string;
+                    tpl: string;
+                };
+            }[];
+        } | {
+            tds: ({
+                rowspan: number;
+                body: {
+                    type: string;
+                    tpl: string;
+                };
+            } | {
+                body: {
+                    type: string;
+                    tpl: string;
+                };
+                rowspan?: undefined;
+            })[];
+            background?: undefined;
+        })[];
+    };
+    regions: Array<RegionConfig>;
+    panelTitle: string;
+    panelBody: any[];
+    fieldWrapperResolve: (dom: HTMLElement) => HTMLElement;
+    overrides: {
+        renderTd(this: any, td: any, colIndex: number, rowIndex: number): any;
+        renderTr(this: any, tr: any, rowIndex: number): any;
+    };
+    tdVRendererConfig: VRendererConfig;
+    trVRendererConfig: VRendererConfig;
+    renderRenderer(props: any): JSX.Element;
+    buildEditorPanel(context: BuildPanelEventContext, panels: Array<BasicPanelItem>): void;
+    /**
+     * 插入行，需要处理前面有 rowspan 的情况
+     *
+     *   +---+---+---+
+     *   | a | b | c |
+     *   +   +---+---+
+     *   |   | d | e |
+     *   +   +---+---+
+     *   |   | f | g |
+     *   +---+---+---+
+     *
+     * 比如在 d 位置的前面插入行，需要将 a 的 rowspan 加一，然后再插入两个单元格
+     */
+    insertRow(tdId: string, position: 'above' | 'below'): void;
+    /**
+     * 插入列
+     *
+     *		+---+---+---+
+     *		| a     | b |
+     *		+       +---+
+     *		|       | c |
+     *		+---+---+---+
+     *		| d | e | f |
+     *		+---+---+---+
+     *
+     * 比如在 c 位置左侧插入列，应该将 a 的 colspan 加一，然后在最后一行增加一个单元格
+     */
+    insertCol(tdId: string, position: 'left' | 'right'): void;
+    /**
+     * 拆分有跨行或跨列的单元格
+     *
+     *		+---+---+---+
+     *		| a     | b |
+     *		+       +---+
+     *		|       | c |
+     *		+---+---+---+
+     *		| d | e | f |
+     *		+---+---+---+
+     *
+     * 比如拆分 a，最后要变成
+     *
+     *		+---+---+---+
+     *		| a | g | b |
+     *		+---+---+---+
+     *		| h | i | c |
+     *		+---+---+---+
+     *		| d | e | f |
+     *		+---+---+---+
+     *
+     * 因此要新增 g、h、i 三个单元格
+     */
+    splitCell(tdId: string): void;
+    buildEditorToolbar({ schema, info }: BaseEventContext, toolbars: Array<BasicToolbarItem>): void;
+}