acud 1.0.21 → 1.0.23

package/es/divider/style/index.css

@@ -0,0 +1,126 @@
+/* color */
+/* 默认颜色 */
+/* 通用-icon */
+/* 标签 */
+/* 默认颜色 */
+/* 其他颜色 */
+/* 通用 */
+/* 水平 */
+/* 垂直 */
+/* 序号水平 */
+/* 序号垂直 */
+.acud-divider {
+  margin: 0;
+  padding: 0;
+  border-top: 1px solid rgba(0, 0, 0, 0.06);
+}
+.acud-divider-vertical {
+  position: relative;
+  top: -0.06em;
+  display: inline-block;
+  height: 0.9em;
+  margin: 0 8px;
+  vertical-align: middle;
+  border-top: 0;
+  border-left: 1px solid rgba(0, 0, 0, 0.06);
+}
+.acud-divider-horizontal {
+  display: flex;
+  clear: both;
+  width: 100%;
+  min-width: 100%;
+  margin: 24px 0;
+}
+.acud-divider-horizontal.acud-divider-with-text {
+  display: flex;
+  margin: 16px 0;
+  color: rgba(0, 0, 0, 0.85);
+  font-weight: 500;
+  font-size: 14px;
+  white-space: nowrap;
+  text-align: center;
+  border-top: 0;
+  border-top-color: rgba(0, 0, 0, 0.06);
+}
+.acud-divider-horizontal.acud-divider-with-text::before,
+.acud-divider-horizontal.acud-divider-with-text::after {
+  position: relative;
+  top: 50%;
+  width: 50%;
+  border-top: 1px solid transparent;
+  border-top-color: inherit;
+  border-bottom: 0;
+  transform: translateY(50%);
+  content: '';
+}
+.acud-divider-horizontal.acud-divider-with-text-left::before {
+  top: 50%;
+  width: 5%;
+}
+.acud-divider-horizontal.acud-divider-with-text-left::after {
+  top: 50%;
+  width: 95%;
+}
+.acud-divider-horizontal.acud-divider-with-text-right::before {
+  top: 50%;
+  width: 95%;
+}
+.acud-divider-horizontal.acud-divider-with-text-right::after {
+  top: 50%;
+  width: 5%;
+}
+.acud-divider-inner-text {
+  display: inline-block;
+  padding: 0 1em;
+}
+.acud-divider-dashed {
+  background: none;
+  border-color: rgba(0, 0, 0, 0.06);
+  border-style: dashed;
+  border-width: 1px 0 0;
+}
+.acud-divider-horizontal.acud-divider-with-text.acud-divider-dashed::before,
+.acud-divider-horizontal.acud-divider-with-text.acud-divider-dashed::after {
+  border-style: dashed none none;
+}
+.acud-divider-vertical.acud-divider-dashed {
+  border-width: 0 0 0 1px;
+}
+.acud-divider-plain.acud-divider-with-text {
+  color: #151B26;
+  font-weight: normal;
+  font-size: 12px;
+}
+.acud-divider-horizontal.acud-divider-with-text-left.acud-divider-no-default-orientation-margin-left::before {
+  width: 0;
+}
+.acud-divider-horizontal.acud-divider-with-text-left.acud-divider-no-default-orientation-margin-left::after {
+  width: 100%;
+}
+.acud-divider-horizontal.acud-divider-with-text-left.acud-divider-no-default-orientation-margin-left .acud-divider-inner-text {
+  padding-left: 0;
+}
+.acud-divider-horizontal.acud-divider-with-text-right.acud-divider-no-default-orientation-margin-right::before {
+  width: 100%;
+}
+.acud-divider-horizontal.acud-divider-with-text-right.acud-divider-no-default-orientation-margin-right::after {
+  width: 0;
+}
+.acud-divider-horizontal.acud-divider-with-text-right.acud-divider-no-default-orientation-margin-right .acud-divider-inner-text {
+  padding-right: 0;
+}
+.acud-divider-rtl {
+  direction: rtl;
+}
+.acud-divider-rtl.acud-divider-horizontal.acud-divider-with-text-left::before {
+  width: 95%;
+}
+.acud-divider-rtl.acud-divider-horizontal.acud-divider-with-text-left::after {
+  width: 5%;
+}
+.acud-divider-rtl.acud-divider-horizontal.acud-divider-with-text-right::before {
+  width: 5%;
+}
+.acud-divider-rtl.acud-divider-horizontal.acud-divider-with-text-right::after {
+  width: 95%;
+}

