@nocobase/client 0.9.3-alpha.1 → 0.9.4-alpha.2

package/lib/schema-component/antd/grid/Grid.js

@@ -242,21 +242,25 @@ var wrapColSchema = function wrapColSchema(schema) {
 };
 var useRowProperties = function useRowProperties() {
   var fieldSchema = (0, _react.useFieldSchema)();
-  return fieldSchema.reduceProperties(function (buf, s) {
-    if (s['x-component'] === 'Grid.Row' && !s['x-hidden']) {
-      buf.push(s);
-    }
-    return buf;
-  }, []);
+  return (0, _react2.useMemo)(function () {
+    return fieldSchema.reduceProperties(function (buf, s) {
+      if (s['x-component'] === 'Grid.Row' && !s['x-hidden']) {
+        buf.push(s);
+      }
+      return buf;
+    }, []);
+  }, [Object.keys(fieldSchema.properties || {}).join(',')]);
 };
 var useColProperties = function useColProperties() {
   var fieldSchema = (0, _react.useFieldSchema)();
-  return fieldSchema.reduceProperties(function (buf, s) {
-    if (s['x-component'] === 'Grid.Col' && !s['x-hidden']) {
-      buf.push(s);
-    }
-    return buf;
-  }, []);
+  return (0, _react2.useMemo)(function () {
+    return fieldSchema.reduceProperties(function (buf, s) {
+      if (s['x-component'] === 'Grid.Col' && !s['x-hidden']) {
+        buf.push(s);
+      }
+      return buf;
+    }, []);
+  }, [Object.keys(fieldSchema.properties || {}).join(',')]);
 };
 var DndWrapper = function DndWrapper(props) {
   if (props.dndContext === false) {
@@ -277,7 +281,8 @@ var Grid = (0, _react.observer)(function (props) {
   var field = (0, _react.useField)();
   var fieldSchema = (0, _react.useFieldSchema)();
   var _useSchemaInitializer = (0, _.useSchemaInitializer)(fieldSchema['x-initializer']),
-    render = _useSchemaInitializer.render;
+    render = _useSchemaInitializer.render,
+    InitializerComponent = _useSchemaInitializer.InitializerComponent;
   var addr = field.address.toString();
   var rows = useRowProperties();
   var _useFormBlockContext = (0, _.useFormBlockContext)(),
@@ -289,7 +294,8 @@ var Grid = (0, _react.observer)(function (props) {
     value: {
       ref: gridRef,
       fieldSchema: fieldSchema,
-      renderSchemaInitializer: render
+      renderSchemaInitializer: render,
+      InitializerComponent: InitializerComponent
     }
   }, /*#__PURE__*/_react2.default.createElement("div", {
     className: 'nb-grid',
@@ -311,7 +317,7 @@ var Grid = (0, _react.observer)(function (props) {
     }
   }), rows.map(function (schema, index) {
     return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, {
-      key: schema.name
+      key: index
     }, /*#__PURE__*/_react2.default.createElement(_react.RecursionField, {
       name: schema.name,
       schema: schema
@@ -326,7 +332,7 @@ var Grid = (0, _react.observer)(function (props) {
         schema: schema
       }
     }));
-  })), render()));
+  })), /*#__PURE__*/_react2.default.createElement(InitializerComponent, null)));
 });
 exports.Grid = Grid;
 Grid.Row = (0, _react.observer)(function () {
@@ -353,7 +359,7 @@ Grid.Row = (0, _react.observer)(function () {
     }
   }), cols.map(function (schema, index) {
     return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, {
-      key: schema.name
+      key: index
     }, /*#__PURE__*/_react2.default.createElement(_react.RecursionField, {
       name: schema.name,
       schema: schema
@@ -372,17 +378,21 @@ Grid.Row = (0, _react.observer)(function () {
   })));
 });
 Grid.Col = (0, _react.observer)(function (props) {
+  var _schema$xComponentP2;
   var _useContext = (0, _react2.useContext)(GridRowContext),
     _useContext$cols = _useContext.cols,
     cols = _useContext$cols === void 0 ? [] : _useContext$cols;
   var schema = (0, _react.useFieldSchema)();
   var field = (0, _react.useField)();
-  var width = '';
-  if (cols === null || cols === void 0 ? void 0 : cols.length) {
-    var _schema$xComponentP;
-    var w = (schema === null || schema === void 0 ? void 0 : (_schema$xComponentP = schema['x-component-props']) === null || _schema$xComponentP === void 0 ? void 0 : _schema$xComponentP['width']) || 100 / cols.length;
-    width = "calc(".concat(w, "% - var(--nb-spacing) *  ").concat((cols.length + 1) / cols.length, ")");
-  }
+  var width = (0, _react2.useMemo)(function () {
+    var width = '';
+    if (cols === null || cols === void 0 ? void 0 : cols.length) {
+      var _schema$xComponentP;
+      var w = (schema === null || schema === void 0 ? void 0 : (_schema$xComponentP = schema['x-component-props']) === null || _schema$xComponentP === void 0 ? void 0 : _schema$xComponentP['width']) || 100 / cols.length;
+      width = "calc(".concat(w, "% - var(--nb-spacing) *  ").concat((cols.length + 1) / cols.length, ")");
+    }
+    return width;
+  }, [cols === null || cols === void 0 ? void 0 : cols.length, schema === null || schema === void 0 ? void 0 : (_schema$xComponentP2 = schema['x-component-props']) === null || _schema$xComponentP2 === void 0 ? void 0 : _schema$xComponentP2['width']]);
   var _useDroppable3 = (0, _core.useDroppable)({
       id: field.address.toString(),
       data: {

package/lib/schema-component/antd/grid-card/GridCard.Decorator.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const GridCardBlockContext: React.Context<any>;
+export declare const GridCardBlockProvider: (props: any) => JSX.Element;
+export declare const useGridCardBlockContext: () => any;
+export declare const useGridCardItemProps: () => {};

package/lib/schema-component/antd/grid-card/GridCard.Decorator.js

@@ -0,0 +1,77 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridCardItemProps = exports.useGridCardBlockContext = exports.GridCardBlockProvider = exports.GridCardBlockContext = void 0;
+var _core = require("@formily/core");
+var _react = require("@formily/react");
+var _react2 = _interopRequireWildcard(require("react"));
+var _blockProvider = require("../../../block-provider");
+var _antd = require("@formily/antd");
+var _css = require("@emotion/css");
+var _hooks = require("../../../block-provider/hooks");
+var _templateObject;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var GridCardBlockContext = /*#__PURE__*/(0, _react2.createContext)({});
+exports.GridCardBlockContext = GridCardBlockContext;
+var InternalGridCardBlockProvider = function InternalGridCardBlockProvider(props) {
+  var _service$data2;
+  var _useBlockRequestConte = (0, _blockProvider.useBlockRequestContext)(),
+    resource = _useBlockRequestConte.resource,
+    service = _useBlockRequestConte.service;
+  var field = (0, _react.useField)();
+  var form = (0, _react2.useMemo)(function () {
+    return (0, _core.createForm)({
+      readPretty: true
+    });
+  }, []);
+  (0, _react2.useEffect)(function () {
+    if (!(service === null || service === void 0 ? void 0 : service.loading)) {
+      var _service$data;
+      form.setValuesIn(field.address.concat('list').toString(), service === null || service === void 0 ? void 0 : (_service$data = service.data) === null || _service$data === void 0 ? void 0 : _service$data.data);
+    }
+  }, [service === null || service === void 0 ? void 0 : (_service$data2 = service.data) === null || _service$data2 === void 0 ? void 0 : _service$data2.data, service === null || service === void 0 ? void 0 : service.loading]);
+  return /*#__PURE__*/_react2.default.createElement(GridCardBlockContext.Provider, {
+    value: {
+      service: service,
+      resource: resource,
+      columnCount: props.columnCount
+    }
+  }, /*#__PURE__*/_react2.default.createElement(_react.FormContext.Provider, {
+    value: form
+  }, /*#__PURE__*/_react2.default.createElement(_antd.FormLayout, {
+    layout: 'vertical'
+  }, /*#__PURE__*/_react2.default.createElement("div", {
+    className: (0, _css.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n              & > .nb-block-item {\n                margin-bottom: var(--nb-spacing);\n                & > .nb-action-bar:has(:first-child:not(:empty)) {\n                  padding: var(--nb-spacing);\n                  background: #fff;\n                }\n                .ant-list-pagination {\n                  padding: var(--nb-spacing);\n                  background: #fff;\n                }\n              }\n            "])))
+  }, props.children))));
+};
+var GridCardBlockProvider = function GridCardBlockProvider(props) {
+  var params = _objectSpread({}, props.params);
+  var collection = props.collection;
+  var _useAssociationNames = (0, _hooks.useAssociationNames)(collection),
+    appends = _useAssociationNames.appends;
+  if (!Object.keys(params).includes('appends')) {
+    params['appends'] = appends;
+  }
+  return /*#__PURE__*/_react2.default.createElement(_blockProvider.BlockProvider, _objectSpread(_objectSpread({}, props), {}, {
+    params: params
+  }), /*#__PURE__*/_react2.default.createElement(InternalGridCardBlockProvider, _objectSpread({}, props)));
+};
+exports.GridCardBlockProvider = GridCardBlockProvider;
+var useGridCardBlockContext = function useGridCardBlockContext() {
+  return (0, _react2.useContext)(GridCardBlockContext);
+};
+exports.useGridCardBlockContext = useGridCardBlockContext;
+var useGridCardItemProps = function useGridCardItemProps() {
+  return {};
+};
+exports.useGridCardItemProps = useGridCardItemProps;

package/lib/schema-component/antd/grid-card/GridCard.Designer.d.ts

@@ -0,0 +1 @@
+export declare const GridCardDesigner: () => JSX.Element;

package/lib/schema-component/antd/grid-card/GridCard.Designer.js

@@ -0,0 +1,253 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridCardDesigner = void 0;
+var _react = require("@formily/react");
+var _react2 = _interopRequireWildcard(require("react"));
+var _antd = require("@formily/antd");
+var _antd2 = require("antd");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _reactI18next = require("react-i18next");
+var _collectionManager = require("../../../collection-manager");
+var _schemaSettings = require("../../../schema-settings");
+var _schemaTemplates = require("../../../schema-templates");
+var _hooks = require("../../hooks");
+var _filter = require("../filter");
+var _FilterDynamicComponent = require("../table-v2/FilterDynamicComponent");
+var _core = require("../../core");
+var _options = require("./options");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+_antd2.Slider;
+var columnCountMarks = [1, 2, 3, 4, 6, 8, 12, 24].reduce(function (obj, cur) {
+  obj[cur] = cur;
+  return obj;
+}, {});
+var GridCardDesigner = function GridCardDesigner() {
+  var _fieldSchema$xDecora, _fieldSchema$xDecora$, _fieldSchema$xDecora2, _fieldSchema$xDecora3, _fieldSchema$xDecora4, _field$decoratorProps, _field$decoratorProps2;
+  var _useCollection = (0, _collectionManager.useCollection)(),
+    name = _useCollection.name,
+    title = _useCollection.title;
+  var template = (0, _schemaTemplates.useSchemaTemplate)();
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t;
+  var fieldSchema = (0, _react.useFieldSchema)();
+  var field = (0, _react.useField)();
+  var dataSource = (0, _collectionManager.useCollectionFilterOptions)(name);
+  var _useDesignable = (0, _hooks.useDesignable)(),
+    dn = _useDesignable.dn;
+  var sortFields = (0, _collectionManager.useSortFields)(name);
+  var defaultFilter = (fieldSchema === null || fieldSchema === void 0 ? void 0 : (_fieldSchema$xDecora = fieldSchema['x-decorator-props']) === null || _fieldSchema$xDecora === void 0 ? void 0 : (_fieldSchema$xDecora$ = _fieldSchema$xDecora.params) === null || _fieldSchema$xDecora$ === void 0 ? void 0 : _fieldSchema$xDecora$.filter) || {};
+  var defaultSort = (fieldSchema === null || fieldSchema === void 0 ? void 0 : (_fieldSchema$xDecora2 = fieldSchema['x-decorator-props']) === null || _fieldSchema$xDecora2 === void 0 ? void 0 : (_fieldSchema$xDecora3 = _fieldSchema$xDecora2.params) === null || _fieldSchema$xDecora3 === void 0 ? void 0 : _fieldSchema$xDecora3.sort) || [];
+  var defaultResource = fieldSchema === null || fieldSchema === void 0 ? void 0 : (_fieldSchema$xDecora4 = fieldSchema['x-decorator-props']) === null || _fieldSchema$xDecora4 === void 0 ? void 0 : _fieldSchema$xDecora4.resource;
+  var columnCount = field.decoratorProps.columnCount || _options.defaultColumnCount;
+  var columnCountSchema = (0, _react2.useMemo)(function () {
+    return {
+      'x-component': 'Slider',
+      'x-decorator': 'FormItem',
+      'x-component-props': {
+        min: 1,
+        max: 24,
+        marks: columnCountMarks,
+        tooltip: {
+          formatter: function formatter(value) {
+            return "".concat(value).concat(t('Column'));
+          }
+        },
+        step: null
+      }
+    };
+  }, [t]);
+  var columnCountProperties = (0, _react2.useMemo)(function () {
+    return _options.gridSizes.reduce(function (o, k) {
+      o[k] = _objectSpread(_objectSpread({}, columnCountSchema), {}, {
+        title: t(_options.screenSizeTitleMaps[k]),
+        description: "".concat(t('Screen size'), " ").concat(_options.screenSizeMaps[k], " ").concat(t('pixels'))
+      });
+      return o;
+    }, {});
+  }, [columnCountSchema, t]);
+  var sort = defaultSort === null || defaultSort === void 0 ? void 0 : defaultSort.map(function (item) {
+    return item.startsWith('-') ? {
+      field: item.substring(1),
+      direction: 'desc'
+    } : {
+      field: item,
+      direction: 'asc'
+    };
+  });
+  return /*#__PURE__*/_react2.default.createElement(_schemaSettings.GeneralSchemaDesigner, {
+    template: template,
+    title: title || name
+  }, /*#__PURE__*/_react2.default.createElement(_core.SchemaComponentOptions, {
+    components: {
+      Slider: _antd2.Slider
+    }
+  }, /*#__PURE__*/_react2.default.createElement(_schemaSettings.SchemaSettings.BlockTitleItem, null), /*#__PURE__*/_react2.default.createElement(_schemaSettings.SchemaSettings.ModalItem, {
+    title: t('Set the count of columns displayed in a row'),
+    initialValues: columnCount,
+    schema: {
+      type: 'object',
+      title: t('Set the count of columns displayed in a row'),
+      properties: columnCountProperties
+    },
+    onSubmit: function onSubmit(columnCount) {
+      var _schema;
+      _lodash.default.set(fieldSchema, 'x-decorator-props.columnCount', columnCount);
+      field.decoratorProps.columnCount = columnCount;
+      dn.emit('patch', {
+        schema: (_schema = {}, _defineProperty(_schema, 'x-uid', fieldSchema['x-uid']), _defineProperty(_schema, 'x-decorator-props', fieldSchema['x-decorator-props']), _schema)
+      });
+    }
+  }), /*#__PURE__*/_react2.default.createElement(_schemaSettings.SchemaSettings.ModalItem, {
+    title: t('Set the data scope'),
+    schema: {
+      type: 'object',
+      title: t('Set the data scope'),
+      properties: {
+        filter: {
+          default: defaultFilter,
+          // title: '数据范围',
+          enum: dataSource,
+          'x-component': 'Filter',
+          'x-component-props': {
+            dynamicComponent: function dynamicComponent(props) {
+              return (0, _FilterDynamicComponent.FilterDynamicComponent)(_objectSpread({}, props));
+            }
+          }
+        }
+      }
+    },
+    onSubmit: function onSubmit(_ref) {
+      var _schema2;
+      var filter = _ref.filter;
+      filter = (0, _filter.removeNullCondition)(filter);
+      _lodash.default.set(fieldSchema, 'x-decorator-props.params.filter', filter);
+      field.decoratorProps.params = _objectSpread({}, fieldSchema['x-decorator-props'].params);
+      dn.emit('patch', {
+        schema: (_schema2 = {}, _defineProperty(_schema2, 'x-uid', fieldSchema['x-uid']), _defineProperty(_schema2, 'x-decorator-props', fieldSchema['x-decorator-props']), _schema2)
+      });
+    }
+  }), /*#__PURE__*/_react2.default.createElement(_schemaSettings.SchemaSettings.ModalItem, {
+    title: t('Set default sorting rules'),
+    components: {
+      ArrayItems: _antd.ArrayItems
+    },
+    schema: {
+      type: 'object',
+      title: t('Set default sorting rules'),
+      properties: {
+        sort: {
+          type: 'array',
+          default: sort,
+          'x-component': 'ArrayItems',
+          'x-decorator': 'FormItem',
+          items: {
+            type: 'object',
+            properties: {
+              space: {
+                type: 'void',
+                'x-component': 'Space',
+                properties: {
+                  sort: {
+                    type: 'void',
+                    'x-decorator': 'FormItem',
+                    'x-component': 'ArrayItems.SortHandle'
+                  },
+                  field: {
+                    type: 'string',
+                    enum: sortFields,
+                    required: true,
+                    'x-decorator': 'FormItem',
+                    'x-component': 'Select',
+                    'x-component-props': {
+                      style: {
+                        width: 260
+                      }
+                    }
+                  },
+                  direction: {
+                    type: 'string',
+                    'x-decorator': 'FormItem',
+                    'x-component': 'Radio.Group',
+                    'x-component-props': {
+                      optionType: 'button'
+                    },
+                    enum: [{
+                      label: t('ASC'),
+                      value: 'asc'
+                    }, {
+                      label: t('DESC'),
+                      value: 'desc'
+                    }]
+                  },
+                  remove: {
+                    type: 'void',
+                    'x-decorator': 'FormItem',
+                    'x-component': 'ArrayItems.Remove'
+                  }
+                }
+              }
+            }
+          },
+          properties: {
+            add: {
+              type: 'void',
+              title: t('Add sort field'),
+              'x-component': 'ArrayItems.Addition'
+            }
+          }
+        }
+      }
+    },
+    onSubmit: function onSubmit(_ref2) {
+      var _schema3;
+      var sort = _ref2.sort;
+      var sortArr = sort.map(function (item) {
+        return item.direction === 'desc' ? "-".concat(item.field) : item.field;
+      });
+      _lodash.default.set(fieldSchema, 'x-decorator-props.params.sort', sortArr);
+      field.decoratorProps.params = _objectSpread({}, fieldSchema['x-decorator-props'].params);
+      dn.emit('patch', {
+        schema: (_schema3 = {}, _defineProperty(_schema3, 'x-uid', fieldSchema['x-uid']), _defineProperty(_schema3, 'x-decorator-props', fieldSchema['x-decorator-props']), _schema3)
+      });
+    }
+  }), /*#__PURE__*/_react2.default.createElement(_schemaSettings.SchemaSettings.SelectItem, {
+    title: t('Records per page'),
+    value: ((_field$decoratorProps = field.decoratorProps) === null || _field$decoratorProps === void 0 ? void 0 : (_field$decoratorProps2 = _field$decoratorProps.params) === null || _field$decoratorProps2 === void 0 ? void 0 : _field$decoratorProps2.pageSize) || 20,
+    options: _options.pageSizeOptions.map(function (v) {
+      return {
+        value: v
+      };
+    }),
+    onChange: function onChange(pageSize) {
+      var _schema4;
+      _lodash.default.set(fieldSchema, 'x-decorator-props.params.pageSize', pageSize);
+      field.decoratorProps.params = _objectSpread(_objectSpread({}, fieldSchema['x-decorator-props'].params), {}, {
+        page: 1
+      });
+      dn.emit('patch', {
+        schema: (_schema4 = {}, _defineProperty(_schema4, 'x-uid', fieldSchema['x-uid']), _defineProperty(_schema4, 'x-decorator-props', fieldSchema['x-decorator-props']), _schema4)
+      });
+    }
+  }), /*#__PURE__*/_react2.default.createElement(_schemaSettings.SchemaSettings.Template, {
+    componentName: 'GridCard',
+    collectionName: name,
+    resourceName: defaultResource
+  }), /*#__PURE__*/_react2.default.createElement(_schemaSettings.SchemaSettings.Divider, null), /*#__PURE__*/_react2.default.createElement(_schemaSettings.SchemaSettings.Remove, {
+    removeParentsIfNoChildren: true,
+    breakRemoveOn: {
+      'x-component': 'Grid'
+    }
+  })));
+};
+exports.GridCardDesigner = GridCardDesigner;

package/lib/schema-component/antd/grid-card/GridCard.Item.d.ts

@@ -0,0 +1 @@
+export declare const GridCardItem: (props: any) => JSX.Element;

package/lib/schema-component/antd/grid-card/GridCard.Item.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridCardItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _antd = require("antd");
+var _css = require("@emotion/css");
+var _react2 = require("@formily/react");
+var _recordProvider = require("../../../record-provider");
+var _templateObject, _templateObject2;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var itemCss = (0, _css.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  justify-content: space-between;\n  gap: 8px;\n"])));
+var GridCardItem = function GridCardItem(props) {
+  var field = (0, _react2.useField)();
+  return /*#__PURE__*/_react.default.createElement(_antd.Card, {
+    className: (0, _css.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        &,\n        & .ant-card-body {\n          height: 100%;\n        }\n      "])))
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: itemCss
+  }, /*#__PURE__*/_react.default.createElement(_recordProvider.RecordSimpleProvider, {
+    value: field.value
+  }, props.children)));
+};
+exports.GridCardItem = GridCardItem;

package/lib/schema-component/antd/grid-card/GridCard.d.ts

@@ -0,0 +1,8 @@
+import { GridCardItem } from './GridCard.Item';
+import { GridCardBlockProvider } from './GridCard.Decorator';
+import { GridCardDesigner } from './GridCard.Designer';
+export declare const GridCard: ((props: any) => JSX.Element) & {
+    Item: typeof GridCardItem;
+    Designer: typeof GridCardDesigner;
+    Decorator: typeof GridCardBlockProvider;
+};

package/lib/schema-component/antd/grid-card/GridCard.js

@@ -0,0 +1,112 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridCard = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@formily/react");
+var _css = require("@emotion/css");
+var _antd = require("antd");
+var _hooks = require("./hooks");
+var _common = require("../../common");
+var _core = require("../../core");
+var _hooks2 = require("../../hooks");
+var _GridCard = require("./GridCard.Item");
+var _GridCard2 = require("./GridCard.Decorator");
+var _GridCard3 = require("./GridCard.Designer");
+var _options = require("./options");
+var _templateObject;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var rowGutter = {
+  md: 16,
+  sm: 8,
+  xs: 8
+};
+var designerCss = (0, _css.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  &:hover {\n    > .general-schema-designer {\n      display: block;\n    }\n  }\n\n  > .general-schema-designer {\n    position: absolute;\n    z-index: 999;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    display: none;\n    background: rgba(241, 139, 98, 0.06);\n    border: 0;\n    pointer-events: none;\n    > .general-schema-designer-icons {\n      position: absolute;\n      right: 2px;\n      top: 2px;\n      line-height: 16px;\n      pointer-events: all;\n      .ant-space-item {\n        background-color: #f18b62;\n        color: #fff;\n        line-height: 16px;\n        width: 16px;\n        padding-left: 1px;\n      }\n    }\n  }\n"])));
+var InternalGridCard = function InternalGridCard(props) {
+  var _service$data;
+  var _useGridCardBlockCont = (0, _GridCard2.useGridCardBlockContext)(),
+    service = _useGridCardBlockCont.service,
+    _useGridCardBlockCont2 = _useGridCardBlockCont.columnCount,
+    columnCount = _useGridCardBlockCont2 === void 0 ? _options.defaultColumnCount : _useGridCardBlockCont2;
+  var run = service.run,
+    params = service.params;
+  var meta = service === null || service === void 0 ? void 0 : (_service$data = service.data) === null || _service$data === void 0 ? void 0 : _service$data.meta;
+  var fieldSchema = (0, _react2.useFieldSchema)();
+  var field = (0, _react2.useField)();
+  var Designer = (0, _hooks2.useDesigner)();
+  var _useState = (0, _react.useState)(new Map()),
+    _useState2 = _slicedToArray(_useState, 1),
+    schemaMap = _useState2[0];
+  var getSchema = (0, _react.useCallback)(function (key) {
+    if (!schemaMap.has(key)) {
+      schemaMap.set(key, new _react2.Schema({
+        type: 'object',
+        properties: _defineProperty({}, key, fieldSchema.properties['item'])
+      }));
+    }
+    return schemaMap.get(key);
+  }, [fieldSchema.properties, schemaMap]);
+  var onPaginationChange = (0, _react.useCallback)(function (page, pageSize) {
+    run(_objectSpread(_objectSpread({}, params === null || params === void 0 ? void 0 : params[0]), {}, {
+      page: page,
+      pageSize: pageSize
+    }));
+  }, [run, params]);
+  return /*#__PURE__*/_react.default.createElement(_core.SchemaComponentOptions, {
+    scope: {
+      useGridCardItemProps: _GridCard2.useGridCardItemProps,
+      useGridCardActionBarProps: _hooks.useGridCardActionBarProps
+    }
+  }, /*#__PURE__*/_react.default.createElement(_common.SortableItem, {
+    className: (0, _css.cx)('nb-card-list', designerCss)
+  }, /*#__PURE__*/_react.default.createElement(_antd.List, {
+    pagination: !meta || meta.count <= meta.pageSize ? false : {
+      onChange: onPaginationChange,
+      total: (meta === null || meta === void 0 ? void 0 : meta.count) || 0,
+      pageSize: (meta === null || meta === void 0 ? void 0 : meta.pageSize) || 10,
+      current: (meta === null || meta === void 0 ? void 0 : meta.page) || 1,
+      pageSizeOptions: _options.pageSizeOptions
+    },
+    dataSource: field.value,
+    grid: _objectSpread(_objectSpread({}, columnCount), {}, {
+      sm: columnCount.xs,
+      xl: columnCount.lg,
+      gutter: [rowGutter, rowGutter]
+    }),
+    renderItem: function renderItem(item, index) {
+      return /*#__PURE__*/_react.default.createElement(_antd.Col, {
+        style: {
+          height: '100%'
+        }
+      }, /*#__PURE__*/_react.default.createElement(_react2.RecursionField, {
+        key: index,
+        basePath: field.address,
+        name: index,
+        onlyRenderProperties: true,
+        schema: getSchema(index)
+      }));
+    },
+    loading: service === null || service === void 0 ? void 0 : service.loading
+  }), /*#__PURE__*/_react.default.createElement(Designer, null)));
+};
+var GridCard = InternalGridCard;
+exports.GridCard = GridCard;
+GridCard.Item = _GridCard.GridCardItem;
+GridCard.Designer = _GridCard3.GridCardDesigner;
+GridCard.Decorator = _GridCard2.GridCardBlockProvider;

package/lib/schema-component/antd/grid-card/hooks.d.ts

@@ -0,0 +1,4 @@
+import { SpaceProps } from 'antd';
+export declare const useGridCardActionBarProps: () => {
+    spaceProps: SpaceProps;
+};

package/lib/schema-component/antd/grid-card/hooks.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridCardActionBarProps = void 0;
+var spaceProps = {
+  size: ['large', 'small'],
+  wrap: true
+};
+var useGridCardActionBarProps = function useGridCardActionBarProps() {
+  return {
+    spaceProps: spaceProps
+  };
+};
+exports.useGridCardActionBarProps = useGridCardActionBarProps;

package/lib/schema-component/antd/grid-card/index.d.ts

@@ -0,0 +1 @@
+export * from './GridCard';