@pointcloud/pcloud-components 1.0.5 → 1.0.7

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 (41) hide show
  1. package/README.md +157 -157
  2. package/dist/esm/AdvancedFilter/styles/index.less +143 -143
  3. package/dist/esm/AnimatedScrollList/styles/index.less +22 -22
  4. package/dist/esm/CRUD/index.d.ts +4 -1
  5. package/dist/esm/CRUD/index.js +18 -7
  6. package/dist/esm/CRUD/index.less +156 -156
  7. package/dist/esm/ColorPicker/index.js +4 -4
  8. package/dist/esm/ContextMenu/index.less +61 -61
  9. package/dist/esm/DCascader/index.d.ts +1 -1
  10. package/dist/esm/DForm/DItem/index.js +15 -3
  11. package/dist/esm/DForm/DItem/itemType.d.ts +3 -2
  12. package/dist/esm/DForm/DItem/itemsRender.d.ts +1 -1
  13. package/dist/esm/DForm/DItem/itemsRender.js +6 -6
  14. package/dist/esm/DForm/index.js +6 -6
  15. package/dist/esm/DForm/index.less +50 -50
  16. package/dist/esm/DInput/index.js +6 -6
  17. package/dist/esm/DModal/styles/index.less +33 -33
  18. package/dist/esm/DRangePicker/index.less +30 -30
  19. package/dist/esm/DSelect/index.d.ts +1 -1
  20. package/dist/esm/DTable/index.d.ts +5 -1
  21. package/dist/esm/DTable/index.js +50 -11
  22. package/dist/esm/DTable/index.less +61 -61
  23. package/dist/esm/DUpload/helper.js +47 -47
  24. package/dist/esm/DUpload/index.js +6 -6
  25. package/dist/esm/DynamicFormItem/index.less +28 -28
  26. package/dist/esm/IPAddress/index.less +75 -75
  27. package/dist/esm/InfiniteScrollList/styles/index.less +24 -24
  28. package/dist/esm/Loading/styles/index.less +37 -37
  29. package/dist/esm/ModalTable/index.d.ts +3 -0
  30. package/dist/esm/ModalTable/index.js +95 -0
  31. package/dist/esm/ModalTable/interface.d.ts +23 -0
  32. package/dist/esm/ModalTable/interface.js +1 -0
  33. package/dist/esm/OrgTree/index.less +15 -15
  34. package/dist/esm/RCropper/index.js +5 -5
  35. package/dist/esm/RCropper/styles/toolbar.less +25 -25
  36. package/dist/esm/SignaturePad/style/index.less +47 -47
  37. package/dist/esm/TypewriterText/index.less +29 -29
  38. package/dist/esm/index.d.ts +3 -1
  39. package/dist/esm/index.js +1 -0
  40. package/dist/umd/pcloud-components.min.js +1 -1
  41. package/package.json +2 -2
