@pointcloud/pcloud-components 1.0.3 → 1.0.5

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.
Files changed (15) hide show
  1. package/README.md +157 -157
  2. package/dist/esm/AdvancedFilter/index.js +1 -0
  3. package/dist/esm/AdvancedFilter/styles/index.less +143 -146
  4. package/dist/esm/CRUD/index.less +2 -0
  5. package/dist/esm/CRUD/toolbar.d.ts +3 -3
  6. package/dist/esm/DTable/index.d.ts +2 -2
  7. package/dist/esm/DTable/index.js +3 -8
  8. package/dist/esm/DTable/index.less +61 -71
  9. package/dist/esm/DynamicFormItem/index.js +3 -1
  10. package/dist/esm/InfiniteScrollList/index.d.ts +1 -1
  11. package/dist/esm/InfiniteScrollList/index.js +3 -3
  12. package/dist/esm/LoginForm/index.js +1 -0
  13. package/dist/umd/pcloud-components.min.css +1 -1
  14. package/dist/umd/pcloud-components.min.js +1 -1
  15. package/package.json +133 -133
package/README.md CHANGED
@@ -1,157 +1,157 @@
1
- # @pointcloud/pcloud-components
2
-
3
- [![NPM version](https://img.shields.io/npm/v/@pointcloud/pcloud-components.svg?style=flat)](https://npmjs.org/package/@pointcloud/pcloud-components)
4
- [![NPM downloads](https://img.shields.io/npm/dm/@pointcloud/pcloud-components.svg?style=flat)](https://npmjs.org/package/@pointcloud/pcloud-components)
5
- ![Jest Coverage](https://img.shields.io/badge/coverage-100%25-brightgreen?style=flat)
6
- [![License](https://img.shields.io/npm/l/@pointcloud/pcloud-components.svg?style=flat)](https://npmjs.org/package/@pointcloud/pcloud-components)
7
-
8
- 一套基于 Ant Design v4.24.16 和 React v18 开发的业务组件库，包含 30+ 个高质量组件，可帮助您快速构建企业级中后台产品原型。
9
-
10
- ## 🎁 组件列表
11
-
12
- ### 表单组件
13
-
14
- | 组件名称 | 描述 |
15
- | --------------- | ----------------------------------- |
16
- | DForm | 基于 Ant Design Form 的增强表单组件 |
17
- | DInput | 增强版输入框组件 |
18
- | DSelect | 支持异步加载的下拉选择组件 |
19
- | DCascader | 支持异步加载的级联选择组件 |
20
- | DTreeSelect | 支持异步加载的树选择组件 |
21
- | DUpload | 文件上传组件 |
22
- | DRangePicker | 日期选择组件 |
23
- | DynamicFormItem | 动态表单组件 |
24
-
25
- ### 数据展示类
26
-
27
- | 组件名称 | 描述 |
28
- | ------------------ | ---------------- |
29
- | DTable | 增强版表格组件 |
30
- | LabelValue | 标签值展示组件 |
31
- | WordCloud | 词云组件 |
32
- | ScrollNumber | 数字滚动动画组件 |
33
- | AspectRatio | 宽高比容器组件 |
34
- | NoData | 无数据展示组件 |
35
- | IPAddress | IP 地址输入组件 |
36
- | AnimatedScrollList | 动画滚动列表组件 |
37
- | OrgTree | 组织树组件 |
38
- | TypewriterText | 打字机组件 |
39
- | ErrorBoundary | 错误边界组件 |
40
- | IconFont | 自定义图标组件 |
41
-
42
- ### 模态框
43
-
44
- | 组件名称 | 描述 |
45
- | --------- | ---------------- |
46
- | DModal | 增强版模态框组件 |
47
- | ModalForm | 表单模态框组件 |
48
- | LoginForm | 登录表单组件 |
49
-
50
- ### 其他
51
-
52
- | 组件名称 | 描述 |
53
- | ------------------ | ------------------ |
54
- | Loading | 全局加载组件 |
55
- | ContextMenu | 右键菜单组件 |
56
- | AdvancedFilter | 高级筛选组件 |
57
- | InfiniteScrollList | 无限滚动列表组件 |
58
- | PictureCard | 图片卡片组件 |
59
- | SignaturePad | 签名板组件 |
60
- | RndDrag | 可拖拽调整大小组件 |
61
- | RCropper | 图片裁剪组件 |
62
- | CRUD | CRUD 组件 |
63
- | AuthComponent | 权限组件 |
64
- | ColorPicker | 颜色选择器组件 |
65
-
66
- ## 🚀 安装
67
-
68
- ```bash
69
- # 使用 npm
70
- npm install @pointcloud/pcloud-components
71
-
72
- # 使用 yarn
73
- yarn add @pointcloud/pcloud-components
74
-
75
- # 使用 pnpm
76
- pnpm add @pointcloud/pcloud-components
77
- ```
78
-
79
- ## 🔨 快速开始
80
-
81
- 通过 umd 引入时,需要先引入`react`和`react-dom`, 示例:
82
-
83
- ```html
84
- <link rel="stylesheet" href="https://unpkg.com/@pointcloud/pcloud-components@1.0.0/dist/umd/pcloud-components.min.css" />
85
- <script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
86
- <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
87
- <script src="https://unpkg.com/@pointcloud/pcloud-components@1.0.0/dist/umd/pcloud-components.min.js"></script>
88
- ```
89
-
90
- ### 1. 基础使用
91
-
92
- ```jsx
93
- import React from 'react';
94
- import { DCascader } from '@pointcloud/pcloud-components';
95
-
96
- const App = () => {
97
- const handleChange = (value, selectedOptions) => {
98
- console.log(value, selectedOptions);
99
- };
100
-
101
- return <DCascader showSearch placeholder="请选择" onChange={handleChange} />;
102
- };
103
-
104
- export default App;
105
- ```
106
-
107
- ### 2. 使用表单组件
108
-
109
- ```jsx
110
- import React from 'react';
111
- import { DForm } from '@pointcloud/pcloud-components';
112
-
113
- const App = () => {
114
- const onFinish = (values) => {
115
- console.log('表单值:', values);
116
- };
117
- const items = [
118
- {
119
- label: '用户名',
120
- name: 'username',
121
- rules: [{ required: true, message: '请输入用户名' }],
122
- renderType: 'input',
123
- },
124
- {
125
- label: '状态',
126
- name: 'status',
127
- rules: [{ required: true, message: '请选择状态' }],
128
- renderType: 'select',
129
- options: [
130
- { label: '启用', value: 1 },
131
- { label: '禁用', value: 0 },
132
- ],
133
- },
134
- {
135
- label: '提交',
136
- renderType: 'button',
137
- type: 'primary',
138
- htmlType: 'submit',
139
- },
140
- ];
141
-
142
- return <DForm onFinish={onFinish} items={items}></DForm>;
143
- };
144
-
145
- export default App;
146
- ```
147
-
148
- ## 📖 详细文档
149
-
150
- 访问我们的[在线文档](https://frank17008.github.io/pcloud-components)查看完整的组件列表和使用示例。
151
-
152
- ## ⚙️ 环境支持
153
-
154
- - React >= 18
155
- - Ant Design <= 4.24.16
156
- - Node >= 16.20.0
157
- - Modern browsers
1
+ # @pointcloud/pcloud-components
2
+
3
+ [![NPM version](https://img.shields.io/npm/v/@pointcloud/pcloud-components.svg?style=flat)](https://npmjs.org/package/@pointcloud/pcloud-components)
4
+ [![NPM downloads](https://img.shields.io/npm/dm/@pointcloud/pcloud-components.svg?style=flat)](https://npmjs.org/package/@pointcloud/pcloud-components)
5
+ ![Jest Coverage](https://img.shields.io/badge/coverage-100%25-brightgreen?style=flat)
6
+ [![License](https://img.shields.io/npm/l/@pointcloud/pcloud-components.svg?style=flat)](https://npmjs.org/package/@pointcloud/pcloud-components)
7
+
8
+ 一套基于 Ant Design v4.24.16 和 React v18 开发的业务组件库，包含 30+ 个高质量组件，可帮助您快速构建企业级中后台产品原型。
9
+
10
+ ## 🎁 组件列表
11
+
12
+ ### 表单组件
13
+
14
+ | 组件名称 | 描述 |
15
+ | --------------- | ----------------------------------- |
16
+ | DForm | 基于 Ant Design Form 的增强表单组件 |
17
+ | DInput | 增强版输入框组件 |
18
+ | DSelect | 支持异步加载的下拉选择组件 |
19
+ | DCascader | 支持异步加载的级联选择组件 |
20
+ | DTreeSelect | 支持异步加载的树选择组件 |
21
+ | DUpload | 文件上传组件 |
22
+ | DRangePicker | 日期选择组件 |
23
+ | DynamicFormItem | 动态表单组件 |
24
+
25
+ ### 数据展示类
26
+
27
+ | 组件名称 | 描述 |
28
+ | ------------------ | ---------------- |
29
+ | DTable | 增强版表格组件 |
30
+ | LabelValue | 标签值展示组件 |
31
+ | WordCloud | 词云组件 |
32
+ | ScrollNumber | 数字滚动动画组件 |
33
+ | AspectRatio | 宽高比容器组件 |
34
+ | NoData | 无数据展示组件 |
35
+ | IPAddress | IP 地址输入组件 |
36
+ | AnimatedScrollList | 动画滚动列表组件 |
37
+ | OrgTree | 组织树组件 |
38
+ | TypewriterText | 打字机组件 |
39
+ | ErrorBoundary | 错误边界组件 |
40
+ | IconFont | 自定义图标组件 |
41
+
42
+ ### 模态框
43
+
44
+ | 组件名称 | 描述 |
45
+ | --------- | ---------------- |
46
+ | DModal | 增强版模态框组件 |
47
+ | ModalForm | 表单模态框组件 |
48
+ | LoginForm | 登录表单组件 |
49
+
50
+ ### 其他
51
+
52
+ | 组件名称 | 描述 |
53
+ | ------------------ | ------------------ |
54
+ | Loading | 全局加载组件 |
55
+ | ContextMenu | 右键菜单组件 |
56
+ | AdvancedFilter | 高级筛选组件 |
57
+ | InfiniteScrollList | 无限滚动列表组件 |
58
+ | PictureCard | 图片卡片组件 |
59
+ | SignaturePad | 签名板组件 |
60
+ | RndDrag | 可拖拽调整大小组件 |
61
+ | RCropper | 图片裁剪组件 |
62
+ | CRUD | CRUD 组件 |
63
+ | AuthComponent | 权限组件 |
64
+ | ColorPicker | 颜色选择器组件 |
65
+
66
+ ## 🚀 安装
67
+
68
+ ```bash
69
+ # 使用 npm
70
+ npm install @pointcloud/pcloud-components
71
+
72
+ # 使用 yarn
73
+ yarn add @pointcloud/pcloud-components
74
+
75
+ # 使用 pnpm
76
+ pnpm add @pointcloud/pcloud-components
77
+ ```
78
+
79
+ ## 🔨 快速开始
80
+
81
+ 通过 umd 引入时,需要先引入`react`和`react-dom`, 示例:
82
+
83
+ ```html
84
+ <link rel="stylesheet" href="https://unpkg.com/@pointcloud/pcloud-components@1.0.0/dist/umd/pcloud-components.min.css" />
85
+ <script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
86
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
87
+ <script src="https://unpkg.com/@pointcloud/pcloud-components@1.0.0/dist/umd/pcloud-components.min.js"></script>
88
+ ```
89
+
90
+ ### 1. 基础使用
91
+
92
+ ```jsx
93
+ import React from 'react';
94
+ import { DCascader } from '@pointcloud/pcloud-components';
95
+
96
+ const App = () => {
97
+ const handleChange = (value, selectedOptions) => {
98
+ console.log(value, selectedOptions);
99
+ };
100
+
101
+ return <DCascader showSearch placeholder="请选择" onChange={handleChange} />;
102
+ };
103
+
104
+ export default App;
105
+ ```
106
+
107
+ ### 2. 使用表单组件
108
+
109
+ ```jsx
110
+ import React from 'react';
111
+ import { DForm } from '@pointcloud/pcloud-components';
112
+
113
+ const App = () => {
114
+ const onFinish = (values) => {
115
+ console.log('表单值:', values);
116
+ };
117
+ const items = [
118
+ {
119
+ label: '用户名',
120
+ name: 'username',
121
+ rules: [{ required: true, message: '请输入用户名' }],
122
+ renderType: 'input',
123
+ },
124
+ {
125
+ label: '状态',
126
+ name: 'status',
127
+ rules: [{ required: true, message: '请选择状态' }],
128
+ renderType: 'select',
129
+ options: [
130
+ { label: '启用', value: 1 },
131
+ { label: '禁用', value: 0 },
132
+ ],
133
+ },
134
+ {
135
+ label: '提交',
136
+ renderType: 'button',
137
+ type: 'primary',
138
+ htmlType: 'submit',
139
+ },
140
+ ];
141
+
142
+ return <DForm onFinish={onFinish} items={items}></DForm>;
143
+ };
144
+
145
+ export default App;
146
+ ```
147
+
148
+ ## 📖 详细文档
149
+
150
+ 访问我们的[在线文档](https://frank17008.github.io/pcloud-components)查看完整的组件列表和使用示例。
151
+
152
+ ## ⚙️ 环境支持
153
+
154
+ - React >= 18
155
+ - Ant Design <= 4.24.16
156
+ - Node >= 16.20.0
157
+ - Modern browsers
package/dist/esm/AdvancedFilter/index.js CHANGED
@@ -94,6 +94,7 @@ var AdvancedFilter = function AdvancedFilter(props) {
94
94
  onSearch: _inputSearch,
95
95
  value: inputValue
96
96
  }, otherInputProps)), /*#__PURE__*/_jsxs(Button, {
97
+ type: "primary",
97
98
  className: "button",
98
99
  onClick: function onClick() {
99
100
  return setPanelVisible(!panelVisible);
package/dist/esm/AdvancedFilter/styles/index.less CHANGED
@@ -1,146 +1,143 @@
1
- @import '../../commonStyle/index.less';
2
-
3
- .@{prefix}-search-filter {
4
- align-items: center;
5
- width: 100%;
6
- margin-top: 10px;
7
- background-color: #fff;
8
-
9
- span.ant-collapse-header-text {
10
- display: inline-block;
11
- width: 100%;
12
- cursor: auto !important;
13
- }
14
-
15
- .ant-collapse-content-box {
16
- padding: 0;
17
- }
18
-
19
- .search-header {
20
- display: flex;
21
- width: 100%;
22
-
23
- .left {
24
- max-width: 100%;
25
- overflow: hidden;
26
- white-space: no-wrap;
27
- text-overflow: ellipsis;
28
-
29
- :global {
30
- .ant-radio-wrapper:first-child {
31
- border-left: 1px solid #d9d9d9;
32
- border-radius: 5px 0 0 5px;
33
- }
34
-
35
- .ant-radio-wrapper:last-child {
36
- border-radius: 0 5px 5px 0;
37
- }
38
-
39
- .ant-radio-wrapper {
40
- margin-right: 0;
41
- padding: 4px 6px;
42
- border: 1px solid #d9d9d9;
43
- border-top-width: 1px;
44
- border-left: 1px solid #fff;
45
- border-left-width: 1px;
46
-
47
- .ant-radio {
48
- display: none;
49
- }
50
- }
51
-
52
- .ant-radio-wrapper:hover {
53
- color: #1890ff;
54
- }
55
-
56
- .ant-radio-wrapper-checked {
57
- z-index: 1;
58
- color: #1890ff;
59
- background: #fff;
60
- border: 1px solid #1890ff;
61
- border-left: 1px solid #1890ff !important;
62
- }
63
- }
64
- }
65
-
66
- .right {
67
- display: flex;
68
- justify-content: center;
69
-
70
- .input {
71
- width: 200px;
72
- border-radius: 4px;
73
- }
74
-
75
- .button {
76
- margin-left: 10px;
77
- color: #fff;
78
- background-color: #ff7e00;
79
- border-radius: 4px;
80
-
81
- &:active,
82
- &:focus,
83
- &:hover {
84
- border-color: transparent;
85
- }
86
-
87
- .icon {
88
- margin-left: 8px;
89
- transition: transform 0.4s;
90
-
91
- &.down {
92
- transform: rotateZ(180deg);
93
- }
94
-
95
- &.up {
96
- transform: rotateZ(0deg);
97
- }
98
- }
99
- }
100
- }
101
- }
102
-
103
- .title {
104
- display: flex;
105
- align-items: center;
106
- margin: 0 10px;
107
- padding-bottom: 10px;
108
- font-weight: bold;
109
- border-bottom: 1px solid #f0f0f0;
110
-
111
- span.icon {
112
- width: 4px;
113
- height: 16px;
114
- margin-right: 6px;
115
- background-color: #ff7e00;
116
- border-radius: 2px;
117
- }
118
- }
119
-
120
- .search-content {
121
- .filter-row {
122
- display: flex;
123
- flex-wrap: wrap;
124
- width: 100%;
125
- padding: 10px;
126
- }
127
-
128
- .filter-col {
129
- height: 30px;
130
- margin-bottom: 10px;
131
- line-height: 30px;
132
- }
133
-
134
- .filter-col .ant-picker {
135
- width: 100%;
136
- }
137
-
138
- .search-btn {
139
- justify-content: center;
140
-
141
- > button {
142
- margin: 0 5px;
143
- }
144
- }
145
- }
146
- }
1
+ @import '../../commonStyle/index.less';
2
+
3
+ .@{prefix}-search-filter {
4
+ align-items: center;
5
+ width: 100%;
6
+ margin-top: 10px;
7
+ background-color: #fff;
8
+
9
+ span.ant-collapse-header-text {
10
+ display: inline-block;
11
+ width: 100%;
12
+ cursor: auto !important;
13
+ }
14
+
15
+ .ant-collapse-content-box {
16
+ padding: 0;
17
+ }
18
+
19
+ .search-header {
20
+ display: flex;
21
+ width: 100%;
22
+
23
+ .left {
24
+ max-width: 100%;
25
+ overflow: hidden;
26
+ white-space: no-wrap;
27
+ text-overflow: ellipsis;
28
+
29
+ :global {
30
+ .ant-radio-wrapper:first-child {
31
+ border-left: 1px solid #d9d9d9;
32
+ border-radius: 5px 0 0 5px;
33
+ }
34
+
35
+ .ant-radio-wrapper:last-child {
36
+ border-radius: 0 5px 5px 0;
37
+ }
38
+
39
+ .ant-radio-wrapper {
40
+ margin-right: 0;
41
+ padding: 4px 6px;
42
+ border: 1px solid #d9d9d9;
43
+ border-top-width: 1px;
44
+ border-left: 1px solid #fff;
45
+ border-left-width: 1px;
46
+
47
+ .ant-radio {
48
+ display: none;
49
+ }
50
+ }
51
+
52
+ .ant-radio-wrapper:hover {
53
+ color: #1890ff;
54
+ }
55
+
56
+ .ant-radio-wrapper-checked {
57
+ z-index: 1;
58
+ color: #1890ff;
59
+ background: #fff;
60
+ border: 1px solid #1890ff;
61
+ border-left: 1px solid #1890ff !important;
62
+ }
63
+ }
64
+ }
65
+
66
+ .right {
67
+ display: flex;
68
+ justify-content: center;
69
+
70
+ .input {
71
+ width: 200px;
72
+ border-radius: 4px;
73
+ }
74
+
75
+ .button {
76
+ margin-left: 10px;
77
+
78
+ &:active,
79
+ &:focus,
80
+ &:hover {
81
+ border-color: transparent;
82
+ }
83
+
84
+ .icon {
85
+ margin-left: 8px;
86
+ transition: transform 0.4s;
87
+
88
+ &.down {
89
+ transform: rotateZ(180deg);
90
+ }
91
+
92
+ &.up {
93
+ transform: rotateZ(0deg);
94
+ }
95
+ }
96
+ }
97
+ }
98
+ }
99
+
100
+ .title {
101
+ display: flex;
102
+ align-items: center;
103
+ margin: 0 10px;
104
+ padding-bottom: 10px;
105
+ font-weight: bold;
106
+ border-bottom: 1px solid #f0f0f0;
107
+
108
+ span.icon {
109
+ width: 4px;
110
+ height: 16px;
111
+ margin-right: 6px;
112
+ background-color: #1890ff;
113
+ border-radius: 2px;
114
+ }
115
+ }
116
+
117
+ .search-content {
118
+ .filter-row {
119
+ display: flex;
120
+ flex-wrap: wrap;
121
+ width: 100%;
122
+ padding: 10px;
123
+ }
124
+
125
+ .filter-col {
126
+ height: 30px;
127
+ margin-bottom: 10px;
128
+ line-height: 30px;
129
+ }
130
+
131
+ .filter-col .ant-picker {
132
+ width: 100%;
133
+ }
134
+
135
+ .search-btn {
136
+ justify-content: center;
137
+
138
+ > button {
139
+ margin: 0 5px;
140
+ }
141
+ }
142
+ }
143
+ }
package/dist/esm/CRUD/index.less CHANGED
@@ -4,6 +4,7 @@
4
4
  height: 100%;
5
5
  display: flex;
6
6
  flex-direction: column;
7
+ overflow: hidden;
7
8
 
8
9
  &.fullscreen {
9
10
  position: fixed;
@@ -134,6 +135,7 @@
134
135
 
135
136
  &-table {
136
137
  flex: 1;
138
+ overflow: hidden;
137
139
  }
138
140
 
139
141
  &-modalform-view {
package/dist/esm/CRUD/toolbar.d.ts CHANGED
@@ -7,10 +7,10 @@ export interface ToolbarProps {
7
7
  conditionVisible?: boolean;
8
8
  columns?: DColumnType[];
9
9
  onActions?: {
10
- setFullScreen?: (fullScreen: boolean) => void;
10
+ setFullScreen?: (_fullScreen: boolean) => void;
11
11
  handleRefresh?: () => void;
12
- onColumnSettingChanged?: (checkedList: CheckboxValueType[], sortedColumns?: DColumnType[]) => void;
13
- setConditionVisible?: (visible: boolean) => void;
12
+ onColumnSettingChanged?: (_checkedList: CheckboxValueType[], _sortedColumns?: DColumnType[]) => void;
13
+ setConditionVisible?: (_visible: boolean) => void;
14
14
  };
15
15
  }
16
16
  declare function Toolbar({ className, fullScreen, conditionVisible, columns, onActions }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
package/dist/esm/DTable/index.d.ts CHANGED
@@ -33,11 +33,11 @@ export type DTableRef = {
33
33
  /** 手动刷新列表方法
34
34
  * @param params 可选的新参数，如果不传则使用现有参数
35
35
  */
36
- refresh: (params?: TableParamsProps) => void;
36
+ refresh: (_params?: TableParamsProps) => void;
37
37
  /** 手动刷新列表到指定页数方法
38
38
  * @param page 指定页数
39
39
  */
40
- refreshToPage: (page: number) => void;
40
+ refreshToPage: (_page: number) => void;
41
41
  /** 获取当前分页信息 */
42
42
  getPaginationState: () => {
43
43
  current: number;