package/es/divider/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

package/es/divider/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

package/es/divider/style/index.less

@@ -0,0 +1,137 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@divider-prefix-cls: ~'@{acud-prefix}-divider';
+
+.@{divider-prefix-cls} {
+  .reset-component();
+
+  border-top: @border-width-base solid @divider-color;
+
+  &-vertical {
+    position: relative;
+    top: -0.06em;
+    display: inline-block;
+    height: 0.9em;
+    margin: 0 @divider-vertical-gutter;
+    vertical-align: middle;
+    border-top: 0;
+    border-left: @border-width-base solid @divider-color;
+ }
+
+  &-horizontal {
+    display: flex;
+    clear: both;
+    width: 100%;
+    min-width: 100%; // Fix https://github.com/acud-design/acud-design/issues/10914
+    margin: 24px 0;
+ }
+
+  &-horizontal&-with-text {
+    display: flex;
+    margin: 16px 0;
+    color: @heading-color;
+    font-weight: 500;
+    font-size: @font-size-lg;
+    white-space: nowrap;
+    text-align: center;
+    border-top: 0;
+    border-top-color: @divider-color;
+
+    &::before,
+    &::after {
+      position: relative;
+      top: 50%;
+      width: 50%;
+      border-top: @border-width-base solid transparent;
+      // Chrome not accept `inherit` in `border-top`
+      border-top-color: inherit;
+      border-bottom: 0;
+      transform: translateY(50%);
+      content: '';
+   }
+ }
+
+  &-horizontal&-with-text-left {
+    &::before {
+      top: 50%;
+      width: @divider-orientation-margin;
+   }
+
+    &::after {
+      top: 50%;
+      width: 100% - @divider-orientation-margin;
+   }
+ }
+
+  &-horizontal&-with-text-right {
+    &::before {
+      top: 50%;
+      width: 100% - @divider-orientation-margin;
+   }
+
+    &::after {
+      top: 50%;
+      width: @divider-orientation-margin;
+   }
+ }
+
+  &-inner-text {
+    display: inline-block;
+    padding: 0 @divider-text-padding;
+ }
+
+  &-dashed {
+    background: none;
+    border-color: @divider-color;
+    border-style: dashed;
+    border-width: @border-width-base 0 0;
+ }
+
+  &-horizontal&-with-text&-dashed {
+    &::before,
+    &::after {
+      border-style: dashed none none;
+   }
+ }
+
+  &-vertical&-dashed {
+    border-width: 0 0 0 @border-width-base;
+ }
+
+  &-plain&-with-text {
+    color: @text-color;
+    font-weight: normal;
+    font-size: @font-size-base;
+ }
+
+  &-horizontal&-with-text-left&-no-default-orientation-margin-left {
+    &::before {
+      width: 0;
+   }
+
+    &::after {
+      width: 100%;
+   }
+
+    .@{divider-prefix-cls}-inner-text {
+      padding-left: 0;
+   }
+ }
+
+  &-horizontal&-with-text-right&-no-default-orientation-margin-right {
+    &::before {
+      width: 100%;
+   }
+
+    &::after {
+      width: 0;
+   }
+
+    .@{divider-prefix-cls}-inner-text {
+      padding-right: 0;
+   }
+ }
+}
+
+@import './rtl';

package/es/divider/style/rtl.less

