shineout 0.0.1-alpha.1

package/esm/form/__example__/006-validate-04-height.js

@@ -0,0 +1,153 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+require("core-js/modules/es.promise.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.string.replace.js");
+require("core-js/modules/es.array.index-of.js");
+var _react = _interopRequireWildcard(require("react"));
+var _2 = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+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; }
+/**
+ * cn - 校验样式
+ *    -- 使用 `keepErrorHeight` 使得单行错误提示不会撑开页面高度
+ * en - validate style
+ *    -- Use `keepErrorHeight` so that a single-line error prompt will not stretch the page height
+ */
+
+var password = {
+  func: function func(value, _formData, _cb, props) {
+    return new Promise(function (resolve, reject) {
+      console.log('password', props);
+      if (!/\d+/.test(value) || !/[a-z]+/i.test(value)) {
+        reject(new Error(props.message.replace('{title}', props.title)));
+      } else {
+        resolve(true);
+      }
+    });
+  }
+};
+var isExist = function isExist(value, _, callback) {
+  if (value.indexOf('so') >= 0) callback(new Error("\"".concat(value, "\" is existed.")));else callback(true);
+};
+var rules = (0, _2.Rule)(
+// validate function package
+{
+  password: password,
+  isExist: isExist
+},
+// language package
+{
+  password: {
+    message: '{title} at least has one numeral and one letter'
+  }
+});
+var App = function App() {
+  var _useState = (0, _react.useState)(undefined),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_2.Form, {
+    value: value,
+    scrollParent: function scrollParent() {
+      return document.getElementById('layout');
+    },
+    onChange: setValue,
+    style: {
+      maxWidth: 500
+    },
+    onSubmit: function onSubmit(d) {
+      return console.log(d);
+    },
+    keepErrorHeight: true,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Form.Item, {
+      required: true,
+      label: "Email",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Input, {
+        name: "email",
+        title: "Email",
+        rules: [rules.required, rules.email]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Form.Item, {
+      required: true,
+      label: "Name",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Input, {
+        name: "name",
+        title: "Name",
+        rules: [rules.required, rules.isExist]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Form.Item, {
+      required: true,
+      label: "Password",
+      tip: "At least one letter, one numeral, and 6 - 20 characters.",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Input, {
+        name: "password",
+        title: "Password",
+        type: "password",
+        rules: [rules.required, rules.range(6, 20), rules.password]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Form.Item, {
+      required: true,
+      label: "Age",
+      tip: "between 18 and 60",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Input, {
+        name: "age",
+        title: "Age",
+        style: {
+          width: 100
+        },
+        type: "integer",
+        rules: [rules.required, rules.integer, rules.range(18, 60)]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Form.Item, {
+      required: true,
+      label: "Tel",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Input, {
+        name: "tel",
+        title: "Tel",
+        rules: [rules.required, rules.regExp('^[\\d\\s ().-]+$')]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Form.Item, {
+      required: true,
+      label: "IPv4",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Input, {
+        name: "IPv4",
+        title: "IP",
+        rules: [rules.required, rules.ipv4]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Form.Item, {
+      required: true,
+      label: "Favorite Colors",
+      tip: "select your favorite colors",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Checkbox.Group, {
+        name: "colors",
+        keygen: function keygen(d) {
+          return d;
+        },
+        data: ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet'],
+        defaultValue: [],
+        rules: [rules.required('At least select one favorite color'), rules.min(2), rules.max(3)]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_2.Form.Item, {
+      label: "",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Form.Button, {
+        children: "Sumbit"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Form.Reset, {
+        children: "Reset"
+      })]
+    })]
+  });
+};
+var _default = App;
+exports.default = _default;

package/esm/form/__example__/008-disabled.d.ts

@@ -0,0 +1,9 @@
+/**
+ * cn - 禁用
+ *    -- 使用 disabled 属性使表单内支持 disabled 属性的组件禁用，通常用在表单数据加载或提交时
+ * en - Disabled
+ *    -- Use the disabled property to make the Form support to disable component.
+ */
+import React from 'react';
+declare const App: React.FC;
+export default App;

package/esm/form/__example__/008-disabled.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 禁用
+ *    -- 使用 disabled 属性使表单内支持 disabled 属性的组件禁用，通常用在表单数据加载或提交时
+ * en - Disabled
+ *    -- Use the disabled property to make the Form support to disable component.
+ */
+
+var App = function App() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Form, {
+    disabled: true,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
+      label: "Email",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
+        name: "email"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
+      label: "Email2",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {})
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
+      label: "Password",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
+        name: "password",
+        type: "password"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
+      label: "Name",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Input.Group, {
+        style: {
+          width: 300
+        },
+        disabled: true,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
+          name: "firstName",
+          placeholder: "First Name"
+        }), "-", /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
+          name: "lastName",
+          placeholder: "Last Name"
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
+      label: "Age",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input.Number, {
+        style: {
+          width: 100
+        },
+        name: "age",
+        type: "number",
+        digits: 0,
+        defaultValue: "0"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
+      label: "address",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Textarea, {
+        rows: 2,
+        name: "address",
+        defaultValue: "xxx"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Form.Item, {
+      label: "",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Submit, {
+        loading: true,
+        children: "Submit"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Reset, {
+        children: "Reset"
+      })]
+    })]
+  });
+};
+var _default = App;
+exports.default = _default;

package/esm/form/__example__/009-field.d.ts

@@ -0,0 +1,13 @@
+/**
+ * cn - 字段
+ *    -- 支持 value 和 onChange 的组件可以放在 Form.Field 中。
+ *    -- children 为 ReactElement时，必须支持 value 和 onChange 属性
+ *    -- children 为 Function 时，返回一个或一组 ReactElement，在函数内部自行处理 value 和 onChange
+ * en - Field
+ *    -- Components that support value property and onChange property can be put in a Form.Field .
+ *    -- When the children property is a ReactElement, the value and onChange property must be provided.
+ *    -- When the children property is a function, return one or one group of ReactElement.
+ */
+import React from 'react';
+declare const App: React.FC;
+export default App;

package/esm/form/__example__/009-field.js

@@ -0,0 +1,81 @@
+"use strict";
+
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+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) { (0, _defineProperty2.default)(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 Input(props) {
+  var _props$value = props.value,
+    value = _props$value === void 0 ? '' : _props$value,
+    status = props.status,
+    _onChange = props.onChange;
+  var style = {
+    border: "solid 1px ".concat(status === 'error' ? 'red' : '#ccc'),
+    outline: 'none'
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({}, props), {}, {
+    style: style,
+    value: value,
+    onChange: function onChange(e) {
+      _onChange(e.target.value);
+    }
+  }));
+}
+var rule = (0, _.Rule)();
+var App = function App() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Form, {
+    style: {
+      maxWidth: 500
+    },
+    onSubmit: function onSubmit(d) {
+      return console.log(d);
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
+      required: true,
+      label: "Email",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Field, {
+        name: "email",
+        defaultValue: "test@email.com",
+        rules: [rule.required('不能为空'), rule.email('格式不正确')],
+        children: function children(_ref) {
+          var value = _ref.value,
+            onChange = _ref.onChange,
+            status = _ref.status;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(Input, {
+            value: value || '',
+            status: status,
+            onChange: onChange,
+            type: "text"
+          });
+        }
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
+      label: "Password",
+      tip: "Use at least one letter, one numeral, and seven characters.",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Field, {
+        name: "password",
+        rules: [rule.required, rule.min(7, '不能小于7个字符'), rule.regExp(/^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$/, '格式不正确')],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Input, {
+          type: "password"
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
+      label: "",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Submit, {
+        children: "Submit"
+      })
+    })]
+  });
+};
+var _default = App;
+exports.default = _default;

package/esm/form/__example__/010-fieldset-object.d.ts

@@ -0,0 +1,9 @@
+/**
+ * cn - FieldSet (Object)
+ *    -- Form.FieldSet 可以处理对象类型的字段
+ * en - FieldSet (Object)
+ *    -- Form.FieldSet handles fields of object type
+ */
+import React from 'react';
+declare const App: React.FC;
+export default App;

package/esm/form/__example__/010-fieldset-object.js

@@ -0,0 +1,94 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+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; }
+/**
+ * cn - FieldSet (Object)
+ *    -- Form.FieldSet 可以处理对象类型的字段
+ * en - FieldSet (Object)
+ *    -- Form.FieldSet handles fields of object type
+ */
+
+var App = function App() {
+  var _useState = (0, _react.useState)({
+      account: {
+        name: {
+          firstName: 'James',
+          lastName: 'Potter'
+        },
+        age: 20
+      }
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var handleChange = function handleChange(v) {
+    setValue(v);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Form, {
+    value: value,
+    labelWidth: 60,
+    onChange: handleChange,
+    onSubmit: function onSubmit(data) {
+      console.log(data);
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
+      label: "Account",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Form.FieldSet, {
+        name: "account",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
+          label: "Name",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.FieldSet, {
+            name: "name",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Input.Group, {
+              style: {
+                width: 300
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
+                name: "firstName",
+                placeholder: "First Name"
+              }), "-", /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
+                name: "lastName",
+                placeholder: "Last Name"
+              })]
+            })
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
+          label: "Age",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
+            name: "age",
+            digits: 0,
+            title: "age",
+            type: "number",
+            defaultValue: "18",
+            style: {
+              width: 100
+            }
+          })
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Form.Item, {
+      label: "",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Submit, {
+        children: "Submit"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Reset, {
+        children: "Reset"
+      })]
+    })]
+  });
+};
+var _default = App;
+exports.default = _default;

