dcp-design-react 1.12.14 → 1.12.16

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.
@@ -1,303 +1,303 @@
1
- /*
2
- * @Author: 焦质晔
3
- * @Date: 2020-02-28 22:11:53
4
- * @Last Modified by: 焦质晔
5
- * @Last Modified time: 2025-06-17 10:44:57
6
- */
7
- .TheadAlignCenter {
8
- .cell--text {
9
- justify-content: center !important;
10
- }
11
- }
12
-
13
- .TheadAlignRight {
14
- .cell--text {
15
- justify-content: flex-end !important;
16
- }
17
- }
18
-
19
- .@{prefix-table}--header-wrapper {
20
- background-color: @v-table-header-background-color;
21
- .@{prefix-table}--header {
22
- tr > th[colspan]:not([colspan='1']) {
23
- .TheadAlignCenter();
24
- }
25
- }
26
- .gutter {
27
- background-color: @v-table-header-background-color;
28
- }
29
- }
30
-
31
- .header--column {
32
- .cell--wrapper {
33
- display: flex;
34
- align-items: center;
35
- .cell--text {
36
- display: flex;
37
- align-items: center;
38
- justify-content: flex-start;
39
- flex: 1;
40
- /* 重要 */
41
- width: 0;
42
- .cell {
43
- padding-right: 2px;
44
- .text-ellipsis-2();
45
- }
46
- .tip {
47
- padding: 2px;
48
- cursor: default;
49
- }
50
- }
51
- }
52
- &.column-has-filter {
53
- .cell--wrapper {
54
- margin-right: 16px;
55
- }
56
- }
57
- &.col--center {
58
- .TheadAlignCenter();
59
- }
60
- &.col--right {
61
- .TheadAlignRight();
62
- }
63
- &:not(.column-has-sorter):not(.column-has-filter) {
64
- .cell--text {
65
- .cell {
66
- padding-right: @v-module-distance;
67
- }
68
- .tip {
69
- margin-left: -8px;
70
- }
71
- }
72
- }
73
- &.column--required {
74
- .cell {
75
- &::before {
76
- content: '*';
77
- color: @v-danger-color;
78
- margin-right: 2px;
79
- }
80
- }
81
- }
82
-
83
- /* 全选 */
84
- .cell--selection {
85
- display: flex;
86
- align-items: center;
87
- .icon {
88
- padding: 2px;
89
- margin-left: 2px;
90
- margin-top: 1px;
91
- font-size: @v-font-size;
92
- color: @v-icon-color;
93
- cursor: pointer;
94
- }
95
- .info {
96
- flex-shrink: 0;
97
- margin-left: 4px;
98
- font-size: @v-font-size - 1px;
99
- color: @v-font-color-placeholder;
100
- }
101
- }
102
-
103
- /* 排序 */
104
- .cell--sorter {
105
- font-size: 0.8em;
106
- flex-shrink: 0;
107
- display: flex;
108
- flex-direction: column;
109
- align-items: center;
110
- cursor: pointer;
111
- // transform: scale(0.8, 0.8);
112
- &__asc,
113
- &__desc {
114
- color: @v-icon-color;
115
- &.actived {
116
- color: @v-primary-color;
117
- }
118
- }
119
- &__asc {
120
- transform: translateY(1.5px);
121
- }
122
- &__desc {
123
- transform: translateY(-1.5px);
124
- }
125
- }
126
-
127
- /* 筛选 */
128
- .cell--filter {
129
- width: 16px;
130
- display: flex;
131
- justify-content: center;
132
- align-items: center;
133
- position: absolute;
134
- top: 0;
135
- right: 0;
136
- bottom: 0;
137
- color: @v-icon-color;
138
- transition: all 0.3s ease;
139
- cursor: pointer;
140
- .icon {
141
- transform: scale(0.8, 0.9);
142
- }
143
- &:hover,
144
- &.selected {
145
- color: @v-font-color-placeholder;
146
- background-color: @v-table-column-filter-hover-color;
147
- }
148
- &.actived {
149
- color: @v-primary-color;
150
- }
151
- }
152
-
153
- .resizable {
154
- position: absolute;
155
- top: 0;
156
- bottom: 0;
157
- right: -5px;
158
- width: 10px;
159
- z-index: 1;
160
- cursor: col-resize;
161
- &.is--line {
162
- &:before {
163
- content: '';
164
- position: absolute;
165
- left: 50%;
166
- top: 20%;
167
- width: 1px;
168
- height: 60%;
169
- background-color: @v-table-resizable-color;
170
- }
171
- }
172
- }
173
- }
174
-
175
- .head-filter__popper {
176
- padding: @v-module-distance !important;
177
- max-height: 424px;
178
- overflow-y: auto;
179
- }
180
-
181
- .head-filter--wrap {
182
- @modulePadding: 6px;
183
- .filter-list {
184
- ul {
185
- li {
186
- display: flex;
187
- align-items: center;
188
- margin-bottom: @modulePadding;
189
- .label {
190
- width: 20px;
191
- }
192
- }
193
- }
194
- }
195
- .filter-box {
196
- display: flex;
197
- align-items: center;
198
- .condition {
199
- .ant-select-selector {
200
- padding: 0 @modulePadding;
201
- .ant-select-selection-item {
202
- padding-right: @v-module-distance;
203
- }
204
- }
205
- .ant-select-arrow {
206
- right: @modulePadding;
207
- }
208
- }
209
- }
210
- .list-panel {
211
- .btn {
212
- display: inline-block;
213
- text-align: center;
214
- text-transform: none;
215
- text-decoration: none;
216
- background: transparent;
217
- border: 0;
218
- outline: 0;
219
- box-shadow: none;
220
- cursor: pointer;
221
- }
222
- .select-all {
223
- display: flex;
224
- align-items: center;
225
- justify-content: space-between;
226
- margin: 5px 0 2px;
227
- .action {
228
- flex: 1 0;
229
- }
230
- .ant-checkbox + span {
231
- padding-right: 4px;
232
- }
233
- .divider {
234
- font-style: normal;
235
- color: @v-font-disabled-color;
236
- }
237
- .invert {
238
- padding: 0 4px;
239
- cursor: pointer;
240
- &:disabled {
241
- color: @v-font-disabled-color;
242
- cursor: not-allowed;
243
- }
244
- }
245
- .total {
246
- font-size: @v-font-size - 1px;
247
- color: @v-font-color-placeholder;
248
- }
249
- }
250
- .select-list {
251
- margin-right: -10px;
252
- .list-item {
253
- width: 200px;
254
- height: 26px;
255
- display: flex;
256
- align-items: center;
257
- &:hover {
258
- .right {
259
- display: block;
260
- }
261
- }
262
- .ant-checkbox-wrapper {
263
- flex: auto;
264
- min-width: 0;
265
- & > span:nth-child(2) {
266
- padding-right: 4px;
267
- .text-overflow-cut();
268
- }
269
- }
270
- .right {
271
- flex-shrink: 0;
272
- padding: 0;
273
- font-size: @v-font-size - 1px;
274
- color: @v-primary-color;
275
- display: none;
276
- }
277
- }
278
- }
279
- }
280
- .tree-panel {
281
- width: 200px;
282
- .ant-tree {
283
- margin-right: -5px;
284
- }
285
- }
286
- .footer {
287
- margin-top: @modulePadding;
288
- padding-top: @modulePadding + 2px;
289
- margin-left: -@v-module-distance;
290
- width: calc(100% + @v-module-distance + @v-module-distance);
291
- padding-right: @v-module-distance;
292
- border-top: 1px solid @--border-color-secondary;
293
- }
294
- }
295
-
296
- .all-selection__popper {
297
- .ant-dropdown-menu {
298
- &-item {
299
- padding-left: 12px;
300
- padding-right: 12px;
301
- }
302
- }
303
- }
1
+ /*
2
+ * @Author: 焦质晔
3
+ * @Date: 2020-02-28 22:11:53
4
+ * @Last Modified by: 焦质晔
5
+ * @Last Modified time: 2025-06-17 10:44:57
6
+ */
7
+ .TheadAlignCenter {
8
+ .cell--text {
9
+ justify-content: center !important;
10
+ }
11
+ }
12
+
13
+ .TheadAlignRight {
14
+ .cell--text {
15
+ justify-content: flex-end !important;
16
+ }
17
+ }
18
+
19
+ .@{prefix-table}--header-wrapper {
20
+ background-color: @v-table-header-background-color;
21
+ .@{prefix-table}--header {
22
+ tr > th[colspan]:not([colspan='1']) {
23
+ .TheadAlignCenter();
24
+ }
25
+ }
26
+ .gutter {
27
+ background-color: @v-table-header-background-color;
28
+ }
29
+ }
30
+
31
+ .header--column {
32
+ .cell--wrapper {
33
+ display: flex;
34
+ align-items: center;
35
+ .cell--text {
36
+ display: flex;
37
+ align-items: center;
38
+ justify-content: flex-start;
39
+ flex: 1;
40
+ /* 重要 */
41
+ width: 0;
42
+ .cell {
43
+ padding-right: 2px;
44
+ .text-ellipsis-2();
45
+ }
46
+ .tip {
47
+ padding: 2px;
48
+ cursor: default;
49
+ }
50
+ }
51
+ }
52
+ &.column-has-filter {
53
+ .cell--wrapper {
54
+ margin-right: 16px;
55
+ }
56
+ }
57
+ &.col--center {
58
+ .TheadAlignCenter();
59
+ }
60
+ &.col--right {
61
+ .TheadAlignRight();
62
+ }
63
+ &:not(.column-has-sorter):not(.column-has-filter) {
64
+ .cell--text {
65
+ .cell {
66
+ padding-right: @v-module-distance;
67
+ }
68
+ .tip {
69
+ margin-left: -8px;
70
+ }
71
+ }
72
+ }
73
+ &.column--required {
74
+ .cell {
75
+ &::before {
76
+ content: '*';
77
+ color: @v-danger-color;
78
+ margin-right: 2px;
79
+ }
80
+ }
81
+ }
82
+
83
+ /* 全选 */
84
+ .cell--selection {
85
+ display: flex;
86
+ align-items: center;
87
+ .icon {
88
+ padding: 2px;
89
+ margin-left: 2px;
90
+ margin-top: 1px;
91
+ font-size: @v-font-size;
92
+ color: @v-icon-color;
93
+ cursor: pointer;
94
+ }
95
+ .info {
96
+ flex-shrink: 0;
97
+ margin-left: 4px;
98
+ font-size: @v-font-size - 1px;
99
+ color: @v-font-color-placeholder;
100
+ }
101
+ }
102
+
103
+ /* 排序 */
104
+ .cell--sorter {
105
+ font-size: 0.8em;
106
+ flex-shrink: 0;
107
+ display: flex;
108
+ flex-direction: column;
109
+ align-items: center;
110
+ cursor: pointer;
111
+ // transform: scale(0.8, 0.8);
112
+ &__asc,
113
+ &__desc {
114
+ color: @v-icon-color;
115
+ &.actived {
116
+ color: @v-primary-color;
117
+ }
118
+ }
119
+ &__asc {
120
+ transform: translateY(1.5px);
121
+ }
122
+ &__desc {
123
+ transform: translateY(-1.5px);
124
+ }
125
+ }
126
+
127
+ /* 筛选 */
128
+ .cell--filter {
129
+ width: 16px;
130
+ display: flex;
131
+ justify-content: center;
132
+ align-items: center;
133
+ position: absolute;
134
+ top: 0;
135
+ right: 0;
136
+ bottom: 0;
137
+ color: @v-icon-color;
138
+ transition: all 0.3s ease;
139
+ cursor: pointer;
140
+ .icon {
141
+ transform: scale(0.8, 0.9);
142
+ }
143
+ &:hover,
144
+ &.selected {
145
+ color: @v-font-color-placeholder;
146
+ background-color: @v-table-column-filter-hover-color;
147
+ }
148
+ &.actived {
149
+ color: @v-primary-color;
150
+ }
151
+ }
152
+
153
+ .resizable {
154
+ position: absolute;
155
+ top: 0;
156
+ bottom: 0;
157
+ right: -5px;
158
+ width: 10px;
159
+ z-index: 1;
160
+ cursor: col-resize;
161
+ &.is--line {
162
+ &:before {
163
+ content: '';
164
+ position: absolute;
165
+ left: 50%;
166
+ top: 20%;
167
+ width: 1px;
168
+ height: 60%;
169
+ background-color: @v-table-resizable-color;
170
+ }
171
+ }
172
+ }
173
+ }
174
+
175
+ .head-filter__popper {
176
+ padding: @v-module-distance !important;
177
+ max-height: 424px;
178
+ overflow-y: auto;
179
+ }
180
+
181
+ .head-filter--wrap {
182
+ @modulePadding: 6px;
183
+ .filter-list {
184
+ ul {
185
+ li {
186
+ display: flex;
187
+ align-items: center;
188
+ margin-bottom: @modulePadding;
189
+ .label {
190
+ width: 20px;
191
+ }
192
+ }
193
+ }
194
+ }
195
+ .filter-box {
196
+ display: flex;
197
+ align-items: center;
198
+ .condition {
199
+ .ant-select-selector {
200
+ padding: 0 @modulePadding;
201
+ .ant-select-selection-item {
202
+ padding-right: @v-module-distance;
203
+ }
204
+ }
205
+ .ant-select-arrow {
206
+ right: @modulePadding;
207
+ }
208
+ }
209
+ }
210
+ .list-panel {
211
+ .btn {
212
+ display: inline-block;
213
+ text-align: center;
214
+ text-transform: none;
215
+ text-decoration: none;
216
+ background: transparent;
217
+ border: 0;
218
+ outline: 0;
219
+ box-shadow: none;
220
+ cursor: pointer;
221
+ }
222
+ .select-all {
223
+ display: flex;
224
+ align-items: center;
225
+ justify-content: space-between;
226
+ margin: 5px 0 2px;
227
+ .action {
228
+ flex: 1 0;
229
+ }
230
+ .ant-checkbox + span {
231
+ padding-right: 4px;
232
+ }
233
+ .divider {
234
+ font-style: normal;
235
+ color: @v-font-disabled-color;
236
+ }
237
+ .invert {
238
+ padding: 0 4px;
239
+ cursor: pointer;
240
+ &:disabled {
241
+ color: @v-font-disabled-color;
242
+ cursor: not-allowed;
243
+ }
244
+ }
245
+ .total {
246
+ font-size: @v-font-size - 1px;
247
+ color: @v-font-color-placeholder;
248
+ }
249
+ }
250
+ .select-list {
251
+ margin-right: -10px;
252
+ .list-item {
253
+ width: 200px;
254
+ height: 26px;
255
+ display: flex;
256
+ align-items: center;
257
+ &:hover {
258
+ .right {
259
+ display: block;
260
+ }
261
+ }
262
+ .ant-checkbox-wrapper {
263
+ flex: auto;
264
+ min-width: 0;
265
+ & > span:nth-child(2) {
266
+ padding-right: 4px;
267
+ .text-overflow-cut();
268
+ }
269
+ }
270
+ .right {
271
+ flex-shrink: 0;
272
+ padding: 0;
273
+ font-size: @v-font-size - 1px;
274
+ color: @v-primary-color;
275
+ display: none;
276
+ }
277
+ }
278
+ }
279
+ }
280
+ .tree-panel {
281
+ width: 200px;
282
+ .ant-tree {
283
+ margin-right: -5px;
284
+ }
285
+ }
286
+ .footer {
287
+ margin-top: @modulePadding;
288
+ padding-top: @modulePadding + 2px;
289
+ margin-left: -@v-module-distance;
290
+ width: calc(100% + @v-module-distance + @v-module-distance);
291
+ padding-right: @v-module-distance;
292
+ border-top: 1px solid @--border-color-secondary;
293
+ }
294
+ }
295
+
296
+ .all-selection__popper {
297
+ .ant-dropdown-menu {
298
+ &-item {
299
+ padding-left: 12px;
300
+ padding-right: 12px;
301
+ }
302
+ }
303
+ }
@@ -0,0 +1,3 @@
1
+ import Translate from './src/translate';
2
+ export type { TranslateProps } from './src/translate';
3
+ export default Translate;
@@ -0,0 +1,16 @@
1
+ import React from 'react';
2
+ import { type IFetchProps } from './use-translation';
3
+ type IProps = {
4
+ text?: string;
5
+ className?: string;
6
+ style?: React.CSSProperties;
7
+ title?: string;
8
+ tag?: string;
9
+ enabled?: boolean;
10
+ copy?: boolean;
11
+ fetch?: IFetchProps;
12
+ children?: React.ReactNode;
13
+ };
14
+ export type TranslateProps = IProps;
15
+ declare const Translate: React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLElement>>;
16
+ export default Translate;
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ type UseTooltipProps = {
3
+ prefixCls?: string;
4
+ text: string;
5
+ enabled?: boolean;
6
+ translate: (text: string) => Promise<string | null>;
7
+ };
8
+ declare const useTooltip: ({ prefixCls, text, enabled, translate, }: UseTooltipProps) => [React.ReactNode, (ev: React.MouseEvent) => void, () => void, (ev: React.MouseEvent) => void];
9
+ export default useTooltip;
@@ -0,0 +1,12 @@
1
+ import type { IFetchFn, IFetchParams } from '../../table/src/table/types';
2
+ export type IFetchProps = {
3
+ api: IFetchFn;
4
+ params?: IFetchParams;
5
+ formatter?: (params?: IFetchParams) => IFetchParams;
6
+ afterFetch?: (data: string) => string;
7
+ dataKey?: string;
8
+ };
9
+ declare const useTranslation: (fetch?: IFetchProps) => {
10
+ translate: (text: string) => Promise<string | null>;
11
+ };
12
+ export default useTranslation;
@@ -0,0 +1,32 @@
1
+ /*
2
+ * @Author: 焦质晔
3
+ * @Date: 2025-11-10 13:37:08
4
+ * @Last Modified by: 焦质晔
5
+ * @Last Modified time: 2025-11-10 17:18:14
6
+ */
7
+ @import '../../style/common';
8
+
9
+ @prefix-translate: ~'@{qm-prefix}-translate';
10
+
11
+ .@{prefix-translate} {
12
+ &.help-cursor {
13
+ cursor: help;
14
+ }
15
+ &__tooltip {
16
+ min-width: 150px;
17
+ max-width: 300px;
18
+ border-radius: 6px !important;
19
+ padding-left: 12px !important;
20
+ padding-right: 12px !important;
21
+ .label,
22
+ .text {
23
+ margin: 4px 0;
24
+ }
25
+ .label {
26
+ color: @--text-color-placeholder;
27
+ }
28
+ .primary {
29
+ color: @--primary-color;
30
+ }
31
+ }
32
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dcp-design-react",
3
- "version": "1.12.14",
3
+ "version": "1.12.16",
4
4
  "description": "A Component Library for React",
5
5
  "keywords": [
6
6
  "React",