@jiaozhiye/qm-design-react 1.3.0-beta.30 → 1.3.0-beta.32

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,7 +1,7 @@
1
- /*
2
- * @Author: 焦质晔
3
- * @Date: 2021-07-23 19:41:37
4
- * @Last Modified by: 焦质晔
5
- * @Last Modified time: 2021-07-30 10:47:18
6
- */
7
- @import 'antd/dist/antd.less';
1
+ /*
2
+ * @Author: 焦质晔
3
+ * @Date: 2021-07-23 19:41:37
4
+ * @Last Modified by: 焦质晔
5
+ * @Last Modified time: 2022-09-27 14:22:05
6
+ */
7
+ @import 'antd/dist/antd.variable.less';
@@ -9,6 +9,7 @@ export declare const DEFAULT_LABEL_WIDTH = 80;
9
9
  export declare const DEFAULT_COL_WIDTH = 300;
10
10
  export declare const DEFAULT_TRUE_VALUE = "1";
11
11
  export declare const DEFAULT_FALSE_VALUE = "0";
12
+ export declare const DEFAULT_LIST_HEIGHT = 400;
12
13
  export declare type IRecord = Record<string, any>;
13
14
  export declare type IFormLayout = 'horizontal' | 'vertical';
14
15
  export declare type ILabelAlign = 'left' | 'right';
