@para-ui/core 4.0.43 → 4.0.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,7 @@
1
+ declare const _default: {
2
+ format: string;
3
+ pleaseEnter: string;
4
+ codeSnippet: string;
5
+ help: string;
6
+ };
7
+ export default _default;
@@ -0,0 +1,27 @@
1
+ declare const _default: {
2
+ zh: {
3
+ format: string;
4
+ pleaseEnter: string;
5
+ codeSnippet: string;
6
+ help: string;
7
+ };
8
+ en: {
9
+ format: string;
10
+ pleaseEnter: string;
11
+ codeSnippet: string;
12
+ help: string;
13
+ };
14
+ "zh-CN": {
15
+ format: string;
16
+ pleaseEnter: string;
17
+ codeSnippet: string;
18
+ help: string;
19
+ };
20
+ "en-US": {
21
+ format: string;
22
+ pleaseEnter: string;
23
+ codeSnippet: string;
24
+ help: string;
25
+ };
26
+ };
27
+ export default _default;
@@ -0,0 +1,7 @@
1
+ declare const _default: {
2
+ format: string;
3
+ pleaseEnter: string;
4
+ codeSnippet: string;
5
+ help: string;
6
+ };
7
+ export default _default;
@@ -48,7 +48,9 @@ export interface CollapseLayoutProps {
48
48
  * */
49
49
  minDragLength?: number;
50
50
  /** 点击回调 bol 显示/展开 */
51
- onClickBtn?: (bol?: boolean) => void;
51
+ onClickBtn?: (bol?: boolean, duration?: number) => void;
52
+ /** 拖拽结束事件 */
53
+ onDragEnd?: () => void;
52
54
  }
53
55
  /**
54
56
  * @author zhanzl
@@ -37,7 +37,8 @@ const CollapseLayout = props => {
37
37
  unit = 'px',
38
38
  style,
39
39
  className = '',
40
- onClickBtn
40
+ onClickBtn,
41
+ onDragEnd
41
42
  } = props;
42
43
  const constData = useRef({
43
44
  zoomLength: zoomLength || 0,
@@ -169,7 +170,7 @@ const CollapseLayout = props => {
169
170
  /** 点击切换按钮 */
170
171
  const clickBtn = () => {
171
172
  setShowBox(!showBox);
172
- onClickBtn && onClickBtn(!showBox);
173
+ onClickBtn && onClickBtn(!showBox, duration);
173
174
  };
174
175
  /** 鼠标按下事件 */
