@vortex-ui/env-puzzle 2.0.0-beta.3 → 2.0.0-beta.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.
package/lib/global.css CHANGED
@@ -1,3 +1,260 @@
1
1
  .__dumi-default-mobile-demo-layout {
2
2
  padding: 0;
3
3
  }
4
+ .ant-form {
5
+ padding: 0;
6
+ position: relative;
7
+ }
8
+ .ant-form::after {
9
+ content: '';
10
+ position: absolute;
11
+ right: 0;
12
+ top: 0;
13
+ bottom: 0;
14
+ width: 1px;
15
+ background: #e5e9f2;
16
+ }
17
+ .ant-form .vtx-form-layout {
18
+ position: relative;
19
+ padding: 0;
20
+ border-left: 1px solid #e5e9f2;
21
+ border-bottom: 1px solid #e5e9f2;
22
+ }
23
+ .ant-form .vtx-form-layout > .vtx-form-layout {
24
+ border: none;
25
+ }
26
+ .ant-form .vtx-form-layout > .vtx-form-pane:nth-child(1) {
27
+ border-top: 1px solid #e5e9f2;
28
+ }
29
+ .ant-form .vtx-form-layout > .vtx-form-pane:nth-child(1) .vtx-form-pane-title {
30
+ padding-top: 16px;
31
+ }
32
+ .ant-form .vtx-form-layout .vtx-form-item-col {
33
+ position: relative;
34
+ z-index: 9;
35
+ margin-bottom: 0;
36
+ border-right: 1px solid #e5e9f2;
37
+ border-top: 1px solid #e5e9f2;
38
+ min-height: 60px;
39
+ }
40
+ .ant-form .vtx-form-layout .vtx-form-item-col .ant-select-focused,
41
+ .ant-form .vtx-form-layout .vtx-form-item-col .ant-input-number-focused,
42
+ .ant-form .vtx-form-layout .vtx-form-item-col .ant-input-affix-wrapper,
43
+ .ant-form .vtx-form-layout .vtx-form-item-col input:focus,
44
+ .ant-form .vtx-form-layout .vtx-form-item-col textarea:focus {
45
+ outline: none;
46
+ position: relative;
47
+ z-index: 199;
48
+ height: calc(100% - 1px);
49
+ }
50
+ .ant-form .vtx-form-layout .ant-col-8.vtx-form-item-col,
51
+ .ant-form .vtx-form-layout .ant-col-12.vtx-form-item-col,
52
+ .ant-form .vtx-form-layout .ant-col-24.vtx-form-item-col {
53
+ border-bottom: 1px solid #e5e9f2;
54
+ margin-bottom: -1px;
55
+ }
56
+ .ant-form .vtx-form-layout .vtx-form-card {
57
+ border: none;
58
+ }
59
+ .ant-form .vtx-form-layout .vtx-form-pane .ant-divider {
60
+ height: 0;
61
+ border: none;
62
+ }
63
+ .ant-form .vtx-form-layout .ant-card:not(:nth-last-child(1)) .vtx-form-card-content {
64
+ border-bottom: 1px solid #e5e9f2;
65
+ }
66
+ .ant-form .vtx-form-layout .vtx-form-card-content {
67
+ padding: 20px 0 0 0;
68
+ }
69
+ .ant-form .vtx-form-layout .ant-card.vtx-form-card {
70
+ border-bottom: none;
71
+ }
72
+ .ant-form .vtx-form-layout .ant-tabs-tabpane .ant-divider {
73
+ height: 0;
74
+ border: none;
75
+ }
76
+ .ant-form .vtx-form-layout .ant-card-head {
77
+ background: #f2f2f2;
78
+ }
79
+ .ant-form .vtx-form-layout .ant-card-head .ant-card-head-title {
80
+ font-weight: normal;
81
+ color: #333;
82
+ }
83
+ .ant-form .vtx-form-layout .ant-card-head .ant-card-extra span {
84
+ color: #666;
85
+ }
86
+ .ant-form .ant-form-item {
87
+ height: 100%;
88
+ margin-bottom: 0 !important;
89
+ margin-right: 0;
90
+ }
91
+ .ant-form .ant-form-item .ant-form-item-row {
92
+ height: 100%;
93
+ -webkit-box-align: center;
94
+ -ms-flex-align: center;
95
+ align-items: center;
96
+ }
97
+ .ant-form .ant-form-item .ant-form-item-row .ant-form-item-control {
98
+ height: 100%;
99
+ background: #fff;
100
+ }
101
+ .ant-form .ant-form-item .ant-form-item-row .ant-form-item-control > *:only-child {
102
+ height: 100%;
103
+ }
104
+ .ant-form .ant-form-item .ant-form-item-row .ant-form-item-control .ant-form-item-control-input {
105
+ height: 100%;
106
+ }
107
+ .ant-form .ant-form-item .ant-form-item-row .ant-form-item-control .ant-form-item-explain {
108
+ position: absolute;
109
+ bottom: 0;
110
+ left: 5px;
111
+ right: 0;
112
+ }
113
+ .ant-form .ant-form-item .ant-form-item-label {
114
+ background: #f2f2f2;
115
+ height: 100%;
116
+ min-height: 58px;
117
+ display: -webkit-box;
118
+ display: -ms-flexbox;
119
+ display: flex;
120
+ -webkit-box-align: center;
121
+ -ms-flex-align: center;
122
+ align-items: center;
123
+ -webkit-box-pack: end;
124
+ -ms-flex-pack: end;
125
+ justify-content: flex-end;
126
+ }
127
+ .ant-form .ant-form-item .ant-form-item-control-input-content {
128
+ height: 100%;
129
+ display: -webkit-box;
130
+ display: -ms-flexbox;
131
+ display: flex;
132
+ -webkit-box-align: center;
133
+ -ms-flex-align: center;
134
+ align-items: center;
135
+ }
136
+ .ant-form .ant-form-item .ant-form-item-control-input-content > *:nth-child(1):not(.ant-select):not(.vtx-multi-select):not(.vtx-select):not(.vtx-input-textarea) {
137
+ padding-left: 10px;
138
+ }
139
+ .ant-form .ant-form-item .ant-form-item-control-input-content input {
140
+ height: 100%;
141
+ border: none;
142
+ }
143
+ .ant-form .ant-form-item .ant-input-number-disabled {
144
+ height: 100%;
145
+ border: none;
146
+ }
147
+ .ant-form .ant-form-item .ant-input-affix-wrapper {
148
+ height: 100%;
149
+ border: none;
150
+ }
151
+ .ant-form .ant-form-item .ant-checkbox input {
152
+ display: none;
153
+ }
154
+ .ant-form .ant-form-item .vtx-multi-select {
155
+ height: 100%;
156
+ }
157
+ .ant-form .ant-form-item .vtx-multi-select .ant-select {
158
+ height: 100%;
159
+ }
160
+ .ant-form .ant-form-item .vtx-multi-select .ant-select .ant-select-selector {
161
+ height: 100%;
162
+ }
163
+ .ant-form .ant-form-item .vtx-multi-select .ant-select-selector {
164
+ border: none;
165
+ border-right: 1px solid #e5e9f2;
166
+ }
167
+ .ant-form .ant-form-item .vtx-multi-select .ant-btn {
168
+ height: 100%;
169
+ border: none;
170
+ }
171
+ .ant-form .ant-form-item .vtx-input-textarea {
172
+ width: 100%;
173
+ height: 100%;
174
+ }
175
+ .ant-form .ant-form-item input {
176
+ padding-left: 0;
177
+ min-height: 56px;
178
+ }
179
+ .ant-form .ant-form-item textarea,
180
+ .ant-form .ant-form-item .ant-select,
181
+ .ant-form .ant-form-item .ant-input-number,
182
+ .ant-form .ant-form-item .ant-picker {
183
+ height: 100%;
184
+ border: none;
185
+ }
186
+ .ant-form .ant-form-item textarea .ant-input-number-input-wrap,
187
+ .ant-form .ant-form-item .ant-select .ant-input-number-input-wrap,
188
+ .ant-form .ant-form-item .ant-input-number .ant-input-number-input-wrap,
189
+ .ant-form .ant-form-item .ant-picker .ant-input-number-input-wrap {
190
+ height: 100%;
191
+ }
192
+ .ant-form .ant-form-item .ant-select {
193
+ display: -webkit-box;
194
+ display: -ms-flexbox;
195
+ display: flex;
196
+ -webkit-box-align: center;
197
+ -ms-flex-align: center;
198
+ align-items: center;
199
+ }
200
+ .ant-form .ant-form-item .ant-select .ant-select-selector {
201
+ height: 100%;
202
+ width: 100%;
203
+ border: none;
204
+ }
205
+ .ant-form .ant-form-item .ant-select .ant-select-selector input {
206
+ height: 100%;
207
+ overflow: visible;
208
+ }
209
+ .ant-form .ant-form-item .ant-select .ant-select-selection-placeholder,
210
+ .ant-form .ant-form-item .ant-select .ant-select-selection-item {
211
+ height: 100%;
212
+ display: -webkit-box;
213
+ display: -ms-flexbox;
214
+ display: flex;
215
+ -webkit-box-align: center;
216
+ -ms-flex-align: center;
217
+ align-items: center;
218
+ }
219
+ .ant-form .ant-form-item .ant-upload-picture-card-wrapper {
220
+ padding-top: 10px;
221
+ }
222
+ .ant-form .ant-row {
223
+ width: 100%;
224
+ }
225
+ .ant-form .vtx-form-pane-title {
226
+ padding-left: 24px;
227
+ margin-bottom: 0;
228
+ padding-bottom: 24px;
229
+ border-right: 1px solid #e5e9f2;
230
+ }
231
+ .ant-form .ant-col:not(.ant-col-8):not(.ant-col-12):not(.ant-col-24):not(.ant-col-4).ant-form-item-label {
232
+ width: 150px;
233
+ }
234
+ .ant-form .text-node {
235
+ -webkit-box-sizing: border-box;
236
+ box-sizing: border-box;
237
+ padding-left: 10px;
238
+ }
239
+ .ant-form .ant-col:not(:nth-child(1)) .ant-row .ant-col.vtx-form-item-col {
240
+ border-top: none;
241
+ }
242
+ .ant-form .ant-form-item-with-help {
243
+ margin-bottom: 0 !important;
244
+ }
245
+ .ant-tabs-nav-wrap {
246
+ background: #f7f8fa;
247
+ height: 42px;
248
+ }
249
+ .ant-tabs-nav-wrap .ant-tabs-tab-active {
250
+ background: #fff;
251
+ }
252
+ .ant-tabs-nav-wrap .ant-tabs-tab {
253
+ height: 42px;
254
+ padding-left: 18px !important;
255
+ padding-right: 18px !important;
256
+ margin-left: 0;
257
+ }
258
+ .ant-tabs-nav-wrap .ant-tabs-ink-bar.ant-tabs-ink-bar-animated {
259
+ top: 0;
260
+ }
package/lib/global.less CHANGED
@@ -1,5 +1,270 @@
1
+ @import "./va.less";
2
+
1
3
  .__dumi-default-mobile-demo-layout {
2
4
  padding: 0;
3
5
  }