@@ -136,6 +137,7 @@ export declare type IFormItem = {
136
137
  tooltips?: string[];
137
138
  count?: number;
138
139
  filterable?: boolean;
140
+ listHeight?: number;
139
141
  collapseTags?: boolean;
140
142
  maxTagTextLength?: number;
141
143
  openPyt?: boolean;
@@ -160,6 +162,7 @@ export declare type IFormItem = {
160
162
  fixedSize?: [number, number] | undefined;
161
163
  quality?: number;
162
164
  tinymce?: Record<string, any>;
165
+ thresholdSize?: number;
163
166
  };
164
167
  searchHelper?: {
165
168
  name?: string;
@@ -1,308 +1,308 @@
1
- /*
2
- * @Author: 焦质晔
3
- * @Date: 2021-07-23 19:05:57
4
- * @Last Modified by: 焦质晔
5
- * @Last Modified time: 2022-09-13 10:21:00
6
- */
7
- @import '../../style/common';
8
-
9
- @prefix-form: ~'@{qm-prefix}-form';
10
-
11
- .@{prefix-form} {
12
- position: relative;
13
- .ant-form-item {
14
- margin-bottom: @--margin-md + 2px;
15
- .ant-form-item-label {
16
- & > label[title=''] {
17
- width: 100%;
18
- .ant-select {
19
- text-align: left;
20
- }
21
- }
22
- &-wrap {
23
- line-height: 1.075;
24
- }
25
- }
26
- // placeholder
27
- input::placeholder {
28
- text-align: left;
29
- }
30
- // ant-form-inline
31
- &-with-help {
32
- margin-bottom: @--margin-md + 2px;
33
- }
34
- // valigator
35
- .ant-form-item-explain {
36
- .text-overflow-cut();
37
- display: flex;
38
- gap: @--margin-md;
39
- min-height: auto;
40
- height: @--font-size-sm;
41
- font-size: @--font-size-sm;
42
- line-height: 1;
43
- }
44
- // search
45
- .ant-input-search > .ant-input-group > .ant-input-group-addon {
46
- line-height: 1;
47
- }
48
- // textarea
49
- .ant-input-textarea-show-count {
50
- position: relative;
51
- &::after {
52
- position: absolute;
53
- right: 3px;
54
- bottom: 0;
55
- margin: 0;
56
- }
57
- }
58
- // input extra
59
- .extra-tooltip {
60
- color: @--text-color-secondary-dark;
61
- vertical-align: -0.4em;
62
- transform: scale(1.2);
63
- }
64
- .extra-text {
65
- height: 100%;
66
- display: flex;
67
- align-items: center;
68
- }
69
- .extra-overflow-cut {
70
- .text-overflow-cut();
71
- }
72
- // select
73
- .ant-select {
74
- width: 100%;
75
- }
76
- // input number
77
- .ant-input-number.right {
78
- input {
79
- text-align: right;
80
- }
81
- &.controls {
82
- input {
83
- padding-right: 30px;
84
- }
85
- }
86
- }
87
- // range input
88
- .site-input-left {
89
- border-right-width: 0;
90
- z-index: 1;
91
- }
92
- .site-input-left:hover,
93
- .site-input-left:focus {
94
- border-right-width: 1px;
95
- }
96
- .site-input-right {
97
- border-left-width: 0;
98
- &.ant-input-search .ant-input-affix-wrapper {
99
- border-left-width: 0;
100
- }
101
- }
102
- .site-input-right:hover,
103
- .site-input-right:focus {
104
- border-left-width: 1px;
105
- &.ant-input-search .ant-input-affix-wrapper {
106
- border-left-width: 1px;
107
- }
108
- }
109
- // search-helper-multiple
110
- .search-helper-multiple {
111
- .ant-input-group > .ant-select:first-child {
112
- z-index: 1;
113
- .ant-select-selector {
114
- border-top-right-radius: 0;
115
- border-bottom-right-radius: 0;
116
- }
117
- }
118
- }
119
- // select-multiple
120
- .ant-select-multiple {
121
- .ant-select-selection-overflow-item-rest {
122
- pointer-events: none;
123
- }
124
- }
125
- }
126
- &__only-show {
127
- // ...
128
- }
129
- // ------ size ------
130
- // 40 32 24
131
- &--lg {
132
- }
133
- &--sm {
134
- .ant-form-item-label > label,
135
- .ant-form-item-label .ant-form-item-tooltip {
136
- font-size: @--font-size-sm;
137
- }
138
- }
139
- }
140
-
141
- .ant-picker-footer-extra {
142
- .ant-tag {
143
- cursor: pointer;
144
- }
145
- }
146
-
147
- // immediate
148
- .@{prefix-form}-immediate {
149
- padding: 5px 15px;
150
- .table {
151
- width: 100%;
152
- th,
153
- td {
154
- height: 32px;
155
- text-align: left;
156
- border-bottom: 1px solid @--border-color-secondary;
157
- }
158
- tbody {
159
- tr td {
160
- cursor: pointer;
161
- }
162
- tr:hover,
163
- tr.active {
164
- background-color: @--primary-1;
165
- }
166
- }
167
- }
168
- // 40 32 24
169
- &--lg {
170
- .table {
171
- th,
172
- td {
173
- height: 40px;
174
- }
175
- }
176
- }
177
- &--sm {
178
- .table {
179
- th,
180
- td {
181
- height: 24px;
182
- }
183
- }
184
- }
185
- }
186
-
187
- // city-select
188
- .@{prefix-form}-city-select {
189
- padding: 15px 15px 10px;
190
- max-width: 420px;
191
- .container {
192
- .city-drop {
193
- &-toper {
194
- margin-bottom: 10px;
195
- display: flex;
196
- &__type {
197
- display: inline-block;
198
- }
199
- &__search {
200
- margin-left: 10px;
201
- }
202
- }
203
- &-letter {
204
- display: flex;
205
- flex-wrap: wrap;
206
- margin-bottom: 4px;
207
- .tag {
208
- list-style: none;
209
- line-height: 1.75;
210
- font-size: @--font-size-sm;
211
- padding: 0 8px;
212
- margin: 0 4px 4px 0;
213
- border: 1px solid @--border-color-secondary;
214
- border-radius: @--border-radius-base;
215
- cursor: pointer;
216
- &.actived {
217
- color: @--white;
218
- background-color: @--primary-color;
219
- border-color: @--primary-color;
220
- }
221
- }
222
- }
223
- &-list {
224
- margin-right: -2px;
225
- max-height: 350px;
226
- overflow-y: auto;
227
- dl {
228
- margin: 0;
229
- dt {
230
- float: left;
231
- font-size: 13px;
232
- font-weight: 700;
233
- line-height: 20px;
234
- }
235
- dd {
236
- white-space: normal;
237
- margin-inline-start: 50px;
238
- margin-bottom: 8px;
239
- line-height: 20px;
240
- li {
241
- display: inline-block;
242
- margin-right: 8px;
243
- font-size: 13px;
244
- cursor: pointer;
245
- &:hover {
246
- color: @--primary-color;
247
- }
248
- &.actived {
249
- color: @--primary-color;
250
- }
251
- }
252
- }
253
- }
254
- }
255
- }
256
- }
257
- }
258
-
259
- // region-select
260
- .@{prefix-form}-region-select {
261
- padding: 10px 15px;
262
- .container {
263
- margin-top: -10px;
264
- .region-box {
265
- display: flex;
266
- flex-wrap: wrap;
267
- width: 440px;
268
- line-height: @--line-height-base;
269
- &__item {
270
- margin: 0 5px;
271
- width: 100px;
272
- cursor: pointer;
273
- .text-overflow-cut();
274
- &:hover {
275
- color: @--primary-color;
276
- }
277
- &.actived {
278
- color: @--primary-color;
279
- }
280
- }
281
- }
282
- }
283
- }
284
-
285
- // fields-filter
286
- .@{prefix-form}-fields-filter {
287
- .fields-list {
288
- padding: 4px @--padding-md;
289
- ul {
290
- margin: 0;
291
- li.item {
292
- line-height: 1.75;
293
- .text-overflow-cut();
294
- .handle {
295
- padding: 2px;
296
- color: @--text-color-secondary;
297
- cursor: s-resize;
298
- transform: scale(0.9);
299
- }
300
- }
301
- }
302
- }
303
- &--lg {
304
- }
305
- &--sm {
306
- font-size: @--font-size-sm;
307
- }
308
- }
1
+ /*
2
+ * @Author: 焦质晔
3
+ * @Date: 2021-07-23 19:05:57
4
+ * @Last Modified by: 焦质晔
5
+ * @Last Modified time: 2022-09-13 10:21:00
6
+ */
7
+ @import '../../style/common';
8
+
9
+ @prefix-form: ~'@{qm-prefix}-form';
10
+
11
+ .@{prefix-form} {
12
+ position: relative;
13
+ .ant-form-item {
14
+ margin-bottom: @--margin-md + 2px;
15
+ .ant-form-item-label {
16
+ & > label[title=''] {
17
+ width: 100%;
18
+ .ant-select {
19
+ text-align: left;
20
+ }
21
+ }
22
+ &-wrap {
23
+ line-height: 1.075;
24
+ }
25
+ }
26
+ // placeholder
27
+ input::placeholder {
28
+ text-align: left;
29
+ }
30
+ // ant-form-inline
31
+ &-with-help {
32
+ margin-bottom: @--margin-md + 2px;
33
+ }
34
+ // valigator
35
+ .ant-form-item-explain {
36
+ .text-overflow-cut();
37
+ display: flex;
38
+ gap: @--margin-md;
39
+ min-height: auto;
40
+ height: @--font-size-sm;
41
+ font-size: @--font-size-sm;
42
+ line-height: 1;
43
+ }
44
+ // search
45
+ .ant-input-search > .ant-input-group > .ant-input-group-addon {
46
+ line-height: 1;
47
+ }
48
+ // textarea
49
+ .ant-input-textarea-show-count {
50
+ position: relative;
51
+ &::after {
52
+ position: absolute;
53
+ right: 3px;
54
+ bottom: 0;
55
+ margin: 0;
56
+ }
57
+ }
58
+ // input extra
59
+ .extra-tooltip {
60
+ color: @--text-color-secondary-dark;
61
+ vertical-align: -0.4em;
62
+ transform: scale(1.2);
63
+ }
64
+ .extra-text {
65
+ height: 100%;
66
+ display: flex;
67
+ align-items: center;
68
+ }
69
+ .extra-overflow-cut {
70
+ .text-overflow-cut();
71
+ }
72
+ // select
73
+ .ant-select {
74
+ width: 100%;
75
+ }
76
+ // input number
77
+ .ant-input-number.right {
78
+ input {
79
+ text-align: right;
80
+ }
81
+ &.controls {
82
+ input {
83
+ padding-right: 30px;
84
+ }
85
+ }
86
+ }
87
+ // range input
88
+ .site-input-left {
89
+ border-right-width: 0;
90
+ z-index: 1;
91
+ }
92
+ .site-input-left:hover,
93
+ .site-input-left:focus {
94
+ border-right-width: 1px;
95
+ }
96
+ .site-input-right {
97
+ border-left-width: 0;
98
+ &.ant-input-search .ant-input-affix-wrapper {
99
+ border-left-width: 0;
100
+ }
101
+ }
102
+ .site-input-right:hover,
103
+ .site-input-right:focus {
104
+ border-left-width: 1px;
105
+ &.ant-input-search .ant-input-affix-wrapper {
106
+ border-left-width: 1px;
107
+ }
108
+ }
109
+ // search-helper-multiple
110
+ .search-helper-multiple {
111
+ .ant-input-group > .ant-select:first-child {
112
+ z-index: 1;
113
+ .ant-select-selector {
114
+ border-top-right-radius: 0;
115
+ border-bottom-right-radius: 0;
116
+ }
117
+ }
118
+ }
119
+ // select-multiple
120
+ .ant-select-multiple {
121
+ .ant-select-selection-overflow-item-rest {
122
+ pointer-events: none;
123
+ }
124
+ }
125
+ }
126
+ &__only-show {
127
+ // ...
128
+ }
129
+ // ------ size ------
130
+ // 40 32 24
131
+ &--lg {
132
+ }
133
+ &--sm {
134
+ .ant-form-item-label > label,
135
+ .ant-form-item-label .ant-form-item-tooltip {
136
+ font-size: @--font-size-sm;
137
+ }
138
+ }
139
+ }
140
+
141
+ .ant-picker-footer-extra {
142
+ .ant-tag {
143
+ cursor: pointer;
144
+ }
145
+ }
146
+
147
+ // immediate
148
+ .@{prefix-form}-immediate {
149
+ padding: 5px 15px;
150
+ .table {
151
+ width: 100%;
152
+ th,
153
+ td {
154
+ height: 32px;
155
+ text-align: left;
156
+ border-bottom: 1px solid @--border-color-secondary;
157
+ }
158
+ tbody {
159
+ tr td {
160
+ cursor: pointer;
161
+ }
162
+ tr:hover,
163
+ tr.active {
164
+ background-color: @--primary-1;
165
+ }
166
+ }
167
+ }
168
+ // 40 32 24
169
+ &--lg {
170
+ .table {
171
+ th,
172
+ td {
173
+ height: 40px;
174
+ }
175
+ }
176
+ }
177
+ &--sm {
178
+ .table {
179
+ th,
180
+ td {
181
+ height: 24px;
182
+ }
183
+ }
184
+ }
185
+ }
186
+
187
+ // city-select
188
+ .@{prefix-form}-city-select {
189
+ padding: 15px 15px 10px;
190
+ max-width: 420px;
191
+ .container {
192
+ .city-drop {
193
+ &-toper {
194
+ margin-bottom: 10px;
195
+ display: flex;
196
+ &__type {
197
+ display: inline-block;
198
+ }
199
+ &__search {
200
+ margin-left: 10px;
201
+ }
202
+ }
203
+ &-letter {
204
+ display: flex;
205
+ flex-wrap: wrap;
206
+ margin-bottom: 4px;
207
+ .tag {
208
+ list-style: none;
209
+ line-height: 1.75;
210
+ font-size: @--font-size-sm;
211
+ padding: 0 8px;
212
+ margin: 0 4px 4px 0;
213
+ border: 1px solid @--border-color-secondary;
214
+ border-radius: @--border-radius-base;
215
+ cursor: pointer;
216
+ &.actived {
217
+ color: @--white;
218
+ background-color: @--primary-color;
219
+ border-color: @--primary-color;
220
+ }
221
+ }
222
+ }
223
+ &-list {
224
+ margin-right: -2px;
225
+ max-height: 350px;
226
+ overflow-y: auto;
227
+ dl {
228
+ margin: 0;
229
+ dt {
230
+ float: left;
231
+ font-size: 13px;
232
+ font-weight: 700;
233
+ line-height: 20px;
234
+ }
235
+ dd {
236
+ white-space: normal;
237
+ margin-inline-start: 50px;
238
+ margin-bottom: 8px;
239
+ line-height: 20px;
240
+ li {
241
+ display: inline-block;
242
+ margin-right: 8px;
243
+ font-size: 13px;
244
+ cursor: pointer;
245
+ &:hover {
246
+ color: @--primary-color;
247
+ }
248
+ &.actived {
249
+ color: @--primary-color;
250
+ }
251
+ }
252
+ }
253
+ }
254
+ }
255
+ }
256
+ }
257
+ }
258
+
259
+ // region-select
260
+ .@{prefix-form}-region-select {
261
+ padding: 10px 15px;
262
+ .container {
263
+ margin-top: -10px;
264
+ .region-box {
265
+ display: flex;
266
+ flex-wrap: wrap;
267
+ width: 440px;
268
+ line-height: @--line-height-base;
269
+ &__item {
270
+ margin: 0 5px;
271
+ width: 100px;
272
+ cursor: pointer;
273
+ .text-overflow-cut();
274
+ &:hover {
275
+ color: @--primary-color;
276
+ }
277
+ &.actived {
278
+ color: @--primary-color;
279
+ }
280
+ }
281
+ }
282
+ }
283
+ }
284
+
285
+ // fields-filter
286
+ .@{prefix-form}-fields-filter {
287
+ .fields-list {
288
+ padding: 4px @--padding-md;
289
+ ul {
290
+ margin: 0;
291
+ li.item {
292
+ line-height: 1.75;
293
+ .text-overflow-cut();
294
+ .handle {
295
+ padding: 2px;
296
+ color: @--text-color-secondary;
297
+ cursor: s-resize;
298
+ transform: scale(0.9);
299
+ }
300
+ }
301
+ }
302
+ }
303
+ &--lg {
304
+ }
305
+ &--sm {
306
+ font-size: @--font-size-sm;
307
+ }
308
+ }