shineout 3.4.0 → 3.4.2-beta.1

package/README-zh_CN.md

@@ -14,49 +14,52 @@
   <img src="https://img.shields.io/badge/React-%3E%3D16.8.0-green.svg?style=flat-square">
 </p>
 
-## 特性
+## ✨ 特性
 
  - 精巧且友好的 API
  - 开箱即用的高性能 React 组件
  - 接口永远向下兼容
  - 灵活的主题配置
 
-## 依赖
+## 🛠️ 依赖
 
 ```
 react >= 16.8.0
 react-dom >= 16.8.0
 ```
 
-## 浏览器支持
+## 🖥 浏览器支持
 
 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
 | --------- | --------- | --------- | --------- | --------- | --------- |
 | Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions |
 
-## 安装
+## 📦 安装
 
 ```bash
-yarn add shineout
+npm install shineout
 ```
-// or
+
 ```bash
-npm install shineout
+yarn add shineout
 ```
 
-## CDN
+```bash
+pnpm add shineout
+```
+## 🔗 CDN
 
 ```html
 <script crossorigin src="https://unpkg.com/shineout/dist/shineout.min.js"></script>
 ```
 
-## 使用
+## 🔨 使用
 
-```javascript
+```tsx
 import { Button } from 'shineout'
 
-<Button />
+<Button>Click me</Button>
 ```
 
-## 开源许可
+## 📄 开源许可
 [MIT](./LICENSE)

package/README.md

@@ -14,52 +14,54 @@ English | [简体中文](./README-zh_CN.md)
   <img src="https://img.shields.io/badge/React-%3E%3D16.8.0-green.svg?style=flat-square">
 </p>
 
-## Features
+## ✨ Features
 
 - A concise and friendly API
 - A set of high-performance React components out of the box.
 - Always backward compatible
 - Flexible theme customization
 
-## Requirements
+## 🛠️ Requirements
 
 ```
 react >= 16.8.0
 react-dom >= 16.8.0
 ```
 
-## Browsers support
+## 🖥 Browsers support
 
 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
 | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 |  Edge                                                                                                                                                                                                | last 2 versions                                                                                                                                                                                                   | last 2 versions                                                                                                                                                                                               | last 2 versions                                                                                                                                                                                               | last 2 versions                                                                                                                                                                                           | last 2 versions                                                                                                                                                                                                       |
 
-## Installation
+## 📦 Installation
 
 ```bash
-yarn add shineout
+npm install shineout
 ```
 
-// or
+```bash
+yarn add shineout
+```
 
 ```bash
-npm install shineout
+pnpm add shineout
 ```
 
-## CDN
+## 🔗 CDN
 
 ```html
 <script crossorigin src="https://unpkg.com/shineout/dist/shineout.min.js"></script>
 ```
 
-## Usage
+## 🔨 Usage
 
-```javascript
+```tsx
 import { Button } from 'shineout'
 
-;<Button />
+<Button>Click me</Button>
 ```
 
-## LICENSE
+## 📄 LICENSE
 
 [MIT](./LICENSE)

package/cjs/index.js

@@ -492,5 +492,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // 此文件由脚本自动生成，请勿直接修改。
 // This file was generated automatically by a script. Please do not modify it directly.
 var _default = exports.default = {
-  version: '3.4.0'
+  version: '3.4.2-beta.1'
 };

package/cjs/tests/utils.d.ts

@@ -22,6 +22,7 @@ export type ReactComponentType = React.ComponentType<BaseTestProps>;
 export declare function baseTest(Component: ReactComponentType | JSX.Element, selector: string, styleV?: StyleProps, styleRender?: string, className?: string, data?: any): void;
 export declare function childrenTest(Component: React.ComponentType<BaseTestProps>, selector: string): void;
 export declare function inputValueTest(element: Element, value: string): void;