@@ -1,28 +1,28 @@
1
- .dynamic-form-item {
2
- width: 100%;
3
- display: flex;
4
- align-items: flex-start;
5
- gap: 8px;
6
- margin-bottom: 8px;
7
-
8
- .ant-form-item {
9
- flex: 1;
10
- margin-bottom: 0;
11
- }
12
-
13
- .ant-btn-link {
14
- flex-shrink: 0;
15
- }
16
-
17
- &.single {
18
- .ant-space-item:first-of-type {
19
- display: flex;
20
- flex: 1;
21
- }
22
- }
23
- }
24
-
25
- // 隐藏其他label,只显示第一个但占位
26
- .dynamic-form-item ~ .dynamic-form-item .ant-col.ant-form-item-label {
27
- visibility: hidden;
28
- }
1
+ .dynamic-form-item {
2
+ width: 100%;
3
+ display: flex;
4
+ align-items: flex-start;
5
+ gap: 8px;
6
+ margin-bottom: 8px;
7
+
8
+ .ant-form-item {
9
+ flex: 1;
10
+ margin-bottom: 0;
11
+ }
12
+
13
+ .ant-btn-link {
14
+ flex-shrink: 0;
15
+ }
16
+
17
+ &.single {
18
+ .ant-space-item:first-of-type {
19
+ display: flex;
20
+ flex: 1;
21
+ }
22
+ }
23
+ }
24
+
25
+ // 隐藏其他label,只显示第一个但占位
26
+ .dynamic-form-item ~ .dynamic-form-item .ant-col.ant-form-item-label {
27
+ visibility: hidden;
28
+ }
@@ -1,75 +1,75 @@
1
- @import '../commonStyle/index.less';
2
-
3
- .@{prefix}-ip-address {
4
- border: 1px solid #d9d9d9;
5
- border-radius: 2px;
6
- transition: all 0.3s;
7
- display: inline-block;
8
-
9
- &.small {
10
- height: 24px;
11
- }
12
-
13
- &.large {
14
- padding: 6.5px 10px;
15
- }
16
-
17
- &.middle {
18
- padding: 4px 10px;
19
- }
20
-
21
- &.disabled {
22
- color: rgba(0, 0, 0, 25%);
23
- background-color: #f5f5f5;
24
- border-color: #d9d9d9;
25
- box-shadow: none;
26
- cursor: not-allowed;
27
- opacity: 1;
28
-
29
- &:hover {
30
- border-color: #d9d9d9;
31
- }
32
- }
33
-
34
- &:hover {
35
- border-color: #4d90ff;
36
- }
37
-
38
- &:focus-within {
39
- border-color: #40a9ff;
40
- box-shadow: 0 0 0 2px rgba(24, 144, 255, 20%);
41
- }
42
-
43
- input {
44
- border: none;
45
- background: none;
46
- text-align: center;
47
- outline: 0;
48
- padding: 0;
49
- margin: 0;
50
- box-sizing: border-box;
51
- font-variant: tabular-nums;
52
- font-feature-settings: 'tnum';
53
- position: relative;
54
- display: inline-block;
55
- color: #000000d9;
56
- font-size: 14px;
57
- line-height: 1.5715;
58
- }
59
-
60
- input[disabled] {
61
- cursor: not-allowed;
62
- color: inherit;
63
- }
64
-
65
- input[type='number'] {
66
- appearance: textfield; /* 移除Firefox的特殊样式 */
67
- }
68
-
69
- /* 移除上下箭头 */
70
- input[type='number']::-webkit-outer-spin-button,
71
- input[type='number']::-webkit-inner-spin-button {
72
- appearance: none;
73
- margin: 0;
74
- }
75
- }
1
+ @import '../commonStyle/index.less';
2
+
3
+ .@{prefix}-ip-address {
4
+ border: 1px solid #d9d9d9;
5
+ border-radius: 2px;
6
+ transition: all 0.3s;
7
+ display: inline-block;
8
+
9
+ &.small {
10
+ height: 24px;
11
+ }
12
+
13
+ &.large {
14
+ padding: 6.5px 10px;
15
+ }
16
+
17
+ &.middle {
18
+ padding: 4px 10px;
19
+ }
20
+
21
+ &.disabled {
22
+ color: rgba(0, 0, 0, 25%);
23
+ background-color: #f5f5f5;
24
+ border-color: #d9d9d9;
25
+ box-shadow: none;
26
+ cursor: not-allowed;
27
+ opacity: 1;
28
+
29
+ &:hover {
30
+ border-color: #d9d9d9;
31
+ }
32
+ }
33
+
34
+ &:hover {
35
+ border-color: #4d90ff;
36
+ }
37
+
38
+ &:focus-within {
39
+ border-color: #40a9ff;
40
+ box-shadow: 0 0 0 2px rgba(24, 144, 255, 20%);
41
+ }
42
+
43
+ input {
44
+ border: none;
45
+ background: none;
46
+ text-align: center;
47
+ outline: 0;
48
+ padding: 0;
49
+ margin: 0;
50
+ box-sizing: border-box;
51
+ font-variant: tabular-nums;
52
+ font-feature-settings: 'tnum';
53
+ position: relative;
54
+ display: inline-block;
55
+ color: #000000d9;
56
+ font-size: 14px;
57
+ line-height: 1.5715;
58
+ }
59
+
60
+ input[disabled] {
61
+ cursor: not-allowed;
62
+ color: inherit;
63
+ }
64
+
65
+ input[type='number'] {
66
+ appearance: textfield; /* 移除Firefox的特殊样式 */
67
+ }
68
+
69
+ /* 移除上下箭头 */
70
+ input[type='number']::-webkit-outer-spin-button,
71
+ input[type='number']::-webkit-inner-spin-button {
72
+ appearance: none;
73
+ margin: 0;
74
+ }
75
+ }
@@ -1,24 +1,24 @@
1
- @import '../../commonStyle/index.less';
2
-
3
- .@{prefix}-infinite-scroll-wrapper {
4
- .ant-list .ant-row {
5
- margin-right: 0 !important;
6
- }
7
- }
8
-
9
- .scroll-container {
10
- position: relative;
11
- overflow-y: auto;
12
- overflow-x: hidden;
13
-
14
- .backtop {
15
- right: 50px;
16
- }
17
-
18
- .up {
19
- background: #007aff;
20
- color: #fff;
21
- text-align: center;
22
- border-radius: 3px;
23
- }
24
- }
1
+ @import '../../commonStyle/index.less';
2
+
3
+ .@{prefix}-infinite-scroll-wrapper {
4
+ .ant-list .ant-row {
5
+ margin-right: 0 !important;
6
+ }
7
+ }
8
+
9
+ .scroll-container {
10
+ position: relative;
11
+ overflow-y: auto;
12
+ overflow-x: hidden;
13
+
14
+ .backtop {
15
+ right: 50px;
16
+ }
17
+
18
+ .up {
19
+ background: #007aff;
20
+ color: #fff;
21
+ text-align: center;
22
+ border-radius: 3px;
23
+ }
24
+ }
@@ -1,37 +1,37 @@
1
- @import '../../commonStyle/index.less';
2
-
3
- .@{prefix}-loading {
4
- .mask {
5
- position: absolute;
6
- top: 0;
7
- left: 0;
8
- z-index: 100000;
9
- width: 100%;
10
- height: 100%;
11
- overflow: hidden;
12
- background: rgba(0, 0, 0, 30%); // 添加半透明背景色
13
- }
14
-
15
- .loading {
16
- position: absolute;
17
- top: 50%;
18
- left: 50%;
19
- z-index: 100001;
20
- padding: 20px;
21
- background: rgba(255, 255, 255, 90%); // 调整背景透明度
22
- border-radius: 10px;
23
- box-shadow: 3px 3px 3px rgba(0, 0, 0, 20%); // 调整阴影
24
- transform: translate(-50%, -50%);
25
- }
26
-
27
- /* 当挂载到body时使用fixed定位 */
28
- &.body-container {
29
- .mask {
30
- position: fixed;
31
- }
32
-
33
- .loading {
34
- position: fixed;
35
- }
36
- }
37
- }
1
+ @import '../../commonStyle/index.less';
2
+
3
+ .@{prefix}-loading {
4
+ .mask {
5
+ position: absolute;
6
+ top: 0;
7
+ left: 0;
8
+ z-index: 100000;
9
+ width: 100%;
10
+ height: 100%;
11
+ overflow: hidden;
12
+ background: rgba(0, 0, 0, 30%); // 添加半透明背景色
13
+ }
14
+
15
+ .loading {
16
+ position: absolute;
17
+ top: 50%;
18
+ left: 50%;
19
+ z-index: 100001;
20
+ padding: 20px;
21
+ background: rgba(255, 255, 255, 90%); // 调整背景透明度
22
+ border-radius: 10px;
23
+ box-shadow: 3px 3px 3px rgba(0, 0, 0, 20%); // 调整阴影
24
+ transform: translate(-50%, -50%);
25
+ }
26
+
27
+ /* 当挂载到body时使用fixed定位 */
28
+ &.body-container {
29
+ .mask {
30
+ position: fixed;
31
+ }
32
+
33
+ .loading {
34
+ position: fixed;
35
+ }
36
+ }
37
+ }
@@ -0,0 +1,3 @@
1
+ import type { ModalTableProps } from './interface';
2
+ declare const _default: (props: ModalTableProps) => import("react/jsx-runtime").JSX.Element;
3
+ export default _default;
@@ -0,0 +1,95 @@
1
+ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
2
+ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
3
+ import { useRef, useCallback, useMemo } from 'react';
4
+ import DForm from "../DForm";
5
+ import DModal from "../DModal";
6
+ import DTable from "../DTable";
7
+ import { jsx as _jsx } from "react/jsx-runtime";
8
+ import { jsxs as _jsxs } from "react/jsx-runtime";
9
+ export default (function (props) {
10
+ var _props$modalProps = props.modalProps,
11
+ modalProps = _props$modalProps === void 0 ? {} : _props$modalProps,
12
+ formProps = props.formProps,
13
+ tableProps = props.tableProps,
14
+ _props$showSearchForm = props.showSearchForm,
15
+ showSearchForm = _props$showSearchForm === void 0 ? true : _props$showSearchForm,
16
+ _props$searchMode = props.searchMode,
17
+ searchMode = _props$searchMode === void 0 ? 'immediate' : _props$searchMode;
18
+ var tableRef = useRef(null);
19
+ var handleSearch = useCallback(function (values) {
20
+ if (tableRef.current) {
21
+ tableRef.current.refresh(_objectSpread({}, values));
22
+ }
23
+ }, []);
24
+ var defaultFormItems = useMemo(function () {
25
+ if (searchMode === 'submit') {
26
+ return [{
27
+ renderType: 'button',
28
+ htmlType: 'submit',
29
+ label: '查询',
30
+ type: 'primary',
31
+ className: 'search-button',
32
+ style: {
33
+ marginBottom: '24px'
34
+ }
35
+ }, {
36
+ renderType: 'button',
37
+ htmlType: 'reset',
38
+ label: '重置',
39
+ className: 'reset-button',
40
+ style: {
41
+ marginLeft: '10px',
42
+ marginBottom: '24px'
43
+ }
44
+ }];
45
+ }
46
+ return [];
47
+ }, [searchMode]);
48
+ var mergedItems = useMemo(function () {
49
+ if (!(formProps !== null && formProps !== void 0 && formProps.items) || formProps.items.length === 0) {
50
+ return defaultFormItems;
51
+ }
52
+ return [].concat(_toConsumableArray(formProps.items), _toConsumableArray(defaultFormItems));
53
+ }, [formProps === null || formProps === void 0 ? void 0 : formProps.items, defaultFormItems]);
54
+ var searchFormProps = _objectSpread(_objectSpread({
55
+ layout: 'inline',
56
+ onFinish: searchMode === 'submit' ? handleSearch : undefined,
57
+ onReset: searchMode === 'submit' ? function () {
58
+ var _formProps$items;
59
+ var resetValues = {
60
+ current: 1
61
+ };
62
+ formProps === null || formProps === void 0 || (_formProps$items = formProps.items) === null || _formProps$items === void 0 || _formProps$items.forEach(function (item) {
63
+ if (item.name) {
64
+ resetValues[item.name] = undefined;
65
+ }
66
+ });
67
+ handleSearch(resetValues);
68
+ } : undefined,
69
+ onValuesChange: searchMode === 'immediate' ? function (_, allValues) {
70
+ return handleSearch(_objectSpread(_objectSpread({}, allValues), {}, {
71
+ current: 1
72
+ }));
73
+ } : undefined
74
+ }, formProps), {}, {
75
+ items: mergedItems
76
+ });
77
+ var tableElement = /*#__PURE__*/_jsx(DTable, _objectSpread(_objectSpread({}, tableProps), {}, {
78
+ ref: tableRef
79
+ }));
80
+ return /*#__PURE__*/_jsxs(DModal, _objectSpread(_objectSpread({
81
+ open: modalProps.open,
82
+ style: {
83
+ height: 'auto'
84
+ },
85
+ centered: true,
86
+ destroyOnClose: true,
87
+ bodyStyle: {
88
+ maxHeight: '600px',
89
+ overflowY: 'auto'
90
+ },
91
+ title: modalProps.title || '数据列表'
92
+ }, modalProps), {}, {
93
+ children: [showSearchForm && /*#__PURE__*/_jsx(DForm, _objectSpread({}, searchFormProps)), tableElement]
94
+ }));
95
+ });
@@ -0,0 +1,23 @@
1
+ /// <reference types="react" />
2
+ import type { DModalProps } from '../DModal/interface';
3
+ import type { DFormProps } from '../DForm';
4
+ import type { DTableProps, DTableRef } from '../DTable';
5
+ export interface ModalTableProps {
6
+ /** DModal props */
7
+ modalProps?: DModalProps;
8
+ /** DForm props for search form */
9
+ formProps?: DFormProps;
10
+ /** DTable props */
11
+ tableProps?: DTableProps & {
12
+ ref?: React.Ref<DTableRef>;
13
+ };
14
+ /** Whether to show search form, default true */
15
+ showSearchForm?: boolean;
16
+ /**
17
+ * 搜索模式
18
+ * - `immediate`: 表单值变化时立即请求数据刷新
19
+ * - `submit`: 表单提交时请求数据刷新,表单会自动补充查询和重置按钮
20
+ * @default 'immediate'
21
+ */
22
+ searchMode?: 'immediate' | 'submit';
23
+ }
@@ -0,0 +1 @@
1
+ export {};
@@ -1,15 +1,15 @@
1
- @import '../commonStyle/index.less';
2
-
3
- .@{prefix}-org-tree {
4
- width: 100%;
5
- height: 100%;
6
- overflow: auto;
7
- position: relative;
8
- display: flex;
9
- align-items: center;
10
- justify-content: center;
11
-
12
- .org-tree-node-label {
13
- cursor: pointer;
14
- }
15
- }
1
+ @import '../commonStyle/index.less';
2
+
3
+ .@{prefix}-org-tree {
4
+ width: 100%;
5
+ height: 100%;
6
+ overflow: auto;
7
+ position: relative;
8
+ display: flex;
9
+ align-items: center;
10
+ justify-content: center;
11
+
12
+ .org-tree-node-label {
13
+ cursor: pointer;
14
+ }
15
+ }
@@ -13,11 +13,11 @@ var isNonEmptyObject = function isNonEmptyObject(obj) {
13
13
  return _typeof(obj) === 'object' && obj !== null && !Array.isArray(obj) && Object.keys(obj).length > 0;
14
14
  };
