shineout 3.0.0-alpha.2 → 3.0.0-alpha.3

package/cjs/descriptions/__example__/05-arrangement.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 不同排列模式
+ *    -- 可以通过tableLayout='fixed'设置等宽，通过layout设置不同的排列方式，设置border是否显示边框
+ * en - Arrangement
+ *    -- You can set the same width by tableLayout='fixed', and set different arrangement by layout, set border to show border
+ */
+
+var data = [{
+  label: 'Name',
+  value: 'Mai Mai'
+}, {
+  label: 'Residence',
+  value: 'Beijing'
+}, {
+  label: 'Address',
+  value: 'Yingdu Building'
+}, {
+  label: 'Mobile',
+  value: '187-2323-9834'
+}, {
+  label: 'Hometown',
+  value: 'Beijing'
+}];
+var layouts = ['horizontal', 'vertical', 'inlineHorizontal', 'inlineVertical'];
+var tableLayouts = ['auto', 'fixed'];
+var borders = [{
+  label: 'no border',
+  value: false
+}, {
+  label: 'border',
+  value: true
+}];
+var _default = function _default() {
+  var _React$useState = _react.default.useState('horizontal'),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    layout = _React$useState2[0],
+    setLayout = _React$useState2[1];
+  var _React$useState3 = _react.default.useState('auto'),
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    tableLayout = _React$useState4[0],
+    setTableLayout = _React$useState4[1];
+  var _React$useState5 = _react.default.useState(false),
+    _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
+    border = _React$useState6[0],
+    setBorder = _React$useState6[1];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Radio.Group, {
+      data: layouts,
+      value: layout,
+      onChange: setLayout,
+      keygen: true,
+      style: {
+        marginBottom: 24
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Radio.Group, {
+      data: tableLayouts,
+      value: tableLayout,
+      onChange: setTableLayout,
+      keygen: true,
+      style: {
+        marginBottom: 24
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Radio.Group, {
+      data: borders,
+      format: 'value',
+      renderItem: 'label',
+      value: border,
+      onChange: setBorder,
+      keygen: 'label',
+      style: {
+        marginBottom: 24
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Descriptions, {
+      items: data,
+      title: "User Info",
+      colon: " :",
+      layout: layout,
+      tableLayout: tableLayout,
+      border: border,
+      labelStyle: {
+        marginBottom: layout === 'inlineVertical' ? '2px' : '',
+        paddingBottom: layout === 'vertical' ? '2px' : ''
+      }
+    })]
+  });
+};
+exports.default = _default;

package/cjs/descriptions/__example__/06-size.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/cjs/descriptions/__example__/06-size.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 不同尺寸
+ *    -- 展示不同尺寸下的描述列表
+ * en - Different Size
+ *    -- Show Descriptions of different sizes
+ */
+
+var data = [{
+  label: 'Name',
+  value: 'Mai Mai'
+}, {
+  label: 'Residence',
+  value: 'Beijing'
+}, {
+  label: 'Address',
+  value: 'Yingdu Building,Zhichun Road,Beijing'
+}, {
+  label: 'Mobile',
+  value: '187-2323-9834'
+}, {
+  label: 'Hometown',
+  value: 'Beijing'
+}];
+var Size = ['small', 'default', 'large'];
+var _default = function _default() {
+  var _React$useState = _react.default.useState('default'),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    size = _React$useState2[0],
+    setSize = _React$useState2[1];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Radio.Group, {
+      data: Size,
+      value: size,
+      onChange: setSize,
+      keygen: true,
+      style: {
+        marginBottom: 24
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Descriptions, {
+      items: data,
+      title: "User Info",
+      colon: " :",
+      style: {
+        marginBottom: '20px'
+      },
+      size: size
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Descriptions, {
+      items: data,
+      title: "User Info",
+      layout: "horizontal",
+      labelStyle: {
+        textAlign: 'right'
+      },
+      size: size,
+      border: true
+    })]
+  });
+};
+exports.default = _default;

package/cjs/descriptions/__example__/07-responsive.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/cjs/descriptions/__example__/07-responsive.js

@@ -0,0 +1,55 @@
+"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 - 响应式排列
+ *    -- 支持响应式排列
+ * en - Responsive
+ *    -- Responsive arrangement
+ */
+
+var data = [{
+  label: 'Name',
+  value: 'Mai Mai'
+}, {
+  label: 'Residence',
+  value: 'Beijing'
+}, {
+  label: 'Address',
+  value: 'Yingdu Building,Zhichun Road,Beijing'
+}, {
+  label: 'Mobile',
+  value: '187-2323-9834'
+}, {
+  label: 'Hometown',
+  value: 'Beijing'
+}];
+var _default = function _default() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Descriptions, {
+      items: data,
+      title: "User Info",
+      border: true,
+      layout: "horizontal",
+      labelStyle: {
+        textAlign: 'right'
+      },
+      column: {
+        xs: 1,
+        sm: 2,
+        md: 2,
+        lg: 2,
+        xl: 3,
+        xxl: 4
+      }
+    })
+  });
+};
+exports.default = _default;