175
176
  const onmousedown = e => {
@@ -248,6 +249,7 @@ const CollapseLayout = props => {
248
249
  const onmouseup = () => {
249
250
  const comRefDom = comRef.current;
250
251
  comRefDom.classList.remove("".concat($prefixCls, "-collapse-layout-move"));
252
+ onDragEnd && onDragEnd();
251
253
  window.removeEventListener('mousemove', onmousemove);
252
254
  window.removeEventListener('mouseup', onmouseup);
253
255
  };
@@ -24,6 +24,8 @@ import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
24
24
  import { Search } from '../Search/index.js';
25
25
  import LoadingOutlined from '@para-ui/icons/LoadingF';
26
26
  import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
27
+ import '../_verture/defineProperty-f0e15205.js';
28
+ import '../_verture/slicedToArray-75fa4188.js';
27
29
  import '../Checkbox/index.js';
28
30
  import '../Help/index.js';
29
31
  import '@para-ui/icons/Help';
@@ -60,8 +62,6 @@ import '@para-ui/icons/Right';
60
62
  import '@para-ui/icons/DoubleLeft';
61
63
  import '@para-ui/icons/DoubleRight';
62
64
  import '../_verture/toConsumableArray-c7a8028f.js';
63
- import '../_verture/slicedToArray-75fa4188.js';
64
- import '../_verture/defineProperty-f0e15205.js';
65
65
  import '../_verture/index-8ac46bd9.js';
66
66
  import '../_verture/typeof-6ec38efd.js';
67
67
  import 'rc-tree';
@@ -52,6 +52,8 @@ import '@para-ui/icons/Up';
52
52
  import '../MultiBox/index.js';
53
53
  import '@para-ui/icons/Internet';
54
54
  import '../Table/index.js';
55
+ import '../_verture/defineProperty-f0e15205.js';
56
+ import '../_verture/slicedToArray-75fa4188.js';
55
57
  import '../Button/index.js';
56
58
  import '@para-ui/icons/ScreenF';
57
59
  import '@para-ui/icons/UpTriangleF';
@@ -72,8 +74,6 @@ import '@para-ui/icons/DoubleLeft';
72
74
  import '@para-ui/icons/DoubleRight';
73
75
  import '../_verture/index-5f0bfdcf.js';
74
76
  import '../_verture/toConsumableArray-c7a8028f.js';
75
- import '../_verture/slicedToArray-75fa4188.js';
76
- import '../_verture/defineProperty-f0e15205.js';
77
77
  import '../_verture/index-8ac46bd9.js';
78
78
  import '../_verture/typeof-6ec38efd.js';
79
79
  import 'rc-tree';
package/Form/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
2
  import { DeepClone } from '@paraview/lib';
3
3
  import React__default from 'react';
4
- import { F as FormItem, l as localeJson, v as validate } from '../_verture/index-4b1025fa.js';
4
+ import { F as FormItem, l as localeJson, v as validate } from '../_verture/index-95e30df5.js';
5
5
  import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
6
6
  import { u as useFormatMessage } from '../_verture/useFormatMessage-1fc7c957.js';
7
7
  import '../TextField/index.js';
@@ -51,6 +51,7 @@ import 'rc-input-number';
51
51
  import '@para-ui/icons/Up';
52
52
  import '../ComboSelect/index.js';
53
53
  import '../Table/index.js';
54
+ import '../_verture/defineProperty-f0e15205.js';
54
55
  import '@para-ui/icons/ScreenF';
55
56
  import '@para-ui/icons/UpTriangleF';
56
57
  import '@para-ui/icons/DownTriangleF';
@@ -73,7 +74,6 @@ import '@para-ui/icons/DoubleLeft';
73
74
  import '@para-ui/icons/DoubleRight';
74
75
  import '../_verture/index-5f0bfdcf.js';
75
76
  import '../_verture/toConsumableArray-c7a8028f.js';
76
- import '../_verture/defineProperty-f0e15205.js';
77
77
  import '../_verture/index-8ac46bd9.js';
78
78
  import '../_verture/typeof-6ec38efd.js';
79
79
  import 'rc-tree';
package/FormItem/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import 'react/jsx-runtime';
2
2
  import 'react';
3
- export { F as default } from '../_verture/index-4b1025fa.js';
3
+ export { F as default } from '../_verture/index-95e30df5.js';
4
4
  import 'clsx';
5
5
  import '../Label/index.js';
6
6
  import '../_verture/constant-5317fc89.js';
@@ -51,6 +51,7 @@ import 'rc-input-number';
51
51
  import '@para-ui/icons/Up';
52
52
  import '../ComboSelect/index.js';
53
53
  import '../Table/index.js';
54
+ import '../_verture/defineProperty-f0e15205.js';
54
55
  import '@para-ui/icons/ScreenF';
55
56
  import '@para-ui/icons/UpTriangleF';
56
57
  import '@para-ui/icons/DownTriangleF';
@@ -73,7 +74,6 @@ import '@para-ui/icons/DoubleLeft';
73
74
  import '@para-ui/icons/DoubleRight';
74
75
  import '../_verture/index-5f0bfdcf.js';
75
76
  import '../_verture/toConsumableArray-c7a8028f.js';
76
- import '../_verture/defineProperty-f0e15205.js';
77
77
  import '../_verture/index-8ac46bd9.js';
78
78
  import '../_verture/typeof-6ec38efd.js';
79
79
  import 'rc-tree';
@@ -26,6 +26,8 @@ export interface PaginationProps {
26
26
  flippingArrow?: PaginationFlippingArrow[];
27
27
  /** 自适应模式 只有type=complex生效,默认true */
28
28
  autoType?: boolean;
29
+ /** 重新计算换行不换行 只有type=complex生效 */
30
+ resizeLine?: string | number;
29
31
  /** 总数 */
30
32
  total?: number;
31
33
  /** 每页行数 */
@@ -64,7 +64,7 @@ var localeJson = {
64
64
  en
65
65
  };
66
66
 
67
- var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2021/10/26 13:57\n* @description 分页样式\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-pagination {\n font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n font-size: 14px;\n color: rgb(29, 33, 38);\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n opacity: 1;\n}\n.paraui-v4-pagination.paraui-v4-pagination-over {\n overflow: hidden;\n height: 32px;\n opacity: 0;\n transition: all 0.3s;\n}\n.paraui-v4-pagination.paraui-v4-pagination-no-left-arrow > .pagination-content {\n padding-left: 0;\n}\n.paraui-v4-pagination.paraui-v4-pagination-no-right-arrow > .pagination-content {\n padding-right: 0;\n}\n.paraui-v4-pagination > .pagination-space {\n margin-right: 10px;\n}\n.paraui-v4-pagination > .pagination-space:last-child {\n margin-right: 0;\n}\n.paraui-v4-pagination > .pagination-content {\n display: flex;\n border-radius: 4px;\n height: 32px;\n background-color: rgb(255, 255, 255);\n}\n.paraui-v4-pagination > .pagination-content > .left-page, .paraui-v4-pagination > .pagination-content > .right-page {\n display: inline-block;\n}\n.paraui-v4-pagination > .pagination-content > .left-page > div, .paraui-v4-pagination > .pagination-content > .right-page > div {\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n width: 32px;\n height: 32px;\n border-radius: 4px;\n}\n.paraui-v4-pagination > .pagination-content > .left-page > div.disabled-btn, .paraui-v4-pagination > .pagination-content > .right-page > div.disabled-btn {\n cursor: not-allowed;\n}\n.paraui-v4-pagination > .pagination-content > .left-page > div.disabled-btn > svg, .paraui-v4-pagination > .pagination-content > .right-page > div.disabled-btn > svg {\n color: rgb(161, 168, 179);\n}\n.paraui-v4-pagination > .pagination-content > .left-page > div.disabled-btn:hover, .paraui-v4-pagination > .pagination-content > .right-page > div.disabled-btn:hover {\n background-color: rgb(255, 255, 255);\n}\n.paraui-v4-pagination > .pagination-content > .left-page > div.disabled-btn:hover > svg, .paraui-v4-pagination > .pagination-content > .right-page > div.disabled-btn:hover > svg {\n color: rgb(161, 168, 179);\n}\n.paraui-v4-pagination > .pagination-content > .left-page > div:last-child, .paraui-v4-pagination > .pagination-content > .right-page > div:last-child {\n margin-right: 0;\n}\n.paraui-v4-pagination > .pagination-content > .left-page > div:hover, .paraui-v4-pagination > .pagination-content > .right-page > div:hover {\n background-color: rgb(247, 248, 250);\n}\n.paraui-v4-pagination > .pagination-content > .left-page > div:hover > svg, .paraui-v4-pagination > .pagination-content > .right-page > div:hover > svg {\n color: rgb(46, 101, 230);\n}\n.paraui-v4-pagination > .pagination-content > .left-page > div > svg, .paraui-v4-pagination > .pagination-content > .right-page > div > svg {\n font-size: 16px;\n color: rgb(92, 101, 115);\n}\n.paraui-v4-pagination > .pagination-content > .component-pagination {\n height: 100%;\n display: inline-block;\n box-shadow: none;\n vertical-align: top;\n line-height: 30px;\n}\n.paraui-v4-pagination > .pagination-content > .component-pagination > li {\n min-width: 32px;\n height: 32px;\n line-height: 32px;\n display: inline-block;\n text-align: center;\n cursor: pointer;\n border-radius: 4px;\n margin-right: 6px;\n padding: 0 6px;\n}\n.paraui-v4-pagination > .pagination-content > .component-pagination > li:first-child, .paraui-v4-pagination > .pagination-content > .component-pagination > li:last-child, .paraui-v4-pagination > .pagination-content > .component-pagination > li.component-pagination-next {\n display: none;\n}\n.paraui-v4-pagination > .pagination-content > .component-pagination > li.component-pagination-jump-next, .paraui-v4-pagination > .pagination-content > .component-pagination > li.component-pagination-jump-prev {\n padding: 0;\n}\n.paraui-v4-pagination > .pagination-content > .component-pagination > li > .jump-prev-icon svg, .paraui-v4-pagination > .pagination-content > .component-pagination > li > .jump-next-icon svg {\n display: none;\n}\n.paraui-v4-pagination > .pagination-content > .component-pagination > li > .jump-prev-icon span, .paraui-v4-pagination > .pagination-content > .component-pagination > li > .jump-next-icon span {\n display: inline-block;\n}\n.paraui-v4-pagination > .pagination-content > .component-pagination > li > .jump-prev-icon:hover svg, .paraui-v4-pagination > .pagination-content > .component-pagination > li > .jump-next-icon:hover svg {\n display: inline-block;\n vertical-align: middle;\n color: rgb(46, 101, 230);\n}\n.paraui-v4-pagination > .pagination-content > .component-pagination > li > .jump-prev-icon:hover span, .paraui-v4-pagination > .pagination-content > .component-pagination > li > .jump-next-icon:hover span {\n display: none;\n}\n.paraui-v4-pagination > .pagination-content > .component-pagination > li:hover {\n background-color: rgb(247, 248, 250);\n color: rgb(46, 101, 230);\n}\n.paraui-v4-pagination > .pagination-content > .component-pagination > li.component-pagination-item-active {\n color: rgb(46, 101, 230);\n border: 1px solid;\n border-color: rgb(46, 101, 230);\n line-height: 30px;\n}\n.paraui-v4-pagination > .pagination-content > .component-pagination > li.component-pagination-item-active:hover {\n background: rgb(255, 255, 255);\n border-color: rgb(46, 101, 230);\n}\n.paraui-v4-pagination > .pagination-btn-content button:first-child {\n margin-right: 10px;\n}\n.paraui-v4-pagination > .page-line-memo > span {\n display: inline-block;\n margin-right: 8px;\n vertical-align: middle;\n}\n.paraui-v4-pagination > .page-line-memo .page-line-select {\n width: 110px;\n vertical-align: middle;\n}\n.paraui-v4-pagination > .skip-page-memo {\n display: flex;\n align-items: center;\n}\n.paraui-v4-pagination > .skip-page-memo > span {\n color: rgb(92, 101, 115);\n}\n.paraui-v4-pagination > .skip-page-memo > .skip-page-text-field {\n width: 50px;\n margin: 0 4px;\n}\n.paraui-v4-pagination > .skip-page-memo > .skip-page-text-field .right-icon {\n margin-right: 8px;\n}";
67
+ var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2021/10/26 13:57\n* @description 分页样式\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-pagination {\n font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n font-size: 14px;\n color: rgb(29, 33, 38);\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n opacity: 1;\n}\n.paraui-v4-pagination.paraui-v4-pagination-over {\n overflow: hidden;\n height: 32px;\n}\n.paraui-v4-pagination.paraui-v4-pagination-no-left-arrow > .pagination-content {\n padding-left: 0;\n}\n.paraui-v4-pagination.paraui-v4-pagination-no-right-arrow > .pagination-content {\n padding-right: 0;\n}\n.paraui-v4-pagination .total-num {\n height: 32px;\n line-height: 32px;\n}\n.paraui-v4-pagination > .pagination-space {\n margin-right: 10px;\n}\n.paraui-v4-pagination > .pagination-space:last-child {\n margin-right: 0;\n}\n.paraui-v4-pagination > .pagination-content {\n display: flex;\n border-radius: 4px;\n height: 32px;\n background-color: rgb(255, 255, 255);\n}\n.paraui-v4-pagination > .pagination-content > .left-page, .paraui-v4-pagination > .pagination-content > .right-page {\n display: inline-block;\n}\n.paraui-v4-pagination > .pagination-content > .left-page > div, .paraui-v4-pagination > .pagination-content > .right-page > div {\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n width: 32px;\n height: 32px;\n border-radius: 4px;\n}\n.paraui-v4-pagination > .pagination-content > .left-page > div.disabled-btn, .paraui-v4-pagination > .pagination-content > .right-page > div.disabled-btn {\n cursor: not-allowed;\n}\n.paraui-v4-pagination > .pagination-content > .left-page > div.disabled-btn > svg, .paraui-v4-pagination > .pagination-content > .right-page > div.disabled-btn > svg {\n color: rgb(161, 168, 179);\n}\n.paraui-v4-pagination > .pagination-content > .left-page > div.disabled-btn:hover, .paraui-v4-pagination > .pagination-content > .right-page > div.disabled-btn:hover {\n background-color: rgb(255, 255, 255);\n}\n.paraui-v4-pagination > .pagination-content > .left-page > div.disabled-btn:hover > svg, .paraui-v4-pagination > .pagination-content > .right-page > div.disabled-btn:hover > svg {\n color: rgb(161, 168, 179);\n}\n.paraui-v4-pagination > .pagination-content > .left-page > div:last-child, .paraui-v4-pagination > .pagination-content > .right-page > div:last-child {\n margin-right: 0;\n}\n.paraui-v4-pagination > .pagination-content > .left-page > div:hover, .paraui-v4-pagination > .pagination-content > .right-page > div:hover {\n background-color: rgb(247, 248, 250);\n}\n.paraui-v4-pagination > .pagination-content > .left-page > div:hover > svg, .paraui-v4-pagination > .pagination-content > .right-page > div:hover > svg {\n color: rgb(46, 101, 230);\n}\n.paraui-v4-pagination > .pagination-content > .left-page > div > svg, .paraui-v4-pagination > .pagination-content > .right-page > div > svg {\n font-size: 16px;\n color: rgb(92, 101, 115);\n}\n.paraui-v4-pagination > .pagination-content > .component-pagination {\n height: 100%;\n display: inline-block;\n box-shadow: none;\n vertical-align: top;\n line-height: 30px;\n}\n.paraui-v4-pagination > .pagination-content > .component-pagination > li {\n min-width: 32px;\n height: 32px;\n line-height: 32px;\n display: inline-block;\n text-align: center;\n cursor: pointer;\n border-radius: 4px;\n margin-right: 6px;\n padding: 0 6px;\n}\n.paraui-v4-pagination > .pagination-content > .component-pagination > li:first-child, .paraui-v4-pagination > .pagination-content > .component-pagination > li:last-child, .paraui-v4-pagination > .pagination-content > .component-pagination > li.component-pagination-next {\n display: none;\n}\n.paraui-v4-pagination > .pagination-content > .component-pagination > li.component-pagination-jump-next, .paraui-v4-pagination > .pagination-content > .component-pagination > li.component-pagination-jump-prev {\n padding: 0;\n}\n.paraui-v4-pagination > .pagination-content > .component-pagination > li > .jump-prev-icon svg, .paraui-v4-pagination > .pagination-content > .component-pagination > li > .jump-next-icon svg {\n display: none;\n}\n.paraui-v4-pagination > .pagination-content > .component-pagination > li > .jump-prev-icon span, .paraui-v4-pagination > .pagination-content > .component-pagination > li > .jump-next-icon span {\n display: inline-block;\n}\n.paraui-v4-pagination > .pagination-content > .component-pagination > li > .jump-prev-icon:hover svg, .paraui-v4-pagination > .pagination-content > .component-pagination > li > .jump-next-icon:hover svg {\n display: inline-block;\n vertical-align: middle;\n color: rgb(46, 101, 230);\n}\n.paraui-v4-pagination > .pagination-content > .component-pagination > li > .jump-prev-icon:hover span, .paraui-v4-pagination > .pagination-content > .component-pagination > li > .jump-next-icon:hover span {\n display: none;\n}\n.paraui-v4-pagination > .pagination-content > .component-pagination > li:hover {\n background-color: rgb(247, 248, 250);\n color: rgb(46, 101, 230);\n}\n.paraui-v4-pagination > .pagination-content > .component-pagination > li.component-pagination-item-active {\n color: rgb(46, 101, 230);\n border: 1px solid;\n border-color: rgb(46, 101, 230);\n line-height: 30px;\n}\n.paraui-v4-pagination > .pagination-content > .component-pagination > li.component-pagination-item-active:hover {\n background: rgb(255, 255, 255);\n border-color: rgb(46, 101, 230);\n}\n.paraui-v4-pagination > .pagination-btn-content button:first-child {\n margin-right: 10px;\n}\n.paraui-v4-pagination > .page-line-memo > span {\n display: inline-block;\n margin-right: 8px;\n vertical-align: middle;\n}\n.paraui-v4-pagination > .page-line-memo .page-line-select {\n width: 110px;\n vertical-align: middle;\n}\n.paraui-v4-pagination > .skip-page-memo {\n display: flex;\n align-items: center;\n}\n.paraui-v4-pagination > .skip-page-memo > span {\n color: rgb(92, 101, 115);\n}\n.paraui-v4-pagination > .skip-page-memo > .skip-page-text-field {\n width: 50px;\n margin: 0 4px;\n}\n.paraui-v4-pagination > .skip-page-memo > .skip-page-text-field .right-icon {\n margin-right: 8px;\n}";
68
68
  styleInject(css_248z);
69
69
 
70
70
  const Pagination = props => {
@@ -83,34 +83,33 @@ const Pagination = props => {
83
83
  skipFunc,
84
84
  changePage,
85
85
  changeRowsPerPage,
86
- getPopupContainer
86
+ getPopupContainer,
87
+ resizeLine
87
88
  } = props;
89
+ const intl = useFormatMessage('Pagination', localeJson);
88
90
  const {
89
91
  language,
90
92
  locale
91
93
  } = React__default.useContext(GlobalContext);
92
- const intl = useFormatMessage('Pagination', localeJson);
93
94
  const [currentRowsPerPageCom, setCurrentRowsPerPageCom] = useState(currentRowsPerPage); // 当前选中每页行数
94
95
  const [rowsPerPageCom, setRowsPerPageCom] = useState([]); // 每页显示的行数
95
96
  const [pageCom, setPageCom] = useState(page); // 当前页数
96
97
  const [totalPage, setTotalPage] = useState(); // 总页数
97
98
  const [skipValue, setSkipValue] = useState(); // 跳转页数
98
- const [typeCom, setTypeCom] = useState(); // 组件类型
99
- const refDom = useRef();
100
- const constData = useRef({});
99
+ const [morePos, setMorePos] = useState(null); // 超出在原始位置
100
+ const refDom = useRef(null);
101
+ const constData = useRef({
102
+ layoutArr: ['jumper', 'pageRow', 'pager-btn', 'sizes', 'pager-num']
103
+ });
101
104
  constData.current.type = type;
102
105
  constData.current.autoType = autoType;
103
106
  useEffect(() => {
104
107
  return () => {
105
108
  window.removeEventListener('resize', changeSize);
106
109
  clearTimeout(constData.current.timer);
107
- clearTimeout(constData.current.timerClass);
108
110
  clearTimeout(constData.current.changePagination);
109
111
  };
110
112
  }, []);
111
- useEffect(() => {
112
- setTypeCom(type);
113
- }, [type]);
114
113
  useEffect(() => {
115
114
  setPageCom(page);
116
115
  }, [page]);
@@ -151,61 +150,59 @@ const Pagination = props => {
151
150
  window.addEventListener('resize', changeSize);
152
151
  } else {
153
152
  window.removeEventListener('resize', changeSize);
154
- setTypeCom(type);
155
153
  }
156
154
  }, [type, autoType]);
157
155
  useEffect(() => {
158
156
  if (constData.current.type === 'complex' && constData.current.autoType) {
159
- changePagination();
157
+ changeSize();
160
158
  }
161
- }, [total, currentRowsPerPageCom, pageCom, language]);
162
- /**
163
- * 改变了分页数据,需要判断当前是否换行了
164
- * */
165
- const changePagination = () => {
166
- clearTimeout(constData.current.changePagination);
167
- constData.current.changePagination = setTimeout(() => {
168
- const current = refDom.current;
169
- const skipDom = current && current.querySelector('.skip-page-memo');
170
- // 简单模式,不存在跳转
171
- if (skipDom) {
172
- // 复杂模式,换行了 -> 变成简单模式
173
- if (current.offsetTop !== skipDom.offsetTop) {
174
- setTypeCom('simple');
175
- }
176
- } else {
177
- setTypeCom('complex');
178
- // 简单模式 -> 复杂, 需要再次判断是否换行了
179
- changePagination();
180
- }
181
- });
182
- };
159
+ }, [total, currentRowsPerPageCom, pageCom, language, resizeLine]);
183
160
  /** 改变屏幕大小 */