@@ -0,0 +1,38 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@divider-prefix-cls: ~'@{acud-prefix}-divider';
+
+.@{divider-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+ }
+
+  &-horizontal&-with-text-left {
+    &::before {
+      .@{divider-prefix-cls}-rtl& {
+        width: 100% - @divider-orientation-margin;
+     }
+   }
+
+    &::after {
+      .@{divider-prefix-cls}-rtl& {
+        width: @divider-orientation-margin;
+     }
+   }
+ }
+
+  &-horizontal&-with-text-right {
+    &::before {
+      .@{divider-prefix-cls}-rtl& {
+        width: @divider-orientation-margin;
+     }
+   }
+
+    &::after {
+      .@{divider-prefix-cls}-rtl& {
+        width: 100% - @divider-orientation-margin;
+     }
+   }
+ }
+}

package/es/dropdown/style/index.css

@@ -37,6 +37,10 @@
 .acud-dropdown-menu-hidden {
   display: none;
 }
+.acud-dropdown-demo-image > img {
+  width: 18px;
+  margin-right: 8px;
+}
 .acud-dropdown-trigger {
   cursor: pointer;
   position: relative;
@@ -76,10 +80,6 @@
 .acud-dropdown-trigger .trigger-title-withicon[disabled]:active {
   color: #B8BABF;
 }
-.acud-dropdown-trigger img {
-  width: 18px;
-  margin-right: 8px;
-}
 .acud-dropdown-trigger a {
   color: #2468F2;
 }

package/es/dropdown/style/index.less

@@ -36,6 +36,11 @@
       display: none;
     }
 
+    &-demo-image > img {
+        width: @dropdown-img-width;
+        margin-right: @dropdown-trigger-space;
+    }
+
     // 触点
     &-trigger {
         cursor: pointer;
@@ -52,11 +57,6 @@
             }
         }
 
-        & img {
-            width: @dropdown-img-width;
-            margin-right: @dropdown-trigger-space;
-        }
-
         & a {
             color: @blue-base;
         }

package/es/grid/hooks/useBreakpoint.d.ts

@@ -1,3 +1,3 @@
 import { ScreenMap } from '../../_util/responsiveObserve';
-declare function useBreakpoint(): ScreenMap;
+declare function useBreakpoint(refreshOnChange?: boolean): ScreenMap;
 export default useBreakpoint;

package/es/grid/hooks/useBreakpoint.js

@@ -1,22 +1,24 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { useEffect, useState } from 'react';
+import { useEffect, useRef } from 'react';
+import useForceUpdate from '../../_util/hooks/useForceUpdate';
 import ResponsiveObserve from '../../_util/responsiveObserve';
 
 function useBreakpoint() {
-  var _useState = useState({}),
-      _useState2 = _slicedToArray(_useState, 2),
-      screens = _useState2[0],
-      setScreens = _useState2[1];
-
+  var refreshOnChange = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+  var screensRef = useRef({});
+  var forceUpdate = useForceUpdate();
   useEffect(function () {
     var token = ResponsiveObserve.subscribe(function (supportScreens) {
-      setScreens(supportScreens);
+      screensRef.current = supportScreens;
+
+      if (refreshOnChange) {
+        forceUpdate();
+      }
     });
     return function () {
       return ResponsiveObserve.unsubscribe(token);
     };
   }, []);
-  return screens;
+  return screensRef.current;
 }
 
 export default useBreakpoint;

package/es/index.d.ts

@@ -1,4 +1,5 @@
 export { default as Affix } from './affix';
+export { default as Avatar } from './avatar';
 export { default as Alert } from './alert';
 export { default as Anchor } from './anchor';
 export { default as BackTop } from './back-top';
@@ -15,6 +16,7 @@ export { default as Collapse } from './collapse';
 export { default as ConfigProvider } from './config-provider';
 export { default as DatePicker } from './date-picker';
 export { default as DialogBox } from './dialog-box';