+export declare function inputPlaceholderTest(element: Element, value: string): void;
 export declare function displayTest(Component: React.FC, displayName: string): void;
 export declare const delay: (time: number) => Promise<void>;
 type classNamesMapType = {

package/cjs/tests/utils.js

@@ -13,6 +13,7 @@ exports.componentsClassTest = componentsClassTest;
 exports.delay = exports.createClassName = void 0;
 exports.displayTest = displayTest;
 exports.hasAttributesTest = hasAttributesTest;
+exports.inputPlaceholderTest = inputPlaceholderTest;
 exports.inputValueTest = inputValueTest;
 exports.snapshotTest = snapshotTest;
 exports.snapshotTestByClick = snapshotTestByClick;
@@ -136,6 +137,9 @@ function childrenTest(Component, selector) {
 function inputValueTest(element, value) {
   attributesTest(element, 'value', value);
 }
+function inputPlaceholderTest(element, value) {
+  attributesTest(element, 'placeholder', value);
+}
 function displayTest(Component, displayName) {
   test('should start with Shineout display', function () {
     expect(Component.displayName).toBe(displayName);

package/dist/shineout.js

@@ -11991,7 +11991,7 @@ var handleStyle = function handleStyle(style) {
 };
 /* harmony default export */ var jss_style_handleStyle = (handleStyle);
 ;// CONCATENATED MODULE: ../shineout-style/src/version.ts
-/* harmony default export */ var version = ('3.4.0');
+/* harmony default export */ var version = ('3.4.2-beta.1');
 ;// CONCATENATED MODULE: ../shineout-style/src/jss-style/index.tsx
 
 
@@ -19562,8 +19562,8 @@ var groupSpace = function groupSpace(gap) {
       padding: "0 ".concat(gap),
       display: 'flex',
       alignItems: 'center',
-      border: "1px solid ".concat(src.inputBorderColor),
-      borderWidth: '0 1px',
+      borderLeft: "1px solid ".concat(src.inputBorderColor),
+      borderRight: "1px solid ".concat(src.inputBorderColor),
       background: src.inputGroupFontBackgroundColor,
       fontWeight: 'normal',
       color: src.inputGroupFontColor,
@@ -19771,8 +19771,8 @@ var input_input = objectSpread2_default()(objectSpread2_default()(objectSpread2_
       transform: 'rotate(45deg) translateY(3px)',
       width: '6px',
       height: '6px',
-      border: "1px solid ".concat(src.inputBorderColor),
-      borderWidth: '1px 0 0 1px',
+      borderTop: "1px solid ".concat(src.inputBorderColor),
+      borderLeft: "1px solid ".concat(src.inputBorderColor),
       background: 'inherit',
       content: "'  '"
     },
@@ -26249,8 +26249,8 @@ var textarea_input = objectSpread2_default()(objectSpread2_default()(objectSprea
       transform: 'rotate(45deg) translateY(3px)',
       width: '6px',
       height: '6px',
-      border: "1px solid ".concat(src.textareaBorderColor),
-      borderWidth: '1px 0 0 1px',
+      borderTop: "1px solid ".concat(src.textareaBorderColor),
+      borderLeft: "1px solid ".concat(src.textareaBorderColor),
       background: 'inherit',
       content: "'  '"
     },
@@ -26847,7 +26847,9 @@ var treeStyle = {
   },
   noline: {
     '& $iconWrapper': {
-      // left: 12,
+      '& $icon': {
+        transition: 'transform .2s cubic-bezier(.34,.69,.1,1)'
+      }
     },
     '& $iconWrapper[data-expanded="false"][data-icon="false"]': {
       '& $icon': {
@@ -26869,16 +26871,38 @@ var treeStyle = {
       '&$leaf': {
         paddingLeft: 24
       }
+    },
+    '& > $root': {
+      '& > $node': {
+        paddingLeft: 24
+      }
     }
   },
   root: {
-    '& > :first-child$node': {
+    // '& > :first-child$node': {
+    //   '&::before': {
+    //     top: 18,
+    //   },
+    // },
+    // '& > :last-child$node': {
+    //   '&::before': {},
+    // },
+    '& > $node': {
+      paddingLeft: 12,
+      '& > $contentWrapper > $iconWrapper': {
+        '&[dir=ltr]': {
+          left: 0
+        },
+        '&[dir=rtl]': {
+          right: 0
+        }
+      },
       '&::before': {
-        top: 18
+        display: 'none'
+      },
+      '&::after': {
+        display: 'none'
       }
-    },
-    '& > :last-child$node': {
-      '&::before': {}
     }
   },
   small: {},
@@ -26986,6 +27010,7 @@ var treeStyle = {
     borderRadius: '50%',
     color: src.treeItemFontColor,
     cursor: 'pointer',
+    transition: 'background .2s ease',
     // transform: 'rotate(-90deg)',
     '&:hover': {
       background: src.treeItemHoverBackgroundColor
@@ -36643,6 +36668,7 @@ var result_Input = function Input(props) {
     placeholder: props.placeholder,
     autoComplete: 'off',
     value: value,
+    readOnly: props.readOnly,
     maxLength: props.maxLength,
     disabled: props.disabled,
     onBlur: props.onBlur,
@@ -36736,12 +36762,13 @@ var Result = function Result(props) {
       className: className,
       children: [/*#__PURE__*/(0,jsx_runtime.jsx)("span", {
         className: styles === null || styles === void 0 ? void 0 : styles.resultTextPadding,
-        children: info.inputable ? /*#__PURE__*/(0,jsx_runtime.jsx)(result_Input, {
+        children: /*#__PURE__*/(0,jsx_runtime.jsx)(result_Input, {
           onRef: function onRef(el) {
             _onRef.current.inputRef = el;
             context.inputRefs[info.index] = el;
           },
-          disabled: dis,
+          disabled: dis && info.inputable,
+          readOnly: !info.inputable,
           open: !!open,
           inputRef: inputRef,
           value: info.target || info.value || '',
@@ -36768,10 +36795,7 @@ var Result = function Result(props) {
             (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props, e);
           },
           onClick: onClickProps
-        }, info.index) : info.target || info.value || /*#__PURE__*/(0,jsx_runtime.jsx)("span", {
-          className: styles === null || styles === void 0 ? void 0 : styles.placeholder,
-          children: info.place
-        })
+        }, info.index)
       }), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
         className: styles === null || styles === void 0 ? void 0 : styles.resultTextBg
       })]
@@ -38904,7 +38928,7 @@ function useFormControl(props) {
         }
       }
     };
-  }, [name]);
+  }, [name === null || name === void 0 ? void 0 : name.toString()]);
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     updateError(isArray(name) ? name.join('|') : name, error);
   }, [error]);
@@ -46007,12 +46031,15 @@ var useForm = function useForm(props) {
       validate: false
     };
     onChange(function (draft) {
-      Object.keys(vals).forEach(function (key) {
+      var values = Object.keys(vals);
+      // 针对 name 为数组模式，如 datepicker 的 name={['startTime', 'endTime']} 时，前者校验可能需要依赖后者，因此需要提前将后者数据整合至 draft 用于多字段整合校验
+      var nextDraft = Object.assign({}, current(draft), vals);
+      values.forEach(function (key) {
         deepSet(draft, key, vals[key], deepSetOptions);
         if (option.validate) {
           var _context$validateMap$;
           (_context$validateMap$ = context.validateMap[key]) === null || _context$validateMap$ === void 0 || _context$validateMap$.forEach(function (validate) {
-            validate(key, vals[key], current(draft));
+            validate(key, vals[key], nextDraft);
           });
         }
       });
@@ -50819,13 +50846,13 @@ var ListColumnsOption = function ListColumnsOption(props) {
     datum = props.datum,
     size = props.size,
     multiple = props.multiple,
+    columns = props.columns,
     _props$columnWidth = props.columnWidth,
     columnWidth = _props$columnWidth === void 0 ? 160 : _props$columnWidth,
-    renderItemProp = props.renderItem,
-    closePop = props.closePop;
+    renderItemProp = props.renderItem;
   var styles = jssStyle === null || jssStyle === void 0 || (_jssStyle$select = jssStyle.select) === null || _jssStyle$select === void 0 ? void 0 : _jssStyle$select.call(jssStyle);
   var style = {
-    width: columnWidth
+    width: columns && columns <= 1 ? '100%' : columnWidth
   };
   var isChecked = datum.check(data);
   var isDisabled = datum.disabledCheck(data);
@@ -50992,6 +51019,7 @@ var ColumnsList = function ColumnsList(props) {
           data: item,
           size: size,
           datum: datum,
+          columns: columns,
           multiple: multiple,
           columnWidth: columnWidth,
           renderItem: renderItemProp,
@@ -51733,7 +51761,7 @@ function Select(props0) {
     children: [tipNode, renderResult(), /*#__PURE__*/(0,jsx_runtime.jsx)(absolute_list, {
       adjust: adjust,
       focus: open,
-      fixedWidth: !props.columns && (autoAdapt ? 'min' : true),
+      fixedWidth: (!props.columns || props.columns <= 1) && (autoAdapt ? 'min' : true),
       absolute: props.absolute,
       zIndex: props.zIndex,
       position: position,
@@ -59346,7 +59374,6 @@ var TabsHeader = function TabsHeader(props) {
     handleTransform = _useTransform.handleTransform,
     setTransform = _useTransform.setTransform;
   var headerStyle = (jssStyle === null || jssStyle === void 0 || (_jssStyle$tabs = jssStyle.tabs) === null || _jssStyle$tabs === void 0 ? void 0 : _jssStyle$tabs.call(jssStyle)) || {};
-  var headerClass = classnames_default()(headerStyle.header, {});
   var headerWrapperClass = classnames_default()(headerStyle.headerWrapper, {});
   var buttonStyle = (jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.button) || {};
   var calculateOffset = function calculateOffset(currentScrollOffsetStartValue, width, currentOffsetStartValue, currentOffsetEndOther, parentWidth) {
@@ -59419,12 +59446,13 @@ var TabsHeader = function TabsHeader(props) {
     });
   };
   var renderTab = function renderTab() {
+    var headerClass = classnames_default()(headerStyle.header, shape === 'card' ? headerStyle.cardHr : '');
     return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
       ref: headerRef,
       className: headerClass,
       children: /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
         ref: scrollRef,
-        className: classnames_default()(headerStyle.headerScroll, shape === 'card' ? headerStyle.cardHr : ''),
+        className: headerStyle.headerScroll,
         onWheel: handleTransform,
         style: transformStyle,
         children: [shape === 'button' && /*#__PURE__*/(0,jsx_runtime.jsx)(base_src_button_button.Group, {
@@ -65054,7 +65082,7 @@ var upload_interface = __webpack_require__(8821);
 
 
 /* harmony default export */ var src_0 = ({
-  version: '3.4.0'
+  version: '3.4.2-beta.1'
 });
 }();
 /******/ 	return __webpack_exports__;