6
+
4
7
  .__dumi-default-previewer-demo {
5
8
  }
9
+
10
+ .ant-form {
11
+ padding: 0;
12
+ position: relative;
13
+ &::after {
14
+ content: '';
15
+ position: absolute;
16
+ right: 0;
17
+ top: 0;
18
+ bottom: 0;
19
+ width: 1px;
20
+ background: @border-color;
21
+ }
22
+ .vtx-form-layout {
23
+ > .vtx-form-layout {
24
+ border: none;
25
+ }
26
+ > .vtx-form-pane:nth-child(1) {
27
+ border-top: 1px solid @border-color;
28
+ .vtx-form-pane-title {
29
+ padding-top: 16px;
30
+ }
31
+ }
32
+ position: relative;
33
+ padding: 0;
34
+ border-left: 1px solid @border-color;
35
+ border-bottom: 1px solid @border-color;
36
+ .vtx-form-item-col {
37
+ position: relative;
38
+ z-index: 9;
39
+ margin-bottom: 0;
40
+ //border-bottom: 1px solid @border-color;
41
+ border-right: 1px solid @border-color;
42
+ border-top: 1px solid @border-color;
43
+ min-height: 60px;
44
+ .ant-select-focused,
45
+ .ant-input-number-focused,
46
+ .ant-input-affix-wrapper,
47
+ input:focus,
48
+ textarea:focus {
49
+ outline: none;
50
+ position: relative;
51
+ z-index: 199;
52
+ //width: calc(~'100% - 1px');
53
+ height: calc(~'100% - 1px');
54
+ }
55
+ }
56
+ .ant-col-8, .ant-col-12, .ant-col-24 {
57
+ &.vtx-form-item-col {
58
+ border-bottom: 1px solid @border-color;
59
+ margin-bottom: -1px;
60
+ }
61
+ }
62
+ .vtx-form-card {
63
+ border: none;
64
+ }
65
+ .vtx-form-pane {
66
+ .ant-divider {
67
+ height: 0;
68
+ border: none;
69
+ }
70
+ }
71
+ .vtx-form-pane-content {
72
+ //border-left: 1px solid @border-color;
73
+ }
74
+ .ant-card:not(:nth-last-child(1)) {
75
+ .vtx-form-card-content {
76
+ border-bottom: 1px solid @border-color;
77
+ }
78
+ }
79
+ .vtx-form-card-content {
80
+ padding: 20px 0 0 0;
81
+ }
82
+ .ant-card.vtx-form-card {
83
+ border-bottom: none;
84
+ }
85
+ .ant-tabs-tabpane {
86
+ .ant-divider {
87
+ height: 0;
88
+ border: none;
89
+ }
90
+ }
91
+ .ant-card-head {
92
+ background: @normal-item-bg-color;
93
+ .ant-card-head-title {
94
+ font-weight: normal;
95
+ color: @text-color;
96
+ }
97
+ .ant-card-extra {
98
+ span {
99
+ color: @middle-font-color;
100
+ }
101
+ }
102
+ }
103
+ }
104
+ .ant-form-item {
105
+ height: 100%;
106
+ margin-bottom: 0 !important;
107
+ margin-right: 0;
108
+ .ant-form-item-row {
109
+ height: 100%;
110
+ align-items: center;
111
+ .ant-form-item-control {
112
+ height: 100%;
113
+ background: @bg-color;
114
+ > *:only-child {
115
+ height: 100%;
116
+ }
117
+ .ant-form-item-control-input {
118
+ height: 100%;
119
+ }
120
+ .ant-form-item-explain {
121
+ position: absolute;
122
+ bottom: 0;
123
+ left: 5px;
124
+ right: 0;
125
+ }
126
+ }
127
+ }
128
+ .ant-form-item-label {
129
+ background: @normal-item-bg-color;
130
+ height: 100%;
131
+ min-height: 58px;
132
+ display: flex;
133
+ align-items: center;
134
+ justify-content: flex-end;
135
+ }
136
+ // 各个表单样式控制
137
+ .ant-form-item-control-input-content {
138
+ > *:nth-child(1):not(.ant-select):not(.vtx-multi-select):not(.vtx-select):not(.vtx-input-textarea) {
139
+ padding-left: 10px;
140
+ }
141
+ height: 100%;
142
+ display: flex;
143
+ align-items: center;
144
+ input {
145
+ height: 100%;
146
+ border: none;
147
+ }
148
+ }
149
+ .ant-input-number-disabled {
150
+ height: 100%;
151
+ border: none;
152
+ }
153
+ .ant-input-affix-wrapper {
154
+ height: 100%;
155
+ border: none;
156
+ }
157
+ .ant-checkbox {
158
+ input {
159
+ display: none;
160
+ }
161
+ }
162
+ .vtx-multi-select {
163
+ height: 100%;
164
+ .ant-select {
165
+ height: 100%;
166
+ .ant-select-selector {
167
+ height: 100%;
168
+ }
169
+ }
170
+ .ant-select-selector {
171
+ border: none;
172
+ border-right: 1px solid @border-color;
173
+ }
174
+ .ant-btn {
175
+ height: 100%;
176
+ border: none;
177
+ }
178
+ }
179
+ .vtx-input-textarea {
180
+ width: 100%;
181
+ height: 100%;
182
+ }
183
+ input {
184
+ padding-left: 0;
185
+ min-height: 56px;
186
+ }
187
+ textarea,
188
+ .ant-select,
189
+ .ant-input-number,
190
+ .ant-picker {
191
+ height: 100%;
192
+ border: none;
193
+ .ant-input-number-input-wrap {
194
+ height: 100%;
195
+ }
196
+ }
197
+ .ant-select {
198
+ display: flex;
199
+ align-items: center;
200
+ .ant-select-selector {
201
+ //height: calc(~'100% - 1px');
202
+ height: 100%;
203
+ width: 100%;
204
+ border: none;
205
+ input {
206
+ height: 100%;
207
+ overflow: visible;
208
+ }
209
+ }
210
+ .ant-select-selection-placeholder, .ant-select-selection-item {
211
+ height: 100%;
212
+ display: flex;
213
+ align-items: center;
214
+ }
215
+ }
216
+ .ant-upload-picture-card-wrapper {
217
+ padding-top: 10px;
218
+ }
219
+ }
220
+ .ant-row {
221
+ width: 100%;
222
+ }
223
+ .vtx-form-pane-title {
224
+ padding-left: 24px;
225
+ margin-bottom: 0;
226
+ padding-bottom: 24px;
227
+ border-right: 1px solid @border-color;
228
+ }
229
+ .ant-col:not(.ant-col-8):not(.ant-col-12):not(.ant-col-24):not(.ant-col-4) {
230
+ &.ant-form-item-label {
231
+ width: 150px;
232
+ }
233
+ }
234
+ .text-node {
235
+ box-sizing: border-box;
236
+ padding-left: 10px;
237
+ }
238
+ .ant-col:not(:nth-child(1)) {
239
+ .ant-row {
240
+ .ant-col.vtx-form-item-col {
241
+ border-top: none;
242
+ }
243
+ }
244
+ }
245
+ .ant-form-item-with-help {
246
+ margin-bottom: 0 !important;
247
+ }
248
+ //.ant-col{
249
+ // max-height: 62px ;
250
+ // overflow: hidden;
251
+ //}
252
+ }
253
+
254
+ .ant-tabs-nav-wrap {
255
+ background: @table-header-bg;
256
+ height: 42px;
257
+ .ant-tabs-tab-active {
258
+ background: #fff;
259
+ }
260
+ .ant-tabs-tab {
261
+ height: 42px;
262
+ padding-left: 18px !important;
263
+ padding-right: 18px !important;
264
+ margin-left: 0;
265
+ }
266
+ .ant-tabs-ink-bar.ant-tabs-ink-bar-animated {
267
+ top: 0;
268
+ }
269
+ }
270
+
@@ -45,6 +45,12 @@
45
45
  -ms-transform: rotate(180deg);
