amis-editor 5.5.0 → 5.6.1

package/esm/plugin/Cards.js

@@ -1,13 +1,14 @@
 /**
- * amis-editor v5.5.0
+ * amis-editor v5.5.2-beta.2
+ * build time: 2023-09-28
  * Copyright 2018-2023 @fex
  */
 
-import { __extends, __assign, __rest } from 'tslib';
-import { Button } from 'amis';
-import React__default from 'react';
-import { getSchemaTpl, defaultValue, diff, repeatArray, JSONPipeOut, BasePlugin, registerEditorPlugin } from 'amis-editor-core';
-import { resolveArrayDatasource } from '../util.js';
+import { __extends, __assign, __spreadArray, __read } from 'tslib';
+import { isObject } from 'amis';
+import { getSchemaTpl, repeatArray, BasePlugin, registerEditorPlugin } from 'amis-editor-core';
+import set from 'lodash/set';
+import { escapeFormula } from '../util.js';
 import { i18n } from 'i18n-runtime';
 
 var CardsPlugin = /** @class */function (_super) {
@@ -20,6 +21,8 @@ var CardsPlugin = /** @class */function (_super) {
     // 组件名称
     _this.name = i18n("093c340f7e1fbde1928ca56b5c7f9cc4");
     _this.isBaseComponent = true;
+    _this.isListComponent = true;
+    _this.memberImmutable = true;
     _this.description = i18n("85c17b016309a3f867a1803049b3bcd8");
     _this.docLink = '/amis/zh-CN/components/cards';
     _this.tags = [i18n("027446c2f9070b0f5b16a18208bf5fc7")];
@@ -27,200 +30,389 @@ var CardsPlugin = /** @class */function (_super) {
     _this.pluginIcon = 'cards-plugin';
     _this.scaffold = {
       type: 'cards',
-      data: {
-        items: [{
-          a: 1,
-          b: 2
-        }, {
-          a: 3,
-          b: 4
-        }]
-      },
-      columnsCount: 2,
+      columnsCount: 4,
       card: {
-        type: 'card',
-        className: 'm-b-none',
-        header: {
-          title: i18n("32c65d8d7431e76029678ec7bb73a5ab"),
-          subTitle: i18n("72cf373be86a38b29f6d2f15900b0da1")
-        },
+        type: 'container',
         body: [{
-          name: 'a',
-          label: 'A'
+          type: 'container',
+          body: [{
+            type: 'icon',
+            icon: 'fa fa-check',
+            vendor: '',
+            themeCss: {
+              className: {
+                'font': {
+                  color: 'var(--colors-brand-6)',
+                  fontSize: '20px'
+                },
+                'padding-and-margin:default': {
+                  marginRight: '10px'
+                }
+              }
+            }
+          }, {
+            type: 'tpl',
+            tpl: i18n("b58da2d7e87937280042e1deca1153fa"),
+            inline: true,
+            wrapperComponent: '',
+            editorSetting: {
+              mock: {}
+            },
+            style: {
+              fontSize: 'var(--fonts-size-6)',
+              color: 'var(--colors-neutral-text-2)',
+              fontWeight: 'var(--fonts-weight-3)'
+            }
+          }],
+          style: {
+            position: 'static',
+            display: 'flex',
+            flexWrap: 'nowrap',
+            alignItems: 'center',
+            marginBottom: '15px'
+          },
+          wrapperBody: false,
+          isFixedHeight: false,
+          isFixedWidth: false,
+          size: 'none'
+        }, {
+          type: 'flex',
+          className: 'p-1',
+          items: [{
+            type: 'container',
+            body: [{
+              type: 'container',
+              body: [{
+                type: 'tpl',
+                tpl: '12/',
+                inline: true,
+                wrapperComponent: '',
+                style: {
+                  fontSize: 'var(--fonts-size-6)',
+                  color: 'var(--colors-neutral-text-2)',
+                  fontWeight: 'var(--fonts-weight-3)'
+                }
+              }, {
+                type: 'tpl',
+                tpl: '19',
+                inline: true,
+                wrapperComponent: '',
+                style: {
+                  color: 'var(--colors-neutral-text-6)',
+                  fontSize: 'var(--fonts-size-6)'
+                }
+              }],
+              style: {
+                position: 'static',
+                display: 'block',
+                flex: '0 0 auto',
+                marginTop: 'var(--sizes-size-0)',
+                marginRight: 'var(--sizes-size-0)',
+                marginBottom: 'var(--sizes-size-0)',
+                marginLeft: 'var(--sizes-size-0)'
+              },
+              wrapperBody: false,
+              isFixedWidth: false,
+              size: 'none'
+            }, {
+              type: 'container',
+              body: [{
+                type: 'tpl',
+                tpl: i18n("93b824b57d4c22085c1035f7254619db"),
+                inline: true,
+                wrapperComponent: '',
+                style: {
+                  color: 'var(--colors-neutral-text-5)'
+                }
+              }],
+              style: {
+                position: 'static',
+                display: 'flex',
+                flexWrap: 'nowrap',
+                flexDirection: 'column',
+                justifyContent: 'center',
+                alignItems: 'center',
+                flex: '0 0 auto'
+              },
+              wrapperBody: false,
+              isFixedHeight: false,
+              isFixedWidth: false,
+              size: 'none'
+            }],
+            size: 'xs',
+            style: {
+              position: 'static',
+              display: 'flex',
+              flex: '1 1 auto',
+              flexGrow: 1,
+              flexBasis: 'auto',
+              flexWrap: 'nowrap',
+              flexDirection: 'column',
+              justifyContent: 'center',
+              alignItems: 'center'
+            },
+            wrapperBody: false,
+            isFixedHeight: false,
+            isFixedWidth: false
+          }, {
+            type: 'container',
+            body: [{
+              type: 'tpl',
+              tpl: '100%',
+              inline: true,
+              wrapperComponent: '',
+              style: {
+                fontSize: 'var(--fonts-size-6)',
+                color: 'var(--colors-neutral-text-2)',
+                fontWeight: 'var(--fonts-weight-3)'
+              }
+            }, {
+              type: 'tpl',
+              tpl: i18n("2a8249ce9e52240855dfabc0efc83a3a"),
+              inline: true,
+              wrapperComponent: '',
+              style: {
+                color: 'var(--colors-neutral-text-5)'
+              }
+            }],
+            size: 'xs',
+            style: {
+              position: 'static',
+              display: 'flex',
+              flex: '1 1 auto',
+              flexGrow: 1,
+              flexBasis: 'auto',
+              flexWrap: 'nowrap',
+              flexDirection: 'column',
+              justifyContent: 'flex-start',
+              alignItems: 'center'
+            },
+            wrapperBody: false,
+            isFixedHeight: false,
+            isFixedWidth: false
+          }, {
+            type: 'container',
+            body: [{
+              type: 'tpl',
+              tpl: '99.9%',
+              inline: true,
+              wrapperComponent: '',
+              style: {
+                fontSize: 'var(--fonts-size-6)',
+                color: 'var(--colors-neutral-text-2)',
+                fontWeight: 'var(--fonts-weight-3)'
+              }
+            }, {
+              type: 'tpl',
+              tpl: i18n("09eb6d258fd00deaf350c2d1a0fd6f46"),
+              inline: true,
+              wrapperComponent: '',
+              style: {
+                color: 'var(--colors-neutral-text-5)'
+              }
+            }],
+            size: 'xs',
+            style: {
+              position: 'static',
+              display: 'flex',
+              flex: '1 1 auto',
+              flexGrow: 1,
+              flexBasis: 'auto',
+              flexWrap: 'nowrap',
+              justifyContent: 'center',
+              alignItems: 'center',
+              flexDirection: 'column'
+            },
+            wrapperBody: false,
+            isFixedHeight: false,
+            isFixedWidth: false
+          }],
+          style: {
+            position: 'relative'
+          }
         }, {
-          name: 'b',
-          label: 'B'
+          type: 'container',
+          body: [{
+            type: 'tpl',
+            tpl: i18n("a5cd4ea1820d5c17c35e86885b1ef10d"),
+            inline: true,
+            wrapperComponent: '',
+            style: {
+              fontSize: '14px',
+              color: 'var(--colors-neutral-text-5)'
+            }
+          }, {
+            type: 'tpl',
+            tpl: '2023-01-01 12:00',
+            inline: true,
+            wrapperComponent: '',
+            style: {
+              fontSize: '12px',
+              color: 'var(--colors-neutral-text-6)'
+            }
+          }],
+          style: {
+            position: 'static',
+            display: 'flex',
+            flexWrap: 'nowrap',
+            justifyContent: 'space-between',
+            marginTop: '20px'
+          },
+          wrapperBody: false,
+          isFixedHeight: false,
+          isFixedWidth: false
         }],
-        actions: [{
-          label: i18n("f26225bde6a250894a04db4c53ea03d0"),
-          type: 'button'
-        }]
+        size: 'none',
+        style: {
+          'position': 'static',
+          'display': 'block',
+          'paddingTop': '10px',
+          'paddingRight': '10px',
+          'paddingBottom': '10px',
+          'paddingLeft': '10px',
+          'radius': {
+            'top-left-border-radius': '6px',
+            'top-right-border-radius': '6px',
+            'bottom-left-border-radius': '6px',
+            'bottom-right-border-radius': '6px'
+          },
+          'top-border-width': 'var(--borders-width-4)',
+          'left-border-width': 'var(--borders-width-2)',
+          'right-border-width': 'var(--borders-width-2)',
+          'bottom-border-width': 'var(--borders-width-2)',
+          'top-border-style': 'var(--borders-style-2)',
+          'left-border-style': 'var(--borders-style-2)',
+          'right-border-style': 'var(--borders-style-2)',
+          'bottom-border-style': 'var(--borders-style-2)',
+          'top-border-color': 'var(--colors-brand-6)',
+          'left-border-color': 'var(--colors-brand-10)',
+          'right-border-color': 'var(--colors-brand-10)',
+          'bottom-border-color': 'var(--colors-brand-10)',
+          'flex': '0 0 150px',
+          'marginRight': '15px',
+          'flexBasis': '100%'
+        },
+        wrapperBody: false,
+        isFixedHeight: false,
+        isFixedWidth: true,
+        onEvent: {
+          click: {
+            weight: 0,
+            actions: []
+          }
+        }
+      },
+      placeholder: '',
+      name: '',
+      style: {
+        gutterX: 15,
+        gutterY: 15
       }
     };
     _this.previewSchema = __assign(__assign({}, _this.scaffold), {
-      className: 'text-left '
+      className: 'text-left',
+      name: 'items',
+      columnsCount: 2,
+      style: __assign(__assign({}, _this.scaffold.style), {
+        transform: 'scale(0.5)',
+        width: '600px',
+        transformOrigin: 'left top'
+      }),
+      items: [{}, {}, {}, {}]
     });
     _this.panelTitle = i18n("6223c41373004e3111e768225450b4e8");
+    _this.panelJustify = true;
     _this.panelBodyCreator = function (context) {
       var _a, _b;
       var isCRUDBody = context.schema.type === 'crud';
       var curPosition = (_b = (_a = context === null || context === void 0 ? void 0 : context.schema) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.position;
       var isAbsolute = curPosition === 'fixed' || curPosition === 'absolute';
       return [getSchemaTpl('tabs', [{
-        title: i18n("22b777e6fcb613b8ba83ced9594cd07e"),
-        body: [getSchemaTpl('layout:originPosition', {
-          visibleOn: isAbsolute ? isAbsolute : undefined,
-          value: 'left-top'
-        }), {
-          children: React__default.createElement("div", {
-            className: "m-b"
-          }, React__default.createElement(Button, {
-            level: "primary",
-            size: "sm",
-            block: true,
-            onClick: _this.editDetail.bind(_this, context.id)
-          }, "\u914D\u7F6E\u5355\u9879\u4FE1\u606F"))
-        }, {
-          type: 'divider'
-        }, getSchemaTpl('title'), {
-          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
-        }, getSchemaTpl('cardsPlaceholder')]
+        title: i18n("24d67862f87f439db7ca957aecb77cce"),
+        body: getSchemaTpl('collapseGroup', [{
+          title: i18n("4092ed98e9035652d4c9ca9441701ed7"),
+          body: [{
+            type: 'input-text',
+            label: i18n("3791ba5c2962a42a251489872342b7d6"),
+            name: 'editorSetting.displayName'
+          }, isCRUDBody ? null : getSchemaTpl('formItemName', {
+            label: i18n("41a344642681efaaa418c228ba7fb45c")
+          }), getSchemaTpl('cardsPlaceholder')]
+        }, getSchemaTpl('status')])
       }, {
         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')]
+        body: getSchemaTpl('collapseGroup', __spreadArray([{
+          title: i18n("bb79667f37035e9562ec6bcffd6cf8ef"),
+          body: [{
+            name: 'columnsCount',
+            type: 'input-range',
+            visibleOn: '!this.leftFixed',
+            min: 0,
+            max: 12,
+            step: 1,
+            label: i18n("fcd70206ed8109b7ed361c7bce0922c4"),
+            description: i18n("3cf0da9fe51f92842e0a6d375fa5c605")
+          }, {
+            type: 'input-number',
+            label: i18n("3ccfcb4c0daac7bb3ef1399b4389e3e5"),
+            name: 'style.gutterX'
+          }, {
+            type: 'input-number',
+            label: i18n("ab57255c391c3732b4b38ae78f55e058"),
+            name: 'style.gutterY'
+          }, getSchemaTpl('switch', {
+            name: 'masonryLayout',
+            label: i18n("953e91f3df59837ac2965cc04dec4b0d")
+          }), getSchemaTpl('layout:originPosition', {
+            visibleOn: isAbsolute ? isAbsolute : undefined,
+            value: 'left-top'
+          })]
+        }], __read(getSchemaTpl('theme:common', {
+          exclude: ['layout']
+        })), false))
       }])];
     };
     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.buildDataSchemas = function (node, region) {
+    var _a;
+    var dataSchema = {
+      $id: 'cards',
+      type: 'object',
+      title: i18n("390d9ad686ba5622d49443d1e3659d51"),
+      properties: {}
+    };
+    var match = node.schema.source && String(node.schema.source).match(/{([\w-_]+)}/);
+    var field = node.schema.name || (match === null || match === void 0 ? void 0 : match[1]);
+    var scope = this.manager.dataSchema.getScope("".concat(node.id, "-").concat(node.type));
+    var schema = (_a = scope === null || scope === void 0 ? void 0 : scope.parent) === null || _a === void 0 ? void 0 : _a.getSchemaByPath(field);
+    if (isObject(schema === null || schema === void 0 ? void 0 : schema.items)) {
+      dataSchema = __assign(__assign({}, dataSchema), schema.items);
+      // 列表添加序号方便处理
+      set(dataSchema, 'properties.index', {
+        type: 'number',
+        title: i18n("b271e427962758c71e342a2c06df493a")
       });
     }
+    return dataSchema;
   };
   CardsPlugin.prototype.filterProps = function (props) {
-    var data = __assign(__assign({}, props.defaultData), props.data);
-    var arr = resolveArrayDatasource({
-      value: props.value,
-      data: data,
-      source: props.source
-    });
-    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 _a;
+    // 编辑时显示两行假数据
+    var count = (props.columnsCount || 3) * 2;
+    props.value = repeatArray({}, count).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
     });
+    props.className = "".concat(props.className || '', " ae-Editor-list");
+    props.itemsClassName = "".concat(props.itemsClassName || '', " cards-items");
+    if (props.card && !((_a = props.card.className) === null || _a === void 0 ? void 0 : _a.includes('listItem'))) {
+      props.card.className = "".concat(props.card.className || '', " ae-Editor-listItem");
+    }
+    // 列表类型内的文本元素显示原始公式
+    props = escapeFormula(props);
+    return props;
   };
   CardsPlugin.prototype.getRendererInfo = function (context) {
     var _a;
@@ -239,7 +431,8 @@ var CardsPlugin = /** @class */function (_super) {
         wrapperResolve: plugin.wrapperResolve,
         filterProps: plugin.filterProps,
         $schema: plugin.$schema,
-        renderRenderer: plugin.renderRenderer
+        renderRenderer: plugin.renderRenderer,
+        memberImmutable: plugin.memberImmutable
       });
     }
     return _super.prototype.getRendererInfo.call(this, context);
@@ -251,3 +444,4 @@ var CardsPlugin = /** @class */function (_super) {
 registerEditorPlugin(CardsPlugin);
 
 export { CardsPlugin };
+window.amisEditorVersionInfo={version:'5.5.2-beta.2',buildTime:'2023-09-28'};