shineout 3.0.0-alpha.2 → 3.0.0-alpha.4

package/cjs/form/__example__/006-validate-01.js

@@ -89,7 +89,8 @@ var App = function App() {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Input, {
         name: "email",
         title: "Email",
-        rules: [rules.required, rules.email]
+        rules: [rules.required, rules.email],
+        clearable: true
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Form.Item, {
       required: true,
@@ -97,7 +98,8 @@ var App = function App() {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Input, {
         name: "name",
         title: "Name",
-        rules: [rules.required, rules.isExist]
+        rules: [rules.required, rules.isExist],
+        clearable: true
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Form.Item, {
       required: true,
@@ -107,6 +109,7 @@ var App = function App() {
         name: "password",
         title: "Password",
         type: "password",
+        clearable: true,
         rules: [rules.required, rules.range(6, 20), rules.password]
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Form.Item, {
@@ -120,6 +123,7 @@ var App = function App() {
           width: 100
         },
         type: "integer",
+        clearable: true,
         rules: [rules.required, rules.integer, rules.range(18, 60)]
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Form.Item, {
@@ -128,7 +132,8 @@ var App = function App() {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Input, {
         name: "tel",
         title: "Tel",
-        rules: [rules.required, rules.regExp('^[\\d\\s ().-]+$')]
+        rules: [rules.required, rules.regExp('^[\\d\\s ().-]+$')],
+        clearable: true
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Form.Item, {
       required: true,
@@ -136,7 +141,8 @@ var App = function App() {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Input, {
         name: "IPv4",
         title: "IP",
-        rules: [rules.required, rules.ipv4]
+        rules: [rules.required, rules.ipv4],
+        clearable: true
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Form.Item, {
       required: true,
@@ -149,10 +155,29 @@ var App = function App() {
         },
         data: ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet'],
         defaultValue: [],
+        renderItem: function renderItem(d) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            style: {
+              width: 40
+            },
+            children: d
+          });
+        },
+        style: {
+          display: 'flex',
+          gap: 12,
+          flexWrap: 'wrap',
+          justifyContent: 'space-between',
+          marginTop: 4
+        },
         rules: [rules.required('At least select one favorite color'), rules.min(2), rules.max(3)]
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_2.Form.Item, {
       label: "",
+      style: {
+        marginTop: 32,
+        marginBottom: 0
+      },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Form.Button, {
         children: "Sumbit"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Form.Reset, {

package/cjs/form/__example__/006-validate-02-bind.js

@@ -68,6 +68,10 @@ var _default = function _default() {
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_2.Form.Item, {
         label: "",
+        style: {
+          marginTop: 32,
+          marginBottom: 0
+        },
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Form.Submit, {
           children: "\u63D0\u4EA4"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Form.Reset, {

package/cjs/form/__example__/006-validate-03-server.js

@@ -57,7 +57,8 @@ var App = function App() {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
         name: "email",
         title: "Email",
-        rules: [rules.required, rules.email]
+        rules: [rules.required, rules.email],
+        clearable: true
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
       required: true,
@@ -65,7 +66,8 @@ var App = function App() {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
         name: "name",
         title: "Name",
-        rules: [rules.required]
+        rules: [rules.required],
+        clearable: true
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
       required: true,
@@ -75,10 +77,15 @@ var App = function App() {
         name: "password",
         title: "Password",
         type: "password",
+        clearable: true,
         rules: [rules.required, rules.range(6, 20)]
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Form.Item, {
       label: "",
+      style: {
+        marginTop: 32,
+        marginBottom: 0
+      },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Button, {
         loading: loading,
         children: "Sumbit"

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

@@ -77,7 +77,8 @@ var App = function App() {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Input, {
         name: "email",
         title: "Email",
-        rules: [rules.required, rules.email]
+        rules: [rules.required, rules.email],
+        clearable: true
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Form.Item, {
       required: true,
@@ -85,7 +86,8 @@ var App = function App() {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Input, {
         name: "name",
         title: "Name",
-        rules: [rules.required, rules.isExist]
+        rules: [rules.required, rules.isExist],
+        clearable: true
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Form.Item, {
       required: true,
@@ -95,6 +97,7 @@ var App = function App() {
         name: "password",
         title: "Password",
         type: "password",
+        clearable: true,
         rules: [rules.required, rules.range(6, 20), rules.password]
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Form.Item, {
@@ -108,6 +111,7 @@ var App = function App() {
           width: 100
         },
         type: "integer",
+        clearable: true,
         rules: [rules.required, rules.integer, rules.range(18, 60)]
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Form.Item, {
@@ -116,7 +120,8 @@ var App = function App() {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Input, {
         name: "tel",
         title: "Tel",
-        rules: [rules.required, rules.regExp('^[\\d\\s ().-]+$')]
+        rules: [rules.required, rules.regExp('^[\\d\\s ().-]+$')],
+        clearable: true
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Form.Item, {
       required: true,
@@ -124,7 +129,8 @@ var App = function App() {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Input, {
         name: "IPv4",
         title: "IP",
-        rules: [rules.required, rules.ipv4]
+        rules: [rules.required, rules.ipv4],
+        clearable: true
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Form.Item, {
       required: true,
@@ -141,6 +147,10 @@ var App = function App() {
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_2.Form.Item, {
       label: "",
+      style: {
+        marginTop: 32,
+        marginBottom: 0
+      },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Form.Button, {
         children: "Sumbit"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Form.Reset, {

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

@@ -21,16 +21,20 @@ var App = function App() {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
       label: "Email",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
-        name: "email"
+        name: "email",
+        clearable: true
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
       label: "Email2",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {})
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
+        clearable: true
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
       label: "Password",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
         name: "password",
-        type: "password"
+        type: "password",
+        clearable: true
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
       label: "Name",
@@ -41,10 +45,12 @@ var App = function App() {
         disabled: true,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
           name: "firstName",
-          placeholder: "First Name"
+          placeholder: "First Name",
+          clearable: true
         }), "-", /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
           name: "lastName",
-          placeholder: "Last Name"
+          placeholder: "Last Name",
+          clearable: true
         })]
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
@@ -56,7 +62,8 @@ var App = function App() {
         name: "age",
         type: "number",
         digits: 0,
-        defaultValue: "0"
+        defaultValue: "0",
+        clearable: true
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
       label: "address",
@@ -67,6 +74,10 @@ var App = function App() {
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Form.Item, {
       label: "",
+      style: {
+        marginTop: 32,
+        marginBottom: 0
+      },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Submit, {
         loading: true,
         children: "Submit"

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

@@ -55,7 +55,8 @@ var App = function App() {
             value: value || '',
             status: status,
             onChange: onChange,
-            type: "text"
+            type: "text",
+            clearable: true
           });
         }
       })
@@ -66,11 +67,16 @@ var App = function App() {
         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"
+          type: "password",
+          clearable: true
         })
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
       label: "",
+      style: {
+        marginTop: 32,
+        marginBottom: 0
+      },
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Submit, {
         children: "Submit"
       })

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

@@ -59,10 +59,12 @@ var App = function App() {
               },
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
                 name: "firstName",
-                placeholder: "First Name"
+                placeholder: "First Name",
+                clearable: true
               }), "-", /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
                 name: "lastName",
-                placeholder: "Last Name"
+                placeholder: "Last Name",
+                clearable: true
               })]
             })
           })
@@ -76,12 +78,17 @@ var App = function App() {
             defaultValue: "18",
             style: {
               width: 100
-            }
+            },
+            clearable: true
           })
         })]
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Form.Item, {
       label: "",
+      style: {
+        marginTop: 32,
+        marginBottom: 0
+      },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Submit, {
         children: "Submit"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Reset, {

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

@@ -89,14 +89,16 @@ var App = function App() {
       label: "Name",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
         name: "name",
-        defaultValue: "Harry Potter"
+        defaultValue: "Harry Potter",
+        clearable: true
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
       label: "age",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
         type: "number",
         name: "age",
-        defaultValue: "20"
+        defaultValue: "20",
+        clearable: true
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
       label: "Friends",
@@ -134,7 +136,8 @@ var App = function App() {
               style: {
                 width: 180,
                 marginInlineEnd: 8
-              }
+              },
+              clearable: true
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
               name: "age",
               type: "number",
@@ -143,7 +146,8 @@ var App = function App() {
               title: "Friend age",
               style: {
                 width: 60
-              }
+              },
+              clearable: true
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
               style: {
                 margin: '0 12px',
@@ -170,6 +174,10 @@ var App = function App() {
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Form.Item, {
       label: "",
+      style: {
+        marginTop: 32,
+        marginBottom: 0
+      },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Submit, {
         children: "Submit"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Reset, {

package/cjs/form/__example__/012-array.js

@@ -39,14 +39,25 @@ var NameInput = function NameInput(props) {
     onChange(newValue);
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center'
+    },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
       value: value[0],
       width: 120,
-      onChange: handleFirstName
-    }), "-", /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
+      onChange: handleFirstName,
+      clearable: true
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      style: {
+        margin: '0 4px'
+      },
+      children: "-"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
       value: value[1],
       width: 120,
-      onChange: handleLastName
+      onChange: handleLastName,
+      clearable: true
     })]
   });
 };
@@ -83,10 +94,15 @@ var App = function App() {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.DatePicker, {
         range: true,
         rules: [rule.required],
-        name: ['date.startDate', 'date.endDate']
+        name: ['date.startDate', 'date.endDate'],
+        clearable: true
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
       label: "",
+      style: {
+        marginTop: 32,
+        marginBottom: 0
+      },
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Submit, {
         children: "Submit"
       })

package/cjs/form/__example__/013-flow.js

@@ -29,14 +29,16 @@ var App = function App() {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
         name: "firstName",
         delay: 0,
-        defaultValue: "Harry"
+        defaultValue: "Harry",
+        clearable: true
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
       label: "Last Name",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
         name: "lastName",
         delay: 0,
-        defaultValue: "Potter"
+        defaultValue: "Potter",
+        clearable: true
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
       label: "Full Name",
@@ -52,7 +54,8 @@ var App = function App() {
       label: "Password",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
         name: "password",
-        type: "password"
+        type: "password",
+        clearable: true
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Form.Item, {
       label: "",
@@ -94,6 +97,7 @@ var App = function App() {
             style: {
               width: 100
             },
+            clearable: true,
             rules: [rule.range(18, 60)]
           })
         });
@@ -130,6 +134,10 @@ var App = function App() {
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
       label: "",
+      style: {
+        marginTop: 32,
+        marginBottom: 0
+      },
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Button, {
         children: "Sumbit"
       })

package/cjs/gap/__example__/01-base.js

@@ -25,9 +25,9 @@ var App = function App() {
     children: Array.from({
       length: 10
     }).map(function (_, i) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_2.Button, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Button, {
         type: "primary",
-        children: ["Item", i]
+        children: "Button"
       }, i);
     })
   });

package/cjs/gap/__example__/02-custom.js

@@ -39,7 +39,8 @@ var App = function App() {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       style: {
         display: 'flex',
-        alignItems: 'center'
+        alignItems: 'center',
+        marginBottom: 16
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         style: {
@@ -51,13 +52,15 @@ var App = function App() {
           flex: 1
         },
         scale: [0, 100],
+        formatScale: false,
         defaultValue: column,
         onChange: setColumn
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       style: {
         display: 'flex',
-        alignItems: 'center'
+        alignItems: 'center',
+        marginBottom: 24
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         style: {
@@ -69,6 +72,7 @@ var App = function App() {
           flex: 1
         },
         scale: [0, 100],
+        formatScale: false,
         defaultValue: row,
         onChange: setRow
       })]
@@ -85,9 +89,9 @@ var App = function App() {
         children: Array.from({
           length: 10
         }).map(function (_, i) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_2.Button, {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Button, {
             type: "primary",
-            children: ["Item", i]
+            children: "Button"
           }, i);
         })
       })

package/cjs/gap/__example__/03-vertical.js

@@ -27,9 +27,9 @@ var App = function App() {
     children: Array.from({
       length: 4
     }).map(function (_, i) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_2.Button, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Button, {
         type: "primary",
-        children: ["Item", i]
+        children: "Button"
       }, i);
     })
   });

package/cjs/gap/__example__/04-align.js

@@ -36,7 +36,7 @@ var App = function App() {
       defaultValue: "flex-start"
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Gap, {
       style: {
-        width: 190,
+        width: 160,
         marginTop: 16,
         border: '1px solid #e8ebf0',
         borderRadius: '4px',
@@ -45,10 +45,10 @@ var App = function App() {
       },
       row: 20,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        children: "Item1"
+        children: "start"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
         type: "primary",
-        children: "Item2"
+        children: "Button"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         style: {
           fontSize: 14,
@@ -58,7 +58,7 @@ var App = function App() {
           borderRadius: '4px',
           padding: '12px'
         },
-        children: "Item3"
+        children: "end"
       })]
     })]
   });

package/cjs/grid/__example__/01-base.d.ts

@@ -0,0 +1,9 @@
+/**
+ * cn - 任意等分
+ *    -- Grid 的栅格体系是动态生成，可以实现任意等份
+ * en - Arbitrary
+ *    -- Grid system is dynamic generated and can be any number.
+ */
+import React from 'react';
+declare const App: React.FC;
+export default App;

package/cjs/grid/__example__/01-base.js

@@ -0,0 +1,73 @@
+"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;
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.array.from.js");
+require("core-js/modules/es.array.concat.js");
+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 - 任意等分
+ *    -- Grid 的栅格体系是动态生成，可以实现任意等份
+ * en - Arbitrary
+ *    -- Grid system is dynamic generated and can be any number.
+ */
+
+var gridStyle = {
+  color: '#fff',
+  paddingLeft: 8,
+  background: '#197afa',
+  fontSize: 14
+};
+var style = {
+  background: '#e8ebf0',
+  marginBottom: 4,
+  lineHeight: '30px'
+};
+var App = function App() {
+  var _useState = (0, _react.useState)(5),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    count = _useState2[0],
+    setCount = _useState2[1];
+  var handleCountChange = function handleCountChange(v) {
+    setCount(v);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Slider, {
+      step: 0,
+      value: count,
+      formatValue: false,
+      onChange: handleCountChange,
+      scale: [1, 2, 3, 5, 8, 13, 21, 34, 55]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        height: 20
+      }
+    }), Array.from({
+      length: count
+    }).map(function (_n, i) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: style,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Grid, {
+          width: (i + 1) / count,
+          style: gridStyle,
+          children: "".concat(i + 1, "/").concat(count)
+        })
+      }, i);
+    })]
+  });
+};
+var _default = App;
+exports.default = _default;

package/cjs/grid/__example__/02-offset.d.ts

@@ -0,0 +1,9 @@
+/**
+ * cn - 偏移
+ *    -- offset 属性可以设置偏移，取值方式和宽度相同
+ * en - Offset
+ *    -- The offset property set the offset in the same way as the width.
+ */
+import React from 'react';
+declare const App: React.FC;
+export default App;