+export { default as Divider } from './divider';
 export { default as Drawer } from './drawer';
 export { default as Dropdown } from './dropdown';
 export { default as Empty } from './empty';

package/es/index.js

@@ -3,6 +3,7 @@
  * @author
  */
 export { default as Affix } from './affix';
+export { default as Avatar } from './avatar';
 export { default as Alert } from './alert';
 export { default as Anchor } from './anchor';
 export { default as BackTop } from './back-top';
@@ -19,6 +20,7 @@ export { default as Collapse } from './collapse';
 export { default as ConfigProvider } from './config-provider';
 export { default as DatePicker } from './date-picker';
 export { default as DialogBox } from './dialog-box';
+export { default as Divider } from './divider';
 export { default as Drawer } from './drawer';
 export { default as Dropdown } from './dropdown';
 export { default as Empty } from './empty';

package/es/menu/style/index.css

@@ -188,7 +188,9 @@
 .acud-menu-global-siderbar .acud-menu-bottom-nav-fold {
   cursor: pointer;
   display: flex;
+  align-items: center;
   overflow: hidden;
+  height: 40px;
 }
 .acud-menu-global-siderbar .acud-menu-bottom-nav-fold-icon {
   margin-right: 8px;
@@ -207,21 +209,21 @@
   font-size: 14px;
   background-color: #FFFFFF;
 }