15
15
 
16
- /**
17
- * 属性设置方法
18
- * @param element DOM元素
19
- * @param attrName 属性名(kebab-case)
20
- * @param value 属性值
16
+ /**
17
+ * 属性设置方法
18
+ * @param element DOM元素
19
+ * @param attrName 属性名(kebab-case)
20
+ * @param value 属性值
21
21
  */
22
22
  var setElementAttribute = function setElementAttribute(element, attrName, value) {
23
23
  if (!element) return;
@@ -1,25 +1,25 @@
1
- .toolbar {
2
- display: flex;
3
- background-color: rgba(0, 0, 0, 50%);
4
- justify-content: center;
5
- align-items: center;
6
- color: #fff;
7
-
8
- button {
9
- background-color: transparent;
10
- border-width: 0;
11
- cursor: pointer;
12
- display: flex;
13
- align-items: center;
14
- // width: 32px;
15
- // height: 32px;
16
-
17
- &:hover {
18
- background-color: #0074d9;
19
- }
20
- }
21
-
22
- .icon > path {
23
- fill: #fff;
24
- }
25
- }
1
+ .toolbar {
2
+ display: flex;
3
+ background-color: rgba(0, 0, 0, 50%);
4
+ justify-content: center;
5
+ align-items: center;
6
+ color: #fff;
7
+
8
+ button {
9
+ background-color: transparent;
10
+ border-width: 0;
11
+ cursor: pointer;
12
+ display: flex;
13
+ align-items: center;
14
+ // width: 32px;
15
+ // height: 32px;
16
+
17
+ &:hover {
18
+ background-color: #0074d9;
19
+ }
20
+ }
21
+
22
+ .icon > path {
23
+ fill: #fff;
24
+ }
25
+ }
@@ -1,47 +1,47 @@
1
- @import '../../commonStyle/index.less';
2
-
3
- .@{prefix}-signature-pad {
4
- display: flex;
5
- flex-direction: column;
6
- align-items: center;
7
- justify-content: center;
8
- position: relative;
9
-
10
- &-canvas {
11
- border: 1px solid #d9d9d9;
12
- border-radius: 4px;
13
- }
14
-
15
- &-toolbar {
16
- margin-top: 8px;
17
- display: flex;
18
- justify-content: flex-end;
19
- gap: 8px;
20
- text-align: center;
21
- }
22
-
23
- &-button {
24
- min-width: 64px;
25
- height: 32px;
26
- padding: 4px 16px;
27
- border: 1px solid #1677ff;
28
- border-radius: 4px;
29
- background-color: #fff;
30
- color: #1677ff;
31
- cursor: pointer;
32
- transition: all 0.3s;
33
-
34
- &:hover {
35
- background-color: #f0f5ff;
36
- }
37
-
38
- &:last-child {
39
- background-color: #1677ff;
40
- color: #fff;
41
-
42
- &:hover {
43
- background-color: #4096ff;
44
- }
45
- }
46
- }
47
- }
1
+ @import '../../commonStyle/index.less';
2
+
3
+ .@{prefix}-signature-pad {
4
+ display: flex;
5
+ flex-direction: column;
6
+ align-items: center;
7
+ justify-content: center;
8
+ position: relative;
9
+
10
+ &-canvas {
11
+ border: 1px solid #d9d9d9;
12
+ border-radius: 4px;
13
+ }
14
+
15
+ &-toolbar {
16
+ margin-top: 8px;
17
+ display: flex;
18
+ justify-content: flex-end;
19
+ gap: 8px;
20
+ text-align: center;
21
+ }
22
+
23
+ &-button {
24
+ min-width: 64px;
25
+ height: 32px;
26
+ padding: 4px 16px;
27
+ border: 1px solid #1677ff;
28
+ border-radius: 4px;
29
+ background-color: #fff;
30
+ color: #1677ff;
31
+ cursor: pointer;
32
+ transition: all 0.3s;
33
+
34
+ &:hover {
35
+ background-color: #f0f5ff;
36
+ }
37
+
38
+ &:last-child {
39
+ background-color: #1677ff;
40
+ color: #fff;
41
+
42
+ &:hover {
43
+ background-color: #4096ff;
44
+ }
45
+ }
46
+ }
47
+ }