@longhongguo/form-create-ant-design-vue 3.2.43 → 3.2.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.
@@ -1,23 +1,287 @@
1
1
  .form-create .form-create .ant-form-item {
2
- margin-bottom: 22px;
2
+ margin-bottom: 22px;
3
3
  }
4
4
 
5
5
  .form-create .form-create .ant-form-item.ant-form-item-with-help {
6
- margin-bottom: 3px;
6
+ margin-bottom: 3px;
7
7
  }
8
8
 
9
- .form-create .form-create .ant-form-item .ant-form-item.ant-form-item-with-help {
10
- margin-bottom: -22px;
9
+ .form-create
10
+ .form-create
11
+ .ant-form-item
12
+ .ant-form-item.ant-form-item-with-help {
13
+ margin-bottom: -22px;
11
14
  }
12
15
 
13
- .form-create{
14
- width: 100%;
16
+ .form-create {
17
+ width: 100%;
15
18
  }
16
19
 
17
- .form-create.is-preview .fc-clock, .form-create .fc-none, .form-create.is-preview .ant-form-item .ant-form-item-label >label.ant-form-item-required::before {
18
- display: none !important;
20
+ .form-create.is-preview .fc-clock,
21
+ .form-create .fc-none,
22
+ .form-create.is-preview
23
+ .ant-form-item
24
+ .ant-form-item-label
25
+ > label.ant-form-item-required::before {
26
+ display: none !important;
19
27
  }
20
28
 
21
29
  .fc-form-footer {
22
- margin-top: 12px;
23
- }
30
+ margin-top: 12px;
31
+ }
32
+
33
+ /* CusSelect 组件样式 */
34
+ .fc-cus-select {
35
+ width: 100%;
36
+ box-sizing: border-box;
37
+ font-size: 14px;
38
+ font-variant: tabular-nums;
39
+ line-height: 1.5715;
40
+ list-style: none;
41
+ font-feature-settings: 'tnum';
42
+ position: relative;
43
+ display: inline-block;
44
+ cursor: pointer;
45
+ }
46
+
47
+ .fc-cus-select-single {
48
+ height: 32px;
49
+ }
50
+
51
+ .fc-cus-select-multiple {
52
+ min-height: 32px;
53
+ }
54
+
55
+ .fc-cus-select-selector {
56
+ display: flex;
57
+ width: 100%;
58
+ position: relative;
59
+ background-color: #fff;
60
+ border: 1px solid #d9d9d9;
61
+ border-radius: 6px;
62
+ transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
63
+ cursor: pointer;
64
+ min-height: 32px;
65
+ padding: 1px 11px;
66
+ align-items: center;
67
+ box-sizing: border-box;
68
+ }
69
+
70
+ .fc-cus-select-single .fc-cus-select-selector {
71
+ height: 32px;
72
+ padding: 0 11px;
73
+ }
74
+
75
+ .fc-cus-select-arrow {
76
+ position: absolute;
77
+ top: 50%;
78
+ right: 11px;
79
+ transform: translateY(-50%);
80
+ display: inline-flex;
81
+ align-items: center;
82
+ color: rgba(0, 0, 0, 0.45);
83
+ font-style: normal;
84
+ line-height: 0;
85
+ text-align: center;
86
+ text-transform: none;
87
+ vertical-align: -0.125em;
88
+ text-rendering: optimizeLegibility;
89
+ pointer-events: none;
90
+ }
91
+
92
+ .fc-cus-select-multiple .fc-cus-select-arrow {
93
+ right: 11px;
94
+ }
95
+
96
+ .fc-cus-select-multiple .fc-cus-select-clear {
97
+ right: 11px;
98
+ }
99
+
100
+ .fc-cus-select-arrow .anticon {
101
+ display: inline-block;
102
+ font-size: 12px;
103
+ line-height: 1;
104
+ vertical-align: baseline;
105
+ }
106
+
107
+ .fc-cus-select-arrow .anticon svg {
108
+ display: inline-block;
109
+ width: 1em;
110
+ height: 1em;
111
+ }
112
+
113
+ .fc-cus-select-clear {
114
+ position: absolute;
115
+ top: 50%;
116
+ right: 11px;
117
+ transform: translateY(-50%);
118
+ display: inline-flex;
119
+ align-items: center;
120
+ color: rgba(0, 0, 0, 0.25);
121
+ font-style: normal;
122
+ line-height: 0;
123
+ text-align: center;
124
+ text-transform: none;
125
+ vertical-align: -0.125em;
126
+ text-rendering: optimizeLegibility;
127
+ cursor: pointer;
128
+ transition: color 0.3s;
129
+ opacity: 1;
130
+ pointer-events: auto;
131
+ }
132
+
133
+ .fc-cus-select-clear:hover {
134
+ color: rgba(0, 0, 0, 0.45);
135
+ }
136
+
137
+ .fc-cus-select-clear .anticon {
138
+ display: inline-block;
139
+ font-size: 12px;
140
+ line-height: 1;
141
+ vertical-align: baseline;
142
+ }
143
+
144
+ .fc-cus-select-clear .anticon svg {
145
+ display: inline-block;
146
+ width: 1em;
147
+ height: 1em;
148
+ }
149
+
150
+ .fc-cus-select:not(.fc-cus-select-disabled):hover .fc-cus-select-selector {
151
+ border-color: #4096ff;
152
+ }
153
+
154
+ .fc-cus-select:focus:not(.fc-cus-select-disabled) .fc-cus-select-selector {
155
+ border-color: #4096ff;
156
+ outline: 0;
157
+ box-shadow: 0 0 0 2px rgba(64, 150, 255, 0.2);
158
+ }
159
+
160
+ .fc-cus-select:focus-within:not(.fc-cus-select-disabled)
161
+ .fc-cus-select-selector {
162
+ border-color: #4096ff;
163
+ outline: 0;
164
+ box-shadow: 0 0 0 2px rgba(64, 150, 255, 0.2);
165
+ }
166
+
167
+ .fc-cus-select-single .fc-cus-select-selection-item {
168
+ display: flex;
169
+ flex: 1;
170
+ align-items: center;
171
+ max-width: 100%;
172
+ line-height: 32px;
173
+ color: rgba(0, 0, 0, 0.88);
174
+ overflow: hidden;
175
+ white-space: nowrap;
176
+ text-overflow: ellipsis;
177
+ padding-right: 24px;
178
+ box-sizing: border-box;
179
+ }
180
+
181
+ .fc-cus-select-selection-placeholder {
182
+ flex: 1;
183
+ overflow: hidden;
184
+ color: rgba(0, 0, 0, 0.25);
185
+ white-space: nowrap;
186
+ text-overflow: ellipsis;
187
+ pointer-events: none;
188
+ }
189
+
190
+ .fc-cus-select-selection-overflow {
191
+ position: relative;
192
+ display: flex;
193
+ flex: auto;
194
+ flex-wrap: wrap;
195
+ max-width: 100%;
196
+ gap: 4px;
197
+ min-width: 0;
198
+ padding-right: 20px;
199
+ box-sizing: border-box;
200
+ }
201
+
202
+ .fc-cus-select-selection-overflow-item {
203
+ flex: none;
204
+ align-self: center;
205
+ max-width: 100%;
206
+ }
207
+
208
+ .fc-cus-select-multiple .fc-cus-select-selection-item {
209
+ position: relative;
210
+ display: inline-flex;
211
+ flex: none;
212
+ box-sizing: border-box;
213
+ max-width: 100%;
214
+ height: 24px;
215
+ margin-top: 2px;
216
+ margin-bottom: 2px;
217
+ line-height: 22px;
218
+ background: #fafafa;
219
+ border: 1px solid #f0f0f0;
220
+ border-radius: 4px;
221
+ cursor: pointer;
222
+ transition: font-size 0.3s, line-height 0.3s, height 0.3s;
223
+ user-select: none;
224
+ padding: 0 4px 0 8px;
225
+ align-items: center;
226
+ gap: 4px;
227
+ }
228
+
229
+ .fc-cus-select-selection-item-content {
230
+ display: inline-block;
231
+ overflow: hidden;
232
+ white-space: pre;
233
+ text-overflow: ellipsis;
234
+ color: rgba(0, 0, 0, 0.88);
235
+ }
236
+
237
+ .fc-cus-select-selection-item-remove {
238
+ display: inline-flex;
239
+ align-items: center;
240
+ color: rgba(0, 0, 0, 0.45);
241
+ cursor: pointer;
242
+ font-weight: bold;
243
+ transition: color 0.3s;
244
+ line-height: 0;
245
+ margin-left: 2px;
246
+ }
247
+
248
+ .fc-cus-select-selection-item-remove:hover {
249
+ color: rgba(0, 0, 0, 0.75);
250
+ }
251
+
252
+ .fc-cus-select-selection-item-remove .anticon {
253
+ display: inline-flex;
254
+ align-items: center;
255
+ font-style: normal;
256
+ line-height: 0;
257
+ text-align: center;
258
+ text-transform: none;
259
+ vertical-align: -0.125em;
260
+ text-rendering: optimizeLegibility;
261
+ font-size: 12px;
262
+ }
263
+
264
+ .fc-cus-select-selection-item-remove .anticon svg {
265
+ display: inline-block;
266
+ width: 1em;
267
+ height: 1em;
268
+ }
269
+
270
+ .fc-cus-select-disabled {
271
+ cursor: not-allowed;
272
+ }
273
+
274
+ .fc-cus-select-disabled .fc-cus-select-selector {
275
+ cursor: not-allowed;
276
+ background-color: #f5f5f5;
277
+ color: rgba(0, 0, 0, 0.25);
278
+ border-color: #d9d9d9;
279
+ }
280
+
281
+ .fc-cus-select-disabled .fc-cus-select-selection-item {
282
+ color: rgba(0, 0, 0, 0.25);
283
+ }
284
+
285
+ .fc-cus-select-disabled .fc-cus-select-selection-placeholder {
286
+ color: rgba(0, 0, 0, 0.25);
287
+ }
@@ -1,23 +1,287 @@
1
1
  .form-create .form-create .ant-form-item {
2
- margin-bottom: 22px;
2
+ margin-bottom: 22px;
3
3
  }
4
4
 
5
5
  .form-create .form-create .ant-form-item.ant-form-item-with-help {
6
- margin-bottom: 3px;
6
+ margin-bottom: 3px;
7
7
  }
8
8
 
9
- .form-create .form-create .ant-form-item .ant-form-item.ant-form-item-with-help {
10
- margin-bottom: -22px;
9
+ .form-create
10
+ .form-create
11
+ .ant-form-item
12
+ .ant-form-item.ant-form-item-with-help {
13
+ margin-bottom: -22px;
11
14
  }
12
15
 
13
- .form-create{
14
- width: 100%;
16
+ .form-create {
17
+ width: 100%;
15
18
  }
16
19
 
17
- .form-create.is-preview .fc-clock, .form-create .fc-none, .form-create.is-preview .ant-form-item .ant-form-item-label >label.ant-form-item-required::before {
18
- display: none !important;
20
+ .form-create.is-preview .fc-clock,
21
+ .form-create .fc-none,
22
+ .form-create.is-preview
23
+ .ant-form-item
24
+ .ant-form-item-label
25
+ > label.ant-form-item-required::before {
26
+ display: none !important;
19
27
  }
20
28
 
21
29
  .fc-form-footer {
22
- margin-top: 12px;
23
- }
30
+ margin-top: 12px;
31
+ }
32
+
33
+ /* CusSelect 组件样式 */
34
+ .fc-cus-select {
35
+ width: 100%;
36
+ box-sizing: border-box;
37
+ font-size: 14px;
38
+ font-variant: tabular-nums;
39
+ line-height: 1.5715;
40
+ list-style: none;
41
+ font-feature-settings: 'tnum';
42
+ position: relative;
43
+ display: inline-block;
44
+ cursor: pointer;
45
+ }
46
+
47
+ .fc-cus-select-single {
48
+ height: 32px;
49
+ }
50
+
51
+ .fc-cus-select-multiple {
52
+ min-height: 32px;
53
+ }
54
+
55
+ .fc-cus-select-selector {
56
+ display: flex;
57
+ width: 100%;
58
+ position: relative;
59
+ background-color: #fff;
60
+ border: 1px solid #d9d9d9;
61
+ border-radius: 6px;
62
+ transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
63
+ cursor: pointer;
64
+ min-height: 32px;
65
+ padding: 1px 11px;
66
+ align-items: center;
67
+ box-sizing: border-box;
68
+ }
69
+
70
+ .fc-cus-select-single .fc-cus-select-selector {
71
+ height: 32px;
72
+ padding: 0 11px;
73
+ }
74
+
75
+ .fc-cus-select-arrow {
76
+ position: absolute;
77
+ top: 50%;
78
+ right: 11px;
79
+ transform: translateY(-50%);
80
+ display: inline-flex;
81
+ align-items: center;
82
+ color: rgba(0, 0, 0, 0.45);
83
+ font-style: normal;
84
+ line-height: 0;
85
+ text-align: center;
86
+ text-transform: none;
87
+ vertical-align: -0.125em;
88
+ text-rendering: optimizeLegibility;
89
+ pointer-events: none;
90
+ }
91
+
92
+ .fc-cus-select-multiple .fc-cus-select-arrow {
93
+ right: 11px;
94
+ }
95
+
96
+ .fc-cus-select-multiple .fc-cus-select-clear {
97
+ right: 11px;
98
+ }
99
+
100
+ .fc-cus-select-arrow .anticon {
101
+ display: inline-block;
102
+ font-size: 12px;
103
+ line-height: 1;
104
+ vertical-align: baseline;
105
+ }
106
+
107
+ .fc-cus-select-arrow .anticon svg {
108
+ display: inline-block;
109
+ width: 1em;
110
+ height: 1em;
111
+ }
112
+
113
+ .fc-cus-select-clear {
114
+ position: absolute;
115
+ top: 50%;
116
+ right: 11px;
117
+ transform: translateY(-50%);
118
+ display: inline-flex;
119
+ align-items: center;
120
+ color: rgba(0, 0, 0, 0.25);
121
+ font-style: normal;
122
+ line-height: 0;
123
+ text-align: center;
124
+ text-transform: none;
125
+ vertical-align: -0.125em;
126
+ text-rendering: optimizeLegibility;
127
+ cursor: pointer;
128
+ transition: color 0.3s;
129
+ opacity: 1;
130
+ pointer-events: auto;
131
+ }
132
+
133
+ .fc-cus-select-clear:hover {
134
+ color: rgba(0, 0, 0, 0.45);
135
+ }
136
+
137
+ .fc-cus-select-clear .anticon {
138
+ display: inline-block;
139
+ font-size: 12px;
140
+ line-height: 1;
141
+ vertical-align: baseline;
142
+ }
143
+
144
+ .fc-cus-select-clear .anticon svg {
145
+ display: inline-block;
146
+ width: 1em;
147
+ height: 1em;
148
+ }
149
+
150
+ .fc-cus-select:not(.fc-cus-select-disabled):hover .fc-cus-select-selector {
151
+ border-color: #4096ff;
152
+ }
153
+
154
+ .fc-cus-select:focus:not(.fc-cus-select-disabled) .fc-cus-select-selector {
155
+ border-color: #4096ff;
156
+ outline: 0;
157
+ box-shadow: 0 0 0 2px rgba(64, 150, 255, 0.2);
158
+ }
159
+
160
+ .fc-cus-select:focus-within:not(.fc-cus-select-disabled)
161
+ .fc-cus-select-selector {
162
+ border-color: #4096ff;
163
+ outline: 0;
164
+ box-shadow: 0 0 0 2px rgba(64, 150, 255, 0.2);
165
+ }
166
+
167
+ .fc-cus-select-single .fc-cus-select-selection-item {
168
+ display: flex;
169
+ flex: 1;
170
+ align-items: center;
171
+ max-width: 100%;
172
+ line-height: 32px;
173
+ color: rgba(0, 0, 0, 0.88);
174
+ overflow: hidden;
175
+ white-space: nowrap;
176
+ text-overflow: ellipsis;
177
+ padding-right: 24px;
178
+ box-sizing: border-box;
179
+ }
180
+
181
+ .fc-cus-select-selection-placeholder {
182
+ flex: 1;
183
+ overflow: hidden;
184
+ color: rgba(0, 0, 0, 0.25);
185
+ white-space: nowrap;
186
+ text-overflow: ellipsis;
187
+ pointer-events: none;
188
+ }
189
+
190
+ .fc-cus-select-selection-overflow {
191
+ position: relative;
192
+ display: flex;
193
+ flex: auto;
194
+ flex-wrap: wrap;
195
+ max-width: 100%;
196
+ gap: 4px;
197
+ min-width: 0;
198
+ padding-right: 20px;
199
+ box-sizing: border-box;
200
+ }
201
+
202
+ .fc-cus-select-selection-overflow-item {
203
+ flex: none;
204
+ align-self: center;
205
+ max-width: 100%;
206
+ }
207
+
208
+ .fc-cus-select-multiple .fc-cus-select-selection-item {
209
+ position: relative;
210
+ display: inline-flex;
211
+ flex: none;
212
+ box-sizing: border-box;
213
+ max-width: 100%;
214
+ height: 24px;
215
+ margin-top: 2px;
216
+ margin-bottom: 2px;
217
+ line-height: 22px;
218
+ background: #fafafa;
219
+ border: 1px solid #f0f0f0;
220
+ border-radius: 4px;
221
+ cursor: pointer;
222
+ transition: font-size 0.3s, line-height 0.3s, height 0.3s;
223
+ user-select: none;
224
+ padding: 0 4px 0 8px;
225
+ align-items: center;
226
+ gap: 4px;
227
+ }
228
+
229
+ .fc-cus-select-selection-item-content {
230
+ display: inline-block;
231
+ overflow: hidden;
232
+ white-space: pre;
233
+ text-overflow: ellipsis;
234
+ color: rgba(0, 0, 0, 0.88);
235
+ }
236
+
237
+ .fc-cus-select-selection-item-remove {
238
+ display: inline-flex;
239
+ align-items: center;
240
+ color: rgba(0, 0, 0, 0.45);
241
+ cursor: pointer;
242
+ font-weight: bold;
243
+ transition: color 0.3s;
244
+ line-height: 0;
245
+ margin-left: 2px;
246
+ }
247
+
248
+ .fc-cus-select-selection-item-remove:hover {
249
+ color: rgba(0, 0, 0, 0.75);
250
+ }
251
+
252
+ .fc-cus-select-selection-item-remove .anticon {
253
+ display: inline-flex;
254
+ align-items: center;
255
+ font-style: normal;
256
+ line-height: 0;
257
+ text-align: center;
258
+ text-transform: none;
259
+ vertical-align: -0.125em;
260
+ text-rendering: optimizeLegibility;
261
+ font-size: 12px;
262
+ }
263
+
264
+ .fc-cus-select-selection-item-remove .anticon svg {
265
+ display: inline-block;
266
+ width: 1em;
267
+ height: 1em;
268
+ }
269
+
270
+ .fc-cus-select-disabled {
271
+ cursor: not-allowed;
272
+ }
273
+
274
+ .fc-cus-select-disabled .fc-cus-select-selector {
275
+ cursor: not-allowed;
276
+ background-color: #f5f5f5;
277
+ color: rgba(0, 0, 0, 0.25);
278
+ border-color: #d9d9d9;
279
+ }
280
+
281
+ .fc-cus-select-disabled .fc-cus-select-selection-item {
282
+ color: rgba(0, 0, 0, 0.25);
283
+ }
284
+
285
+ .fc-cus-select-disabled .fc-cus-select-selection-placeholder {
286
+ color: rgba(0, 0, 0, 0.25);
287
+ }