46
46
  transform: rotate(180deg);
47
47
  }
48
+ .env-template .ant-pagination-item-active {
49
+ background: #1890ff;
50
+ }
51
+ .env-template .ant-pagination-item-active a {
52
+ color: #fff;
53
+ }
48
54
  .env-template-table-wrap {
49
55
  height: 100%;
50
56
  display: -webkit-box;
@@ -1,3 +1,9 @@
1
+ .env-template .ant-pagination-item-active {
2
+ background: #1890ff;
3
+ }
4
+ .env-template .ant-pagination-item-active a {
5
+ color: #fff;
6
+ }
1
7
  .env-template-table-wrap {
2
8
  height: 100%;
3
9
  display: -webkit-box;
@@ -1,11 +1,21 @@
1
1
  @import (reference) '~antd/lib/style/themes/index.less';
2
+
2
3
  @prefix-cls: env-template;
4
+ .@{prefix-cls} {
5
+ .ant-pagination-item-active {
6
+ background: @primary-color;
7
+ a {
8
+ color: #fff;
9
+ }
10
+ }
11
+ }
3
12
 
4
13
  .@{prefix-cls}-table-wrap {
5
14
  height: 100%;
6
15
  display: flex;
7
16
  flex-direction: column;
8
17
  }
18
+
9
19
  .@{prefix-cls}-card-wrap {
10
20
  flex: 1;
11
21
  height: 0;
@@ -18,7 +28,6 @@
18
28
  background-color: rgba(0, 0, 0, 0.05);
19
29
  border-radius: 3px;
20
30
  }
21
-
22
31
  .@{prefix-cls}-card-list-empty {
23
32
  margin-top: 200px;
24
33
  }
@@ -43,12 +52,10 @@
43
52
  flex: 1;
44
53
  &-action-btn {
45
54
  padding: 0;
46
-
47
55
  > span + .anticon-down {
48
56
  margin-left: 0;
49
57
  }
50
58
  }
51
-
52
59
  &-action-btn + &-action-btn {
53
60
  // margin-left: 8px;
54
61
  }
@@ -56,13 +63,11 @@
56
63
  .ant-popover-inner-content {
57
64
  padding: 0;
58
65
  }
59
-
60
66
  .ant-list-item {
61
67
  padding: 6px 28px;
62
68
  cursor: pointer;
63
69
  }
64
70
  }
65
-
66
71
  &-pagination {
67
72
  display: flex;
68
73
  justify-content: flex-end;
@@ -71,9 +76,9 @@
71
76
  height: 32px;
72
77
  box-sizing: content-box;
73
78
  }
74
-
75
79
  &-total-number {
76
80
  font-weight: 400;
77
81
  color: #5f5f5f;
78
82
  }
79
83
  }