-.acud-menu:not(.acud-menu-with-icon):not(.acud-menu-global):not(.acud-menu-sub.acud-menu-inline) {
+.acud-menu:not(.acud-menu-with-icon):not(.acud-menu-global):not(.acud-menu-sub) {
   box-shadow: 0px 2px 8px 0px rgba(7, 12, 20, 0.12);
   color: #151B26;
 }
-.acud-menu:not(.acud-menu-with-icon):not(.acud-menu-global):not(.acud-menu-sub.acud-menu-inline):hover {
+.acud-menu:not(.acud-menu-with-icon):not(.acud-menu-global):not(.acud-menu-sub):hover {
   color: #2468F2;
 }
-.acud-menu:not(.acud-menu-with-icon):not(.acud-menu-global):not(.acud-menu-sub.acud-menu-inline):focus,
-.acud-menu:not(.acud-menu-with-icon):not(.acud-menu-global):not(.acud-menu-sub.acud-menu-inline):active {
+.acud-menu:not(.acud-menu-with-icon):not(.acud-menu-global):not(.acud-menu-sub):focus,
+.acud-menu:not(.acud-menu-with-icon):not(.acud-menu-global):not(.acud-menu-sub):active {
   color: #2468F2;
 }
-.acud-menu:not(.acud-menu-with-icon):not(.acud-menu-global):not(.acud-menu-sub.acud-menu-inline)[disabled],
-.acud-menu:not(.acud-menu-with-icon):not(.acud-menu-global):not(.acud-menu-sub.acud-menu-inline)[disabled]:hover,
-.acud-menu:not(.acud-menu-with-icon):not(.acud-menu-global):not(.acud-menu-sub.acud-menu-inline)[disabled]:focus,
-.acud-menu:not(.acud-menu-with-icon):not(.acud-menu-global):not(.acud-menu-sub.acud-menu-inline)[disabled]:active {
+.acud-menu:not(.acud-menu-with-icon):not(.acud-menu-global):not(.acud-menu-sub)[disabled],
+.acud-menu:not(.acud-menu-with-icon):not(.acud-menu-global):not(.acud-menu-sub)[disabled]:hover,
+.acud-menu:not(.acud-menu-with-icon):not(.acud-menu-global):not(.acud-menu-sub)[disabled]:focus,
+.acud-menu:not(.acud-menu-with-icon):not(.acud-menu-global):not(.acud-menu-sub)[disabled]:active {
   color: #B8BABF;
 }
 .acud-menu > li {
@@ -493,10 +495,11 @@
   overflow: hidden;
   text-overflow: ellipsis;
   display: flex;
+  align-items: center;
   margin-bottom: 4px;
 }
-.acud-menu-inline .acud-menu-item .acudicon,
-.acud-menu-inline-collapsed .acud-menu-item .acudicon {
+.acud-menu-inline .acud-menu-item > .acud-menu-item-icon,
+.acud-menu-inline-collapsed .acud-menu-item > .acud-menu-item-icon {
   margin-right: 8px;
 }
 .acud-menu-inline .acud-menu-item.acud-menu-item-selected,
@@ -514,8 +517,8 @@
   top: 0;
   height: 40px;
 }
-.acud-menu-inline .acud-menu-submenu-title > .acudicon,
-.acud-menu-inline-collapsed .acud-menu-submenu-title > .acudicon {
+.acud-menu-inline .acud-menu-submenu-title > .acud-menu-item-icon,
+.acud-menu-inline-collapsed .acud-menu-submenu-title > .acud-menu-item-icon {
   height: 40px;
 }
 .acud-menu-inline.acud-menu-vertical,
@@ -565,6 +568,7 @@
   display: flex;
   width: 100%;
   border-bottom: 1px solid #F2F2F4;
+  align-items: center;
 }
 .acud-menu-inline-header-item .acudicon {
   display: flex;

package/es/menu/style/index.less

@@ -11,7 +11,7 @@
     font-size: @menu-font-size;
     background-color: @menu-bg;
 
-    &:not(&-with-icon):not(&-global):not(&-sub&-inline) {
+    &:not(&-with-icon):not(&-global):not(&-sub) {
         box-shadow: @menu-shadow;
         .basic-tp-config(@menu-light-tp);
     }
@@ -291,11 +291,12 @@
             overflow: hidden;
             text-overflow: ellipsis;
             display: flex;
+            align-items: center;
             margin-bottom: @P;
         }
 
         .@{menu-prefix-cls}-item {
-            .@{acud-prefix}icon {
+            > .@{menu-prefix-cls}-item-icon {
                 margin-right: @P* 2;
             }
             &.@{menu-prefix-cls}-item-selected {
@@ -313,7 +314,7 @@
             }
         }
 
-        .@{menu-prefix-cls}-submenu-title > .@{acud-prefix}icon{
+        .@{menu-prefix-cls}-submenu-title > .@{menu-prefix-cls}-item-icon{
             height: @menu-item-height;
         }
 
@@ -358,6 +359,7 @@
             display: flex;
             width: 100%;
             border-bottom: 1px solid @G9;
+            align-items: center;
             .@{acud-prefix}icon {
                 display: flex;
                 margin-right: 2 * @P;

package/es/menu/style/sider.less

@@ -96,7 +96,9 @@
         &-fold {
             cursor: pointer;
             display: flex;
+            align-items: center;
             overflow: hidden;
+            height: 10 * @P;
             &-icon {
                 margin-right: 2 * @P;
                 display: flex;

package/es/modal/DialogBox.d.ts

@@ -9,10 +9,10 @@ export interface ModalFuncProps {
     /** 点击模态框右上角叉、取消按钮、Props.maskClosable 值为 true 时的遮罩层或键盘按下 Esc 时的回调 */
     onCancel?: (e: React.MouseEvent<HTMLElement>) => void;
     afterClose?: () => void;
+    /** 自定义icon */
+    icon?: React.ReactNode;
     /** 弹框宽度 */
     width?: number;
-    /** 弹框高度 */
-    height?: number;
     /** 确认按钮文字 */
     okText?: string;
     /** 取消按钮文字 */

package/es/modal/DialogBox.js

@@ -81,7 +81,8 @@ var DialogBox = function DialogBox(props) {
       confirmLoading = props.confirmLoading,
       onOk = props.onOk,
       onClose = props.onClose,
-      restProps = __rest(props, ["visible", "className", "title", "content", "type", "cancelBtn", "okText", "confirmLoading", "onOk", "onClose"]);
+      icon = props.icon,
+      restProps = __rest(props, ["visible", "className", "title", "content", "type", "cancelBtn", "okText", "confirmLoading", "onOk", "onClose", "icon"]);
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -120,7 +121,7 @@ var DialogBox = function DialogBox(props) {
   }, [onClose]);
   var titleNode = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-icon")
-  }, DialogType[type].icon), /*#__PURE__*/React.createElement("div", {
+  }, icon || DialogType[type].icon), /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-title")
   }, title));
   var footer = React.useMemo(function () {

package/es/pagination/rc-pagination/Pagination.js

@@ -143,7 +143,6 @@ var Pagination = function Pagination(_a) {
   var allPages = useMemo(function () {
     return calculatePage(undefined, curState, props);
   }, [props, curState]);
-  console.log(allPages);
   var prevPage = current - 1 > 0 ? current - 1 : 0;
   var nextPage = current + 1 < allPages ? current + 1 : allPages;
   var hasOnChange = useMemo(function () {

package/es/style/themes/default/components/avatar.less

@@ -0,0 +1,13 @@
+
+@avatar-size-base: 32px;
+@avatar-size-lg: 40px;
+@avatar-size-sm: 24px;
+@avatar-font-size-base: 18px;
+@avatar-font-size-lg: 24px;
+@avatar-font-size-sm: 14px;
+@avatar-bg: #ccc;
+@avatar-color: #fff;
+@avatar-border-radius: @border-radius-base;
+@avatar-group-overlapping: -8px;
+@avatar-group-space: 3px;
+@avatar-group-border-color: #fff;

package/es/style/themes/default/components/divider.less

@@ -0,0 +1,6 @@
+
+@heading-color: fade(#000, 85%);
+@divider-text-padding: 1em;
+@divider-orientation-margin: 5%;
+@divider-color: rgba(0, 0, 0, 6%);
+@divider-vertical-gutter: 8px;

package/es/style/themes/default/components/index.less

@@ -1,4 +1,6 @@
 @import './alert.less';
+@import './avatar.less';
+@import './divider.less';
 @import './badge.less';
 @import './button.less';
 @import './input.less';

package/es/table/style/index.css

@@ -340,12 +340,14 @@ div.acud-table-summary {
 .acud-table-filter-column {
   display: flex;
   justify-content: flex-start;
+  align-items: center;
 }
 .acud-table-filter-column .acud-dropdown-trigger {
   display: flex;
 }
 .acud-table-filter-column .acud-dropdown-trigger .acudicon-outlined-funnel {
   display: flex;
+  height: 16px;
 }
 .acud-table-filter-trigger {
   position: relative;
@@ -465,9 +467,11 @@ table tr th.acud-table-selection-column::after {
           padding-inline-start: 4px;
   margin-left: 0;
   display: flex;
+  align-items: center;
 }
 .acud-table-selection-extra .acud-dropdown-trigger {
   display: flex;
+  height: 16px;
 }
 .acud-table-selection-extra .acudicon {
   color: #84868C;
@@ -542,7 +546,6 @@ tr.acud-table-expanded-row .acud-descriptions-view table {
 }
 .acud-table-cell-fix-left,
 .acud-table-cell-fix-right {
-  position: -webkit-sticky !important;
   position: sticky !important;
   z-index: 2;
   background: #FFFFFF;
@@ -612,13 +615,11 @@ tr.acud-table-expanded-row .acud-descriptions-view table {
   box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.15);
 }
 .acud-table-sticky-holder {
-  position: -webkit-sticky;
   position: sticky;
   z-index: calc(2 + 1);
   background: #FFFFFF;
 }
 .acud-table-sticky-scroll {
-  position: -webkit-sticky;
   position: sticky;
   bottom: 0;
   z-index: calc(2 + 1);