184
161
  const changeSize = () => {
185
162
  clearTimeout(constData.current.timer);
186
- clearTimeout(constData.current.timerClass);
187
163
  const current = refDom.current;
188
164
  if (!current) return;
189
165
  current.classList.add("".concat($prefixCls, "-pagination-over"));
190
166
  constData.current.timer = setTimeout(() => {
191
- if (!current) return;
192
- const moduleDom = current.querySelector('.pagination-content');
193
- const skipDom = current.querySelector('.skip-page-memo');
194
- // 简单模式,不存在跳转
195
- if (moduleDom) {
196
- // 复杂模式,换行了 -> 变成简单模式
197
- if (current.offsetTop !== skipDom.offsetTop) {
198
- setTypeCom('simple');
167
+ setMorePos(constData.current.layoutArr.length);
168
+ if (constData.current.layoutArr.length > 1) handMultiline();
169
+ }, 100);
170
+ };
171
+ /**
172
+ * 判断是否换行
173
+ * true 换行
174
+ * */
175
+ const isMultiline = () => {
176
+ const arr = ['.total-num', '.component-pagination', '.pagination-btn-content', '.page-line-memo', '.skip-page-memo'];
177
+ let num;
178
+ let bol = false;
179
+ arr.forEach(str => {
180
+ const dom = refDom.current.querySelector(str);
181
+ if (dom) {
182
+ if (num === undefined) {
183
+ num = dom.offsetTop;
184
+ } else {
185
+ if (dom.offsetTop !== num) {
186
+ bol = true;
187
+ }
199
188
  }
200
- } else {
201
- setTypeCom('complex');
202
- // 简单模式 -> 复杂, 需要再次判断是否换行了
203
- changeSize();
204
189
  }
205
- constData.current.timerClass = setTimeout(() => {
206
- current.classList.remove("".concat($prefixCls, "-pagination-over"));
207
- }, 200);
208
- }, 200);
190
+ });
191
+ return bol;
192
+ };
193
+ const handMultiline = index => {
194
+ if (index === null || index === 0) return;
195
+ if (index === undefined) index = constData.current.layoutArr.length;
196
+ if (isMultiline()) {
197
+ const num = Number(index) - 1;
198
+ // 超出
199
+ setMorePos(num);
200
+ if (num > 3) handMultiline(num);else refDom.current.classList.remove("".concat($prefixCls, "-pagination-over"));
201
+ } else {
202
+ // 一行
203
+ //if (list.length <= index) handleCloseMore();
204
+ refDom.current.classList.remove("".concat($prefixCls, "-pagination-over"));
205
+ }
209
206
  };