84
+
@@ -393,6 +393,7 @@ var Template = /*#__PURE__*/function (_Component) {
393
393
  }
394
394
  }) : undefined,
395
395
  pagination: this.getPagination() ? false : Object.assign(Object.assign(Object.assign({}, pagination), tableProps === null || tableProps === void 0 ? void 0 : tableProps.pagination), {
396
+ showSizeChanger: false,
396
397
  onChange: function onChange(current, pageSize) {
397
398
  _this4.setPagination({
398
399
  current: current,
@@ -432,6 +433,7 @@ var Template = /*#__PURE__*/function (_Component) {
432
433
  isCardTheme: true
433
434
  })),
434
435
  pagination: this.getPagination() ? false : Object.assign(Object.assign(Object.assign({}, pagination), tableProps === null || tableProps === void 0 ? void 0 : tableProps.pagination), {
436
+ showSizeChanger: false,
435
437
  onChange: function onChange(current, pageSize) {
436
438
  _this4.setPagination({
437
439
  current: current,
@@ -505,6 +507,7 @@ var Template = /*#__PURE__*/function (_Component) {
505
507
  }) : undefined,
506
508
  rowKey: "id",
507
509
  pagination: this.getPagination() ? false : Object.assign(Object.assign(Object.assign({}, pagination), tableProps === null || tableProps === void 0 ? void 0 : tableProps.pagination), {
510
+ showSizeChanger: false,
508
511
  onChange: function onChange(current, pageSize) {
509
512
  _this4.setPagination({
510
513
  current: current,
@@ -547,6 +550,7 @@ var Template = /*#__PURE__*/function (_Component) {
547
550
  isCardTheme: true
548
551
  })),
549
552
  pagination: this.getPagination() ? false : Object.assign(Object.assign(Object.assign({}, pagination), tableProps === null || tableProps === void 0 ? void 0 : tableProps.pagination), {
553
+ showSizeChanger: false,
550
554
  onChange: function onChange(current, pageSize) {
551
555
  _this4.setPagination({
552
556
  current: current,