package/cjs/descriptions/descriptions.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { DescriptionsProps } from './descriptions.type';
+declare const Descriptions: (props: DescriptionsProps) => JSX.Element;
+export default Descriptions;

package/cjs/descriptions/descriptions.js

@@ -0,0 +1,26 @@
+"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 _base = require("@sheinx/base");
+var _shineoutStyle = require("@sheinx/shineout-style");
+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; }
+var jssStyle = {
+  descriptions: _shineoutStyle.useDescriptionsStyle
+};
+var Descriptions = function Descriptions(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.Descriptions, _objectSpread({
+    jssStyle: jssStyle
+  }, props));
+};
+var _default = Descriptions;
+exports.default = _default;

package/cjs/descriptions/descriptions.type.d.ts

@@ -0,0 +1,2 @@
+import { DescriptionsProps as UnStyledDescriptionsProps } from '@sheinx/base';
+export declare type DescriptionsProps = Omit<UnStyledDescriptionsProps, 'jssStyle'>;

package/cjs/descriptions/descriptions.type.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/cjs/descriptions/index.d.ts

@@ -0,0 +1,7 @@
+import Descriptions from './descriptions';
+declare type RefDescriptions = typeof Descriptions;
+export interface DescriptionsComponent extends RefDescriptions {
+    displayName: string;
+}
+declare const DescriptionsComp: DescriptionsComponent;
+export default DescriptionsComp;

package/cjs/descriptions/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _descriptions = _interopRequireDefault(require("./descriptions"));
+var DescriptionsComp = _descriptions.default;
+DescriptionsComp.displayName = 'ShineoutDescriptions';
+var _default = DescriptionsComp;
+exports.default = _default;

package/cjs/descriptions/interface.d.ts

@@ -0,0 +1 @@
+export type { DescriptionsProps as Props } from './descriptions.type';

package/cjs/descriptions/interface.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/cjs/divider/__example__/01-02-base-dashed.d.ts

@@ -0,0 +1,9 @@
+/**
+ * cn - 虚线分割
+ *    --使用 `type`="dashed" 设置为虚线分割线。
+ * en - Dashed
+ *    --Use type="dashed" make it dashed.
+ */
+import React from 'react';
+declare const App: React.FC;
+export default App;

package/cjs/divider/__example__/01-02-base-dashed.js

@@ -0,0 +1,33 @@
+"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 - 虚线分割
+ *    --使用 `type`="dashed" 设置为虚线分割线。
+ * en - Dashed
+ *    --Use type="dashed" make it dashed.
+ */
+
+var App = function App() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      fontSize: 12
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      children: "A design is a plan or specification for the construction of an object."
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Divider, {
+      type: "dashed"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      children: "A design is a plan or specification for the construction of an object."
+    })]
+  });
+};
+var _default = App;
+exports.default = _default;

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

@@ -15,22 +15,27 @@ var _jsxRuntime = require("react/jsx-runtime");
  *    --Use type="vertical" make it vertical.
  */
 
+var inlineStyle = {
+  display: 'inline-block',
+  lineHeight: '22px',
+  fontSize: 14
+};
 var App = function App() {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    style: {
-      fontSize: 12
-    },
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      children: "Left"
+      style: inlineStyle,
+      children: "Item 1"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Divider, {
       mode: "vertical",
       children: "H"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      children: "Center"
+      style: inlineStyle,
+      children: "Item 2"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Divider, {
       mode: "vertical"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      children: "Right"
+      style: inlineStyle,
+      children: "Item 3"
     })]
   });
 };

package/cjs/drawer/__example__/05-close.js