210
207
  /**
211
208
  * 是否存在当前类型
@@ -213,6 +210,28 @@ const Pagination = props => {
213
210
  const notLayout = layout => {
214
211
  return constData.current.type instanceof Array && constData.current.type.indexOf(layout) === -1;
215
212
  };
213
+ /**
214
+ * 判断超出是否显示
215
+ * false 显示
216
+ * true 不显示
217
+ * */
218
+ const overShowDom = type => {
219
+ if (morePos === null) return false;
220
+ switch (type) {
221
+ case 'jumper':
222
+ return morePos <= 0;
223
+ case 'pageRow':
224
+ return morePos <= 1;
225
+ case 'pager-btn':
226
+ return morePos <= 2 || morePos > 4;
227
+ case 'sizes':
228
+ return morePos <= 3;
229
+ case 'pager-num':
230
+ return morePos <= 4;
231
+ default:
232
+ return false;
233
+ }
234
+ };
216
235
  // 点击分页
217
236
  const clickPage = type => value => {
218
237
  let num = pageCom;
@@ -281,7 +300,7 @@ const Pagination = props => {
281
300
  };
282
301
  /* 总数量 */
283
302
  const TotalMemo = useMemo(() => {
284
- if (typeCom === 'simple' || notLayout('sizes')) {
303
+ if (type === 'simple' || notLayout('sizes') || overShowDom('sizes')) {
285
304
  return null;
286
305
  }
287
306
  // 共{total}条
@@ -295,10 +314,10 @@ const Pagination = props => {
295
314
  total: totalFormat
296
315
  })
297
316
  }));