package/esm/form/__example__/011-fieldset-loop.d.ts

@@ -0,0 +1,9 @@
+/**
+ * cn - FieldSet (Loop)
+ *    -- FieldSet children 为函数时，根据 name 从 Form 中获取 value （类型为 array），遍历这个 value 生成一组子组件。
+ * en - FieldSet (Loop)
+ *    -- When FieldSet's children is a function, takes the value (type is array) from the form by the name property, and generate a set of subcomponents.
+ */
+import React from 'react';
+declare const App: React.FC;
+export default App;

package/esm/form/__example__/011-fieldset-loop.js

@@ -0,0 +1,182 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+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; }
+/**
+ * cn - FieldSet (Loop)
+ *    -- FieldSet children 为函数时，根据 name 从 Form 中获取 value （类型为 array），遍历这个 value 生成一组子组件。
+ * en - FieldSet (Loop)
+ *    -- When FieldSet's children is a function, takes the value (type is array) from the form by the name property, and generate a set of subcomponents.
+ */
+
+var rules = (0, _.Rule)();
+var add = /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+    clipPath: "url(#clip0_2710_88158)",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M8.00008 0.666626C12.0502 0.666626 15.3334 3.94987 15.3334 7.99996C15.3334 12.05 12.0502 15.3333 8.00008 15.3333C3.94999 15.3333 0.666748 12.05 0.666748 7.99996C0.666748 3.94987 3.94999 0.666626 8.00008 0.666626ZM8.00008 4.66663C7.63189 4.66663 7.33341 4.9651 7.33341 5.33329V7.33329H5.33341C4.99152 7.33329 4.70974 7.59065 4.67123 7.92221L4.66675 7.99996C4.66675 8.36815 4.96522 8.66663 5.33341 8.66663H7.33341V10.6666C7.33341 11.0085 7.59077 11.2903 7.92233 11.3288L8.00008 11.3333C8.36827 11.3333 8.66675 11.0348 8.66675 10.6666V8.66663H10.6667C11.0086 8.66663 11.2904 8.40927 11.3289 8.07771L11.3334 7.99996C11.3334 7.63177 11.0349 7.33329 10.6667 7.33329H8.66675V5.33329C8.66675 4.9914 8.40939 4.70962 8.07783 4.67111L8.00008 4.66663Z",
+      fill: "#197AFA"
+    })
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("defs", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("clipPath", {
+      id: "clip0_2710_88158",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+        width: "16",
+        height: "16",
+        fill: "white"
+      })
+    })
+  })]
+});
+var cancel = /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+  width: "32",
+  height: "34",
+  viewBox: "0 0 32 34",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+    clipPath: "url(#clip0_2710_88188)",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M16.0001 9.66663C11.95 9.66663 8.66675 12.9499 8.66675 17C8.66675 21.05 11.95 24.3333 16.0001 24.3333C20.0502 24.3333 23.3334 21.05 23.3334 17C23.3334 12.9499 20.0502 9.66663 16.0001 9.66663ZM19.3334 17C19.3334 17.3681 19.0349 17.6666 18.6667 17.6666H13.3334C12.9652 17.6666 12.6667 17.3681 12.6667 17C12.6667 16.6318 12.9652 16.3333 13.3334 16.3333H18.6667C19.0349 16.3333 19.3334 16.6318 19.3334 17Z",
+      fill: "#EB4242"
+    })
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("defs", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("clipPath", {
+      id: "clip0_2710_88188",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+        width: "16",
+        height: "16",
+        fill: "white",
+        transform: "translate(8 9)"
+      })
+    })
+  })]
+});
+var App = function App() {
+  var _useState = (0, _react.useState)({}),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var handleChange = function handleChange(v) {
+    setValue(v);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Form, {
+    value: value,
+    labelWidth: 60,
+    onChange: handleChange,
+    onSubmit: function onSubmit(data) {
+      console.log(data);
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
+      label: "Name",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
+        name: "name",
+        defaultValue: "Harry Potter"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
+      label: "age",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
+        type: "number",
+        name: "age",
+        defaultValue: "20"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
+      label: "Friends",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.FieldSet, {
+        name: "friends",
+        empty: function empty(insert) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            type: 'button',
+            onClick: function onClick() {
+              return insert({
+                name: ''
+              });
+            },
+            children: "Add new friends"
+          });
+        },
+        defaultValue: [{
+          name: 'Hermione Granger',
+          age: '16'
+        }, {}],
+        children: function children(_ref) {
+          var onAppend = _ref.onAppend,
+            onRemove = _ref.onRemove;
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Form.Item, {
+            style: {
+              display: 'flex',
+              alignItems: 'center',
+              marginBottom: 12
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
+              name: "name",
+              placeholder: "Name",
+              title: "Friend name",
+              rules: [rules.required('Name is required')],
+              style: {
+                width: 180,
+                marginInlineEnd: 8
+              }
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
+              name: "age",
+              type: "number",
+              placeholder: "Age",
+              rules: [rules.required('Age is required')],
+              title: "Friend age",
+              style: {
+                width: 60
+              }
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+              style: {
+                margin: '0 12px',
+                lineHeight: 1,
+                cursor: 'pointer'
+              },
+              onClick: function onClick() {
+                return onAppend({
+                  name: '',
+                  age: '16'
+                });
+              },
+              children: add
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+              style: {
+                lineHeight: 1,
+                cursor: 'pointer'
+              },
+              onClick: onRemove,
+              children: cancel
+            })]
+          });
+        }
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Form.Item, {
+      label: "",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Submit, {
+        children: "Submit"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Reset, {
+        children: "Reset"
+      })]
+    })]
+  });
+};
+var _default = App;
+exports.default = _default;

package/esm/form/__example__/012-array.d.ts

@@ -0,0 +1,9 @@
+/**
+ * cn - 数组 name
+ *    -- 数据为数组类型的组件，name 可以传入一个相应的数组，来分别处理数组内的单个数据
+ * en - 数组 name
+ *    -- When the data is an array type, the name can pass in a corresponding array to process the single data in the array.
+ */
+import React from 'react';
+declare const App: React.FC;
+export default App;