@@ -59,7 +59,7 @@ var App = function App() {
       style: {
         display: 'flex',
         alignItems: 'center',
-        marginBlock: 24
+        marginBottom: 24
       },
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Radio.Group, {
         data: list,

package/cjs/dropdown/__example__/001-base.js

@@ -37,11 +37,11 @@ var data = [{
 var App = function App() {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Dropdown, {
-      placeholder: "Dropdown",
+      placeholder: "Click me",
       data: data,
       onClick: console.log
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Dropdown, {
-      placeholder: "Dropdown",
+      placeholder: "Click me",
       data: data,
       disabled: true
     })]

package/cjs/dropdown/__example__/011-split.d.ts

@@ -1,5 +1,5 @@
 /**
- * cn - 组合
+ * cn - 组合下拉
  *    -- 在 Button.Group 中组合使用，通常用于隐藏一组按钮中不太常用的选项
  * en - Group
  *    -- Dropdown can be combined with Button used in Button.Group.

package/cjs/dropdown/__example__/011-split.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _ = require("../..");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
- * cn - 组合
+ * cn - 组合下拉
  *    -- 在 Button.Group 中组合使用，通常用于隐藏一组按钮中不太常用的选项
  * en - Group
  *    -- Dropdown can be combined with Button used in Button.Group.
@@ -43,19 +43,15 @@ var App = function App() {
         }
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Button.Group, {
-      outline: true,
       type: 'secondary',
       style: {
         display: 'inline-block'
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
-        disabled: true,
         children: "Option"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
-        disabled: true,
         children: "Option"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Dropdown, {
-        disabled: true,
         data: menu,
         position: "bottom-right",
         onClick: function onClick(data) {

package/cjs/editable-area/__example__/03-container.js

@@ -23,7 +23,7 @@ var App = function App() {
     id: "popup-target",
     style: {
       height: 100,
-      overflow: 'auto',
+      overflowY: 'auto',
       position: 'relative',
       padding: 10,
       marginLeft: -10

package/cjs/form/__example__/001-base.js

@@ -43,13 +43,15 @@ var _default = function _default() {
         label: "Name",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
           name: 'name',
-          placeholder: "please input name"
+          placeholder: "please input name",
+          clearable: true
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
         label: "Password",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
           name: 'password',
-          placeholder: "please input password"
+          placeholder: "please input password",
+          clearable: true
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
         label: "Email",
@@ -76,7 +78,8 @@ var _default = function _default() {
         label: "Enrollment date",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.DatePicker, {
           name: "date",
-          placeholder: 'please select date'
+          placeholder: 'please select date',
+          clearable: true
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
         label: "Score",
@@ -91,6 +94,7 @@ var _default = function _default() {
           name: "file",
           htmlName: "file",
           recoverAble: true,
+          leftHandler: true,
           removeConfirm: "Are you sure to delete it ?",
           limit: 3,
           onSuccess: function onSuccess(_res, filem, data) {
@@ -104,6 +108,10 @@ var _default = function _default() {
         })
       }), /*#__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__/002-control.js

@@ -91,12 +91,14 @@ var App = function App() {
         rules: [{
           required: true,
           message: 'name is required'
-        }]
+        }],
+        clearable: true
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
       label: "Password",
       required: true,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input.Password, {
+        clearable: true,
         name: "password",
         rules: [{
           required: true,
@@ -105,6 +107,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__/003-label-1.js

@@ -42,16 +42,21 @@ var _default = function _default() {
       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: "Password",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
           name: "password",
-          type: "password"
+          type: "password",
+          clearable: true
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
         label: "",
+        style: {
+          marginTop: align === 'top' ? -10 : 32
+        },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Submit, {
           children: "Submit"
         })

package/cjs/form/__example__/003-label-2.js

@@ -42,13 +42,15 @@ var _default = function _default() {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
         label: "Your Email",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
-          name: "email"
+          name: "email",
+          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: "Your Address",
@@ -57,6 +59,10 @@ var _default = function _default() {
         })
       }), /*#__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__/004-inline.js

@@ -21,15 +21,23 @@ var App = function App() {
     labelWidth: 65,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
       label: "Email",
+      style: {
+        marginBottom: 0
+      },
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
-        name: "email"
+        name: "email",
+        clearable: true
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
       label: "password",
+      style: {
+        marginBottom: 0
+      },
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
         name: "password",
         placeholder: "Password",
-        type: "password"
+        type: "password",
+        clearable: true
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Submit, {
       children: "Submit"

package/cjs/form/__example__/005-tip-01.js

@@ -24,14 +24,19 @@ var App = function App() {
       label: "Email",
       tip: "Email or nickname or phonenumber",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
-        name: "email"
+        name: "email",
+        clearable: true
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Form.Item, {
       label: "Password",
       tip: "Use at least one letter, one numeral, and seven characters.",
+      style: {
+        marginBottom: 0
+      },
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input, {
         name: "password",
-        type: "password"
+        type: "password",
+        clearable: true
       })
     })]
   });