298
- }, [total, language, locale, typeCom]);
317
+ }, [total, language, locale, morePos]);
299
318
  /* 每页行数 */
300
319
  const PageLineMemo = useMemo(() => {
301
- if (notLayout('pageRow')) {
320
+ if (notLayout('pageRow') || overShowDom('pageRow')) {
302
321
  return null;
303
322
  }
304
323
  return jsx("div", Object.assign({
@@ -315,7 +334,7 @@ const Pagination = props => {
315
334
  getPopupContainer: getPopupContainer
316
335
  })
317
336
  }));
318
- }, [rowsPerPageCom, currentRowsPerPageCom, getPopupContainer, language, locale, typeCom]);
337
+ }, [rowsPerPageCom, currentRowsPerPageCom, getPopupContainer, language, locale, morePos]);
319
338
  /** 分页上一页 */
320
339
  const jumpPrevIcon = () => {
321
340
  return jsxs("div", Object.assign({
@@ -336,9 +355,23 @@ const Pagination = props => {
336
355
  }), jsx(DoubleRight, {})]
337
356
  }));
338
357
  };
358
+ /**
359
+ * 判断显示分页
360
+ * true 不显示
361
+ * */
362
+ const isPaginationMemo = () => {
363
+ if (pagerType !== 'num') return true;
364
+ if (type === 'simple') {
365
+ return true;
366
+ } else if (type === 'complex') {
367
+ return overShowDom('pager-num');
368
+ } else {
369
+ return notLayout('pager');
370
+ }
371
+ };
339
372
  /* 页码 */
340
373
  const PaginationMemo = useMemo(() => {
341
- if (typeCom === 'simple' || pagerType !== 'num' || notLayout('pager')) {
374
+ if (isPaginationMemo()) {
342
375
  return null;
343
376
  }
344
377
  return jsxs("div", Object.assign({
@@ -373,10 +406,24 @@ const Pagination = props => {
373
406
  }))
374
407
  }))]
375
408
  }));
376
- }, [total, pageCom, totalPage, currentRowsPerPageCom, typeCom, props.flippingArrow, pagerType]);
409
+ }, [total, pageCom, totalPage, currentRowsPerPageCom, props.flippingArrow, pagerType, morePos]);
410
+ /**
411
+ * 判断显示按钮分页
412
+ * true 不显示
413
+ * */
414
+ const isPaginationBtnMemo = () => {
415
+ if (pagerType === 'btn') return false;
416
+ if (type === 'simple') {
417
+ return false;
418
+ } else if (type === 'complex') {
419
+ return overShowDom('pager-btn');
420
+ } else {
421
+ return notLayout('pager');
422
+ }
423
+ };
377
424
  /** 页码btn */
378
425
  const PaginationBtnMemo = useMemo(() => {
379
- if (notLayout('pager') || typeCom !== 'simple' && pagerType !== 'btn') {
426
+ if (isPaginationBtnMemo()) {
380
427
  return null;
381
428
  }
382
429
  return jsxs("div", Object.assign({
@@ -404,10 +451,10 @@ const Pagination = props => {
404
451
  })
405
452
  }))]
406
453
  }));
407
- }, [pageCom, totalPage, pagerType, typeCom, locale]);
454
+ }, [pageCom, totalPage, pagerType, locale, morePos]);
408
455
  /* 跳转页数 */
409
456
  const SkipPageMemo = useMemo(() => {
410
- if (notLayout('jumper')) {
457
+ if (notLayout('jumper') || overShowDom('jumper')) {
411
458
  return null;
412
459
  }
413
460
  return jsxs("div", Object.assign({
@@ -432,7 +479,7 @@ const Pagination = props => {
432
479
  })]
433
480
  })]
434
481
  }));
435
- }, [skipValue, totalPage, language, locale, typeCom]);
482
+ }, [skipValue, totalPage, language, locale, morePos]);
436
483
  // 处理class
437
484
  const handClass = () => {
438
485
  let str = "".concat($prefixCls, "-pagination");
package/README.md CHANGED
@@ -1,5 +1,17 @@
1
1
  ## 🎉 para-ui/core@4.0.43 发布
2
2
 
3
+ 🔧【Bugfix】
4
+ - 【分页-Pagination】重构复杂模式下,超出换行显示内容,逐个减少
5
+ - 【表格-Table】增加resizePaginationLine参数,重新计算分页换行不换行
6
+ - 【分栏收缩容器-CollapseLayout】onClickBtn增加duration动画时间参数,新增onDragEnd拖拽结束事件
7
+
8
+ ## 🎉 para-ui/core@4.0.45 发布
9
+
10
+ 🎁【Feature】
11
+ - 【代码编辑器-CodeEditor】新增组件-代码编辑器
12
+
13
+ ## 🎉 para-ui/core@4.0.43 发布
14
+
3
15
  🔧【Bugfix】
4
16
  - 【分页-Pagination】增加pageMaxLimit参数
5
17
  - 【表格-Table】增加非首页空状态展示
package/Select/index.js CHANGED
@@ -42,8 +42,8 @@ var zh = {
42
42
  };
43
43
 
44
44
  var localeJson = {
45
- zh: zh,
46
- en: en
45
+ zh,
46
+ en
47
47
  };
48
48
 
49
49
  var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-select {\n font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n font-size: 14px;\n font-weight: 400;\n display: inline-block;\n vertical-align: top;\n width: 100%;\n}\n.paraui-v4-select > .select-content {\n line-height: 0;\n border: 1px solid;\n border-radius: 4px;\n border-color: rgb(212, 218, 227);\n padding-right: 10px;\n position: relative;\n cursor: pointer;\n background-color: rgb(255, 255, 255);\n}\n.paraui-v4-select > .select-content:hover {\n border-color: rgb(87, 131, 235);\n}\n.paraui-v4-select > .select-content:hover > .select-svg > svg {\n color: rgb(46, 101, 230);\n}\n.paraui-v4-select > .select-content > .select-label-placeholder {\n width: 100%;\n height: 100%;\n padding: 0 10px;\n color: rgb(161, 168, 179);\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n position: absolute;\n left: 0;\n top: 0;\n z-index: 1;\n}\n.paraui-v4-select > .select-content > .select-label-placeholder > .select-required {\n margin-left: 2px;\n color: rgb(244, 66, 66);\n}\n.paraui-v4-select > .select-content > .select-svg {\n position: absolute;\n right: 10px;\n top: 0;\n z-index: 2;\n}\n.paraui-v4-select > .select-content > .select-svg > svg {\n font-size: 18px;\n transition: all 0.3s;\n color: rgb(92, 101, 115);\n opacity: 0;\n}\n.paraui-v4-select > .select-content > .select-svg > .clean-up-icon {\n position: absolute;\n left: 0;\n top: 0;\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n}\n.paraui-v4-select > .select-content > .select-svg > .clean-up-icon > svg {\n font-size: 16px;\n transition: all 0.3s;\n color: rgb(161, 168, 179);\n}\n.paraui-v4-select > .select-content > .select-svg > .clean-up-icon:hover > svg {\n color: rgb(46, 101, 230);\n}\n.paraui-v4-select > .select-content > .radio-select-content {\n padding-left: 10px;\n font-size: 14px;\n line-height: 1.43;\n color: rgb(29, 33, 38);\n word-break: break-all;\n}\n.paraui-v4-select > .select-content > .radio-search-outside {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n line-height: 1.43;\n padding: 0 10px 0 10px;\n font-size: 14px;\n cursor: pointer;\n color: rgb(29, 33, 38);\n border: 0;\n border-radius: 4px;\n background: transparent;\n z-index: 10;\n}\n.paraui-v4-select > .select-content > .check-select-content {\n padding-left: 10px;\n overflow: hidden;\n}\n.paraui-v4-select > .select-content > .check-select-content > .check-select-content-item {\n display: inline-block;\n background-color: rgb(234, 236, 241);\n border-radius: 2px;\n padding: 0 30px 0 10px;\n color: rgb(29, 33, 38);\n margin-right: 4px;\n vertical-align: top;\n max-width: 100%;\n white-space: nowrap;\n position: relative;\n}\n.paraui-v4-select > .select-content > .check-select-content > .check-select-content-item.check-select-content-item-more {\n cursor: pointer;\n color: rgb(29, 33, 38);\n padding-right: 10px;\n}\n.paraui-v4-select > .select-content > .check-select-content > .check-select-content-item.check-select-content-item-more > span {\n max-width: none;\n}\n.paraui-v4-select > .select-content > .check-select-content > .check-select-content-item.check-select-content-item-more:hover {\n color: rgb(46, 101, 230);\n}\n.paraui-v4-select > .select-content > .check-select-content > .check-select-content-item > span {\n display: inline-block;\n height: 100%;\n vertical-align: top;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.paraui-v4-select > .select-content > .check-select-content > .check-select-content-item > svg {\n cursor: pointer;\n color: rgb(29, 33, 38);\n font-size: 16px;\n position: absolute;\n z-index: 10;\n right: 10px;\n}\n.paraui-v4-select > .select-content > .check-select-content > .check-select-content-item > svg:hover {\n color: rgb(46, 101, 230);\n}\n.paraui-v4-select > .select-content > .check-select-content > .check-select-content-item.check-select-content-item-noclose {\n padding-right: 10px;\n}\n.paraui-v4-select > .select-content > .check-select-content > .check-select-content-item.check-select-content-item-noclose > span {\n max-width: none;\n}\n.paraui-v4-select > .select-content > .check-select-content > .check-search-outside {\n width: 10px;\n max-width: 100% !important;\n display: none;\n border: 0;\n color: rgb(29, 33, 38);\n font-size: 14px;\n cursor: pointer;\n}\n.paraui-v4-select.paraui-v4-select-allow-clear > .select-content {\n padding-right: 38px;\n}\n.paraui-v4-select.paraui-v4-select-allow-clear > .select-content .select-label-placeholder {\n padding-right: 38px;\n}\n.paraui-v4-select.paraui-v4-select-allow-clear.paraui-v4-select-value > .select-content:hover > .select-svg > svg {\n opacity: 0;\n transition: all 0s;\n}\n.paraui-v4-select.paraui-v4-select-allow-clear.paraui-v4-select-value > .select-content:hover > .select-svg > .clean-up-icon {\n opacity: 1;\n transition: all 0.3s;\n}\n.paraui-v4-select.paraui-v4-select-allow-clear.paraui-v4-select-value.paraui-v4-select-disabled > .select-content:hover > .select-svg > svg {\n opacity: 1;\n}\n.paraui-v4-select.paraui-v4-select-over-line > .select-content > .check-select-content {\n display: flex;\n flex-wrap: wrap;\n}\n.paraui-v4-select.paraui-v4-select-over-line > .select-content > .check-select-content input {\n flex: 1;\n z-index: 10;\n}\n.paraui-v4-select.paraui-v4-select-over-line.paraui-v4-select-small > .select-content {\n height: inherit;\n min-height: 28px;\n}\n.paraui-v4-select.paraui-v4-select-over-line.paraui-v4-select-small > .select-content > .check-select-content {\n height: 100%;\n}\n.paraui-v4-select.paraui-v4-select-over-line.paraui-v4-select-medium > .select-content {\n height: inherit;\n min-height: 28px;\n}\n.paraui-v4-select.paraui-v4-select-over-line.paraui-v4-select-medium > .select-content > .check-select-content {\n height: 100%;\n}\n.paraui-v4-select.paraui-v4-select-over-line.paraui-v4-select-large > .select-content {\n height: inherit;\n min-height: 32px;\n}\n.paraui-v4-select.paraui-v4-select-over-line.paraui-v4-select-large > .select-content > .check-select-content {\n height: 100%;\n}\n.paraui-v4-select.paraui-v4-select-show-select > .select-content {\n padding-right: 38px;\n}\n.paraui-v4-select.paraui-v4-select-show-select > .select-content .select-label-placeholder {\n padding-right: 38px;\n}\n.paraui-v4-select.paraui-v4-select-show-select > .select-content > .select-svg > svg {\n opacity: 1;\n}\n.paraui-v4-select.paraui-v4-select-show-select > .select-content > .radio-search-outside {\n padding: 0 38px 0 10px;\n}\n.paraui-v4-select.paraui-v4-select-disabled > .select-content {\n background-color: rgb(247, 248, 250);\n cursor: not-allowed;\n}\n.paraui-v4-select.paraui-v4-select-disabled > .select-content:hover {\n border-color: rgb(212, 218, 227);\n}\n.paraui-v4-select.paraui-v4-select-disabled > .select-content:hover > .select-svg > svg {\n color: rgb(92, 101, 115);\n}\n.paraui-v4-select.paraui-v4-select-disabled > .select-content > .radio-select-content {\n color: rgb(92, 101, 115);\n}\n.paraui-v4-select.paraui-v4-select-disabled > .select-content > .check-select-content > .check-select-content-item > span {\n max-width: 100%;\n}\n.paraui-v4-select.paraui-v4-select-error > .select-content {\n border-color: rgb(244, 66, 66) !important;\n}\n.paraui-v4-select.paraui-v4-select-open > .select-content {\n border-color: rgb(46, 101, 230);\n}\n.paraui-v4-select.paraui-v4-select-open > .select-content > .select-svg > svg {\n transform: rotate(180deg);\n color: rgb(46, 101, 230);\n}\n.paraui-v4-select.paraui-v4-select-open > .select-content > .check-select-content > .check-search-outside {\n display: inline-block;\n}\n.paraui-v4-select.paraui-v4-select-small > .select-content {\n height: 28px;\n}\n.paraui-v4-select.paraui-v4-select-small > .select-content > .select-label-placeholder {\n line-height: 26px;\n}\n.paraui-v4-select.paraui-v4-select-small > .select-content > .select-svg {\n top: 4px;\n}\n.paraui-v4-select.paraui-v4-select-small > .select-content > .radio-select-content {\n padding-bottom: 3px;\n padding-top: 3px;\n}\n.paraui-v4-select.paraui-v4-select-small > .select-content > .check-select-content {\n padding-bottom: 3px;\n height: 26px;\n}\n.paraui-v4-select.paraui-v4-select-small > .select-content > .check-select-content > .check-select-content-item {\n margin-top: 3px;\n height: 20px;\n line-height: 20px;\n}\n.paraui-v4-select.paraui-v4-select-small > .select-content > .check-select-content > .check-select-content-item > svg {\n top: 2px;\n}\n.paraui-v4-select.paraui-v4-select-small > .select-content > .check-select-content > .check-search-outside {\n margin-top: 3px;\n height: 20px;\n}\n.paraui-v4-select.paraui-v4-select-medium > .select-content {\n height: 28px;\n}\n.paraui-v4-select.paraui-v4-select-medium > .select-content > .select-label-placeholder {\n line-height: 26px;\n}\n.paraui-v4-select.paraui-v4-select-medium > .select-content > .select-svg {\n top: 4px;\n}\n.paraui-v4-select.paraui-v4-select-medium > .select-content > .radio-select-content {\n padding-bottom: 3px;\n padding-top: 3px;\n}\n.paraui-v4-select.paraui-v4-select-medium > .select-content > .check-select-content {\n padding-bottom: 3px;\n height: 26px;\n}\n.paraui-v4-select.paraui-v4-select-medium > .select-content > .check-select-content > .check-select-content-item {\n margin-top: 3px;\n height: 20px;\n line-height: 20px;\n}\n.paraui-v4-select.paraui-v4-select-medium > .select-content > .check-select-content > .check-select-content-item > svg {\n top: 2px;\n}\n.paraui-v4-select.paraui-v4-select-medium > .select-content > .check-select-content > .check-search-outside {\n margin-top: 3px;\n height: 20px;\n}\n.paraui-v4-select.paraui-v4-select-large > .select-content {\n height: 32px;\n}\n.paraui-v4-select.paraui-v4-select-large > .select-content > .select-label-placeholder {\n line-height: 30px;\n}\n.paraui-v4-select.paraui-v4-select-large > .select-content > .select-svg {\n top: 6px;\n}\n.paraui-v4-select.paraui-v4-select-large > .select-content > .radio-select-content {\n padding-bottom: 5px;\n padding-top: 5px;\n}\n.paraui-v4-select.paraui-v4-select-large > .select-content > .check-select-content {\n padding-bottom: 3px;\n height: 30px;\n}\n.paraui-v4-select.paraui-v4-select-large > .select-content > .check-select-content > .check-select-content-item {\n margin-top: 3px;\n height: 24px;\n line-height: 24px;\n}\n.paraui-v4-select.paraui-v4-select-large > .select-content > .check-select-content > .check-select-content-item > svg {\n top: 4px;\n}\n.paraui-v4-select.paraui-v4-select-large > .select-content > .check-select-content > .check-search-outside {\n margin-top: 4px;\n height: 22px;\n}\n\n.paraui-v4-select-popover.paraui-v4-select-popover-hide {\n display: none !important;\n}\n.paraui-v4-select-popover.component-dropdown {\n /*&.paraui-v4-select-popover-small {\n & > .select-popover-content {\n & > .select-popover-search {\n height: 30px;\n }\n\n & > .select-popover-list {\n & .select-popover-list-item {\n height: 30px;\n line-height: 30px;\n }\n\n & > .select-popover-list-group {\n & .select-popover-list-group-label {\n height: 30px;\n line-height: 30px;\n }\n }\n }\n }\n }\n\n // 中\n &.paraui-v4-select-popover-medium {\n & > .select-popover-content {\n & > .select-popover-search {\n height: 30px;\n }\n\n & > .select-popover-list {\n & .select-popover-list-item {\n height: 30px;\n line-height: 30px;\n }\n\n & > .select-popover-list-group {\n & .select-popover-list-group-label {\n height: 30px;\n line-height: 30px;\n }\n }\n }\n }\n }\n\n // 大\n &.paraui-v4-select-popover-large {\n & > .select-popover-content {\n & > .select-popover-search {\n height: 30px;\n }\n\n & > .select-popover-list {\n & .select-popover-list-item {\n height: 30px;\n line-height: 30px;\n }\n\n & > .select-popover-list-group {\n & .select-popover-list-group-label {\n height: 30px;\n line-height: 30px;\n }\n }\n }\n }\n }*/\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content {\n padding: 4px 0;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content.select-popover-content-search > .select-popover-list {\n padding-top: 0px;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content.select-popover-content-search > .select-popover-list > .select-nodata {\n margin-top: 20px;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-search {\n display: flex;\n align-items: center;\n padding: 0 10px;\n border-bottom: 1px solid;\n border-color: rgb(234, 236, 241);\n height: 30px;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-search > input {\n border: 0;\n outline: none;\n font-size: 14px;\n color: rgb(29, 33, 38);\n width: 100%;\n height: 100%;\n line-height: 1.43;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-search > input::placeholder {\n font-size: 14px;\n opacity: 1;\n color: rgb(161, 168, 179);\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-search > input::-ms-clear {\n display: none;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-search > input::-ms-reveal {\n display: none;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-search > input:-moz-placeholder {\n color: rgb(161, 168, 179);\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-search > input::-moz-placeholder {\n color: rgb(161, 168, 179);\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-search > input:-ms-input-placeholder { /* Internet Explorer 10-11 */\n color: rgb(161, 168, 179);\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-search > input::-ms-input-placeholder { /* Microsoft Edge */\n color: rgb(161, 168, 179);\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-search > svg {\n color: rgb(92, 101, 115);\n font-size: 18px;\n cursor: pointer;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list {\n max-height: 320px;\n overflow: auto;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list.select-popover-list-loading {\n height: 100px;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item {\n display: flex;\n cursor: pointer;\n padding: 0 10px;\n align-items: center;\n height: 30px;\n line-height: 30px;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item > .select-popover-list-item-label {\n flex: 1;\n overflow: hidden;\n color: rgb(29, 33, 38);\n font-size: 14px;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item > .select-popover-list-item-svg {\n line-height: 0;\n display: none;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item > .select-popover-list-item-svg > svg {\n font-size: 18px;\n color: rgb(46, 101, 230);\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item.select-popover-list-item-select > .select-popover-list-item-label {\n color: rgb(46, 101, 230);\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item.select-popover-list-item-select > .select-popover-list-item-svg {\n display: inline-block;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item.select-popover-list-item-hover {\n background-color: rgb(247, 248, 250);\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item.select-popover-list-item-keydown {\n background-color: rgb(247, 248, 250);\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item.select-popover-list-item-disabled {\n cursor: not-allowed;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list .select-popover-list-item.select-popover-list-item-disabled > .select-popover-list-item-label {\n color: rgb(161, 168, 179) !important;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list > .select-popover-list-group .select-popover-list-group-label {\n display: inline-block;\n width: 100%;\n padding: 0 10px;\n color: rgb(161, 168, 179);\n font-size: 12px;\n height: 30px;\n line-height: 30px;\n}\n.paraui-v4-select-popover.component-dropdown .select-popover-content > .select-popover-list > .select-nodata {\n text-align: center;\n font-size: 14px;\n color: rgb(29, 33, 38);\n margin-top: 16px;\n margin-bottom: 29px;\n}\n.paraui-v4-select-more-popover {\n /*// 小\n &.paraui-v4-select-more-popover-small {\n & .select-more {\n & > .select-more-title {\n line-height: 28px;\n }\n\n & > .select-more-content {\n & > .select-more-content-item {\n line-height: 28px;\n }\n }\n }\n }\n\n // 中\n &.paraui-v4-select-more-popover-medium {\n & .select-more {\n & > .select-more-title {\n line-height: 32px;\n }\n\n & > .select-more-content {\n & > .select-more-content-item {\n line-height: 32px;\n }\n }\n }\n }\n\n // 大\n &.paraui-v4-select-more-popover-large {\n & .select-more {\n & > .select-more-title {\n line-height: 36px;\n }\n\n & > .select-more-content {\n & > .select-more-content-item {\n line-height: 36px;\n }\n }\n }\n }*/\n}\n.paraui-v4-select-more-popover .select-more {\n width: 290px;\n padding: 4px 0;\n}\n.paraui-v4-select-more-popover .select-more > .select-more-title {\n font-size: 12px;\n padding: 0 10px;\n color: rgb(161, 168, 179);\n line-height: 30px;\n}\n.paraui-v4-select-more-popover .select-more > .select-more-content {\n max-height: 320px;\n overflow: auto;\n}\n.paraui-v4-select-more-popover .select-more > .select-more-content > .select-more-content-item {\n padding: 0 10px;\n display: flex;\n justify-content: space-around;\n align-items: center;\n line-height: 30px;\n}\n.paraui-v4-select-more-popover .select-more > .select-more-content > .select-more-content-item:hover {\n background-color: rgb(247, 248, 250);\n}\n.paraui-v4-select-more-popover .select-more > .select-more-content > .select-more-content-item > span {\n flex: 1;\n overflow: hidden;\n display: inline-block;\n font-size: 14px;\n}\n.paraui-v4-select-more-popover .select-more > .select-more-content > .select-more-content-item > svg {\n font-size: 18px;\n position: relative;\n cursor: pointer;\n color: rgb(92, 101, 115);\n}\n.paraui-v4-select-more-popover .select-more > .select-more-content > .select-more-content-item > svg:hover {\n color: rgb(46, 101, 230);\n border-radius: 2px;\n}";