bkui-vue 1.0.3-beta.39 → 1.0.3-beta.40

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 (21) hide show
  1. package/dist/index.cjs.js +2 -2
  2. package/dist/index.esm.js +3407 -3422
  3. package/dist/index.umd.js +2 -2
  4. package/dist/style.css +1 -1
  5. package/dist/style.variable.css +1 -1
  6. package/lib/dialog/dialog.css +28 -31
  7. package/lib/dialog/dialog.less +18 -17
  8. package/lib/dialog/dialog.variable.css +28 -31
  9. package/lib/dialog/index.js +12 -8
  10. package/lib/info-box/info-box.css +6 -11
  11. package/lib/info-box/info-box.d.ts +1 -1
  12. package/lib/info-box/info-box.less +6 -10
  13. package/lib/info-box/info-box.variable.css +6 -11
  14. package/lib/modal/index.js +7 -9
  15. package/lib/modal/modal.css +10 -15
  16. package/lib/modal/modal.less +5 -5
  17. package/lib/modal/modal.variable.css +10 -15
  18. package/lib/timeline/index.d.ts +73 -44
  19. package/lib/timeline/index.js +45 -63
  20. package/lib/timeline/timeline.d.ts +42 -29
  21. package/package.json +1 -1
package/lib/dialog/dialog.css CHANGED
@@ -10,27 +10,22 @@
10
10
  .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-body {
11
11
  border-radius: 2px;
12
12
  }
13
- .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header {
14
- padding: 24px 24px 0;
15
- }
16
13
  .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header .bk-dialog-title {
17
- height: 27px;
18
- margin: 15px 0 10px;
14
+ margin-top: 16px;
19
15
  }
20
16
  .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content {
21
- height: 100%;
22
- max-height: 100%;
23
- min-height: 100%;
24
- padding: 0 50px 10px;
17
+ height: initial;
18
+ max-height: initial;
19
+ min-height: initial;
25
20
  word-break: break-all;
26
21
  }
27
22
  .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content .bk-info-sub-title {
28
- margin-bottom: 10px;
29
23
  text-align: center;
30
24
  word-break: break-all;
31
25
  }
32
26
  .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-footer {
33
- padding: 0 65px 33px;
27
+ height: initial;
28
+ margin-top: 24px;
34
29
  background-color: #fff;
35
30
  border-top: none;
36
31
  }
@@ -38,11 +33,11 @@
38
33
  min-width: 88px;
39
34
  }
40
35
  .bk-modal-ctx {
41
- pointer-events: auto;
42
36
  top: 0px;
43
37
  left: 0px;
44
38
  width: 100%;
45
39
  height: 100%;
40
+ pointer-events: auto;
46
41
  }
47
42
  .bk-modal-ctx.--show {
48
43
  position: fixed;
@@ -51,9 +46,9 @@
51
46
  display: none;
52
47
  }
53
48
  .bk-modal-ctx .bk-modal-ctx-mask {
54
- display: none;
55
- left: 0;
56
49
  top: 0;
50
+ left: 0;
51
+ display: none;
57
52
  width: 100%;
58
53
  height: 100%;
59
54
  background-color: rgba(0, 0, 0, 0.6);
@@ -95,7 +90,7 @@
95
90
  }
96
91
  .bk-modal-wrapper .bk-modal-body {
97
92
  height: 100%;
98
- width: 100%;
93
+ overflow: hidden;
99
94
  background: #fff;
100
95
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
101
96
  }
@@ -126,15 +121,15 @@
126
121
  user-select: none;
127
122
  }
128
123
  .bk-dialog-wrapper .bk-modal-wrapper .bk-dialog-header {
129
- padding: 16px 24px 12px;
124
+ padding: 16px 24px 0;
130
125
  font-size: 20px;
131
126
  line-height: 1;
132
127
  }
133
128
  .bk-dialog-wrapper .bk-modal-wrapper .bk-dialog-header .bk-header-icon {
134
- text-align: center;
129
+ display: flex;
130
+ justify-content: center;
135
131
  }
136
132
  .bk-dialog-wrapper .bk-modal-wrapper .bk-dialog-header .bk-header-icon .bk-info-icon {
137
- display: inline-block;
138
133
  font-size: 48px;
139
134
  }
140
135
  .bk-dialog-wrapper .bk-modal-wrapper .bk-dialog-header .bk-header-icon .bk-info-icon.success {
@@ -159,6 +154,8 @@
159
154
  max-height: calc(100vh - 300px);
160
155
  min-height: 141px;
161
156
  padding: 0 24px;
157
+ margin-top: 16px;
158
+ margin-bottom: 24px;
162
159
  font-size: 14px;
163
160
  line-height: 1.5;
164
161
  color: #63656e;
@@ -169,19 +166,12 @@
169
166
  .bk-dialog-wrapper .bk-modal-wrapper.fullscreen.no-footer {
170
167
  max-height: calc(100vh - 79px);
171
168
  }
172
- .bk-dialog-wrapper .bk-modal-wrapper .bk-modal-body {
173
- padding-bottom: 48px;
174
- }
175
169
  .bk-dialog-wrapper .bk-modal-wrapper.no-footer .bk-modal-body {
176
170
  padding-bottom: 0;
177
171
  }
178
172
  .bk-dialog-wrapper .bk-modal-wrapper .bk-modal-footer {
179
- position: absolute;
180
- right: 0;
181
- bottom: 0;
182
- left: 0;
183
- height: 48px;
184
- padding: 8px 24px;
173
+ padding: 0 24px;
174
+ margin: 24px 0 ;
185
175
  background-color: #fafbfd;
186
176
  border-top: 1px solid #dcdee5;
187
177
  border-radius: 2px;
@@ -198,12 +188,19 @@
198
188
  }
199
189
  .bk-dialog-wrapper .bk-modal-wrapper .bk-modal-close {
200
190
  position: absolute;
201
- top: 4px;
202
- right: 4px;
191
+ top: 6px;
192
+ right: 6px;
193
+ display: flex;
194
+ width: 32px;
195
+ height: 32px;
203
196
  font-size: 18px;
204
- color: #c4c6cc;
197
+ color: #979ba5;
205
198
  cursor: pointer;
199
+ align-items: center;
200
+ justify-content: center;
201
+ border-radius: 50%;
202
+ transition: 0.15s;
206
203
  }
207
204
  .bk-dialog-wrapper .bk-modal-wrapper .bk-modal-close:hover {
208
- color: #979ba5;
205
+ background: #f0f1f5;
209
206
  }
package/lib/dialog/dialog.less CHANGED
@@ -37,15 +37,15 @@
37
37
  }
38
38
 
39
39
  .@{bk-prefix}-dialog-header {
40
- padding: 16px 24px 12px;
40
+ padding: 16px 24px 0;
41
41
  font-size: 20px;
42
42
  line-height: 1;
43
43
 
44
44
  .@{bk-prefix}-header-icon {
45
- text-align: center;
45
+ display: flex;
46
+ justify-content: center;
46
47
 
47
48
  .@{bk-prefix}-info-icon {
48
- display: inline-block;
49
49
  font-size: 48px;
50
50
 
51
51
  &.success {
@@ -77,6 +77,8 @@
77
77
  max-height: calc(100vh - 300px);
78
78
  min-height: 141px;
79
79
  padding: 0 24px;
80
+ margin-top: 16px;
81
+ margin-bottom: 24px;
80
82
  font-size: 14px;
81
83
  line-height: 1.5;
82
84
  color: @default-color;
@@ -92,10 +94,6 @@
92
94
  }
93
95
  }
94
96
 
95
- .@{bk-prefix}-modal-body {
96
- padding-bottom: 48px;
97
- }
98
-
99
97
  &.no-footer {
100
98
  .@{bk-prefix}-modal-body {
101
99
  padding-bottom: 0;
@@ -103,12 +101,8 @@
103
101
  }
104
102
 
105
103
  .@{bk-prefix}-modal-footer {
106
- position: absolute;
107
- right: 0;
108
- bottom: 0;
109
- left: 0;
110
- height: 48px;
111
- padding: 8px 24px;
104
+ padding: 0 24px;
105
+ margin: 24px 0 ;
112
106
  background-color: @whitesmoke-color;
113
107
  border-top: 1px solid @table-border-color;
114
108
  border-radius: 2px;
@@ -129,14 +123,21 @@
129
123
 
130
124
  .@{bk-prefix}-modal-close {
131
125
  position: absolute;
132
- top: 4px;
133
- right: 4px;
126
+ top: 6px;
127
+ right: 6px;
128
+ display: flex;
129
+ width: 32px;
130
+ height: 32px;
134
131
  font-size: 18px;
135
- color: @light-gray;
132
+ color: #979ba5;
136
133
  cursor: pointer;
134
+ align-items: center;
135
+ justify-content: center;
136
+ border-radius: 50%;
137
+ transition: .15s;
137
138
 
138
139
  &:hover {
139
- color: @gray-color;
140
+ background: #f0f1f5;
140
141
  }
141
142
  }
142
143
  }
package/lib/dialog/dialog.variable.css CHANGED
@@ -139,27 +139,22 @@
139
139
  .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-body {
140
140
  border-radius: 2px;
141
141
  }
142
- .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header {
143
- padding: 24px 24px 0;
144
- }
145
142
  .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header .bk-dialog-title {
146
- height: 27px;
147
- margin: 15px 0 10px;
143
+ margin-top: 16px;
148
144
  }
149
145
  .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content {
150
- height: 100%;
151
- max-height: 100%;
152
- min-height: 100%;
153
- padding: 0 50px 10px;
146
+ height: initial;
147
+ max-height: initial;
148
+ min-height: initial;
154
149
  word-break: break-all;
155
150
  }
156
151
  .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content .bk-info-sub-title {
157
- margin-bottom: 10px;
158
152
  text-align: center;
159
153
  word-break: break-all;
160
154
  }
161
155
  .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-footer {
162
- padding: 0 65px 33px;
156
+ height: initial;
157
+ margin-top: 24px;
163
158
  background-color: #fff;
164
159
  border-top: none;
165
160
  }
@@ -167,11 +162,11 @@
167
162
  min-width: 88px;
168
163
  }
169
164
  .bk-modal-ctx {
170
- pointer-events: auto;
171
165
  top: 0px;
172
166
  left: 0px;
173
167
  width: 100%;
174
168
  height: 100%;
169
+ pointer-events: auto;
175
170
  }
176
171
  .bk-modal-ctx.--show {
177
172
  position: fixed;
@@ -180,9 +175,9 @@
180
175
  display: none;
181
176
  }
182
177
  .bk-modal-ctx .bk-modal-ctx-mask {
183
- display: none;
184
- left: 0;
185
178
  top: 0;
179
+ left: 0;
180
+ display: none;
186
181
  width: 100%;
187
182
  height: 100%;
188
183
  background-color: rgba(0, 0, 0, 0.6);
@@ -224,7 +219,7 @@
224
219
  }
225
220
  .bk-modal-wrapper .bk-modal-body {
226
221
  height: 100%;
227
- width: 100%;
222
+ overflow: hidden;
228
223
  background: #fff;
229
224
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
230
225
  }
@@ -255,15 +250,15 @@
255
250
  user-select: none;
256
251
  }
257
252
  .bk-dialog-wrapper .bk-modal-wrapper .bk-dialog-header {
258
- padding: 16px 24px 12px;
253
+ padding: 16px 24px 0;
259
254
  font-size: 20px;
260
255
  line-height: 1;
261
256
  }
262
257
  .bk-dialog-wrapper .bk-modal-wrapper .bk-dialog-header .bk-header-icon {
263
- text-align: center;
258
+ display: flex;
259
+ justify-content: center;
264
260
  }
265
261
  .bk-dialog-wrapper .bk-modal-wrapper .bk-dialog-header .bk-header-icon .bk-info-icon {
266
- display: inline-block;
267
262
  font-size: 48px;
268
263
  }
269
264
  .bk-dialog-wrapper .bk-modal-wrapper .bk-dialog-header .bk-header-icon .bk-info-icon.success {
@@ -288,6 +283,8 @@
288
283
  max-height: calc(100vh - 300px);
289
284
  min-height: 141px;
290
285
  padding: 0 24px;
286
+ margin-top: 16px;
287
+ margin-bottom: 24px;
291
288
  font-size: 14px;
292
289
  line-height: 1.5;
293
290
  color: #63656e;
@@ -298,19 +295,12 @@
298
295
  .bk-dialog-wrapper .bk-modal-wrapper.fullscreen.no-footer {
299
296
  max-height: calc(100vh - 79px);
300
297
  }
301
- .bk-dialog-wrapper .bk-modal-wrapper .bk-modal-body {
302
- padding-bottom: 48px;
303
- }
304
298
  .bk-dialog-wrapper .bk-modal-wrapper.no-footer .bk-modal-body {
305
299
  padding-bottom: 0;
306
300
  }
307
301
  .bk-dialog-wrapper .bk-modal-wrapper .bk-modal-footer {
308
- position: absolute;
309
- right: 0;
310
- bottom: 0;
311
- left: 0;
312
- height: 48px;
313
- padding: 8px 24px;
302
+ padding: 0 24px;
303
+ margin: 24px 0 ;
314
304
  background-color: #fafbfd;
315
305
  border-top: 1px solid #dcdee5;
316
306
  border-radius: 2px;
@@ -327,12 +317,19 @@
327
317
  }
328
318
  .bk-dialog-wrapper .bk-modal-wrapper .bk-modal-close {
329
319
  position: absolute;
330
- top: 4px;
331
- right: 4px;
320
+ top: 6px;
321
+ right: 6px;
322
+ display: flex;
323
+ width: 32px;
324
+ height: 32px;
332
325
  font-size: 18px;
333
- color: #c4c6cc;
326
+ color: #979ba5;
334
327
  cursor: pointer;
328
+ align-items: center;
329
+ justify-content: center;
330
+ border-radius: 50%;
331
+ transition: 0.15s;
335
332
  }
336
333
  .bk-dialog-wrapper .bk-modal-wrapper .bk-modal-close:hover {
337
- color: #979ba5;
334
+ background: #f0f1f5;
338
335
  }
package/lib/dialog/index.js CHANGED
@@ -863,16 +863,12 @@ function _isSlot(s) {
863
863
  "style": "text-align: ".concat(_this.headerAlign)
864
864
  }, [(_this$$slots$header = (_this$$slots$header2 = (_this$$slots2 = _this.$slots).header) === null || _this$$slots$header2 === void 0 ? void 0 : _this$$slots$header2.call(_this$$slots2)) !== null && _this$$slots$header !== void 0 ? _this$$slots$header : _this.title])])];
865
865
  },
866
- "default": function _default() {
867
- var _this$$slots$default, _this$$slots$default2, _this$$slots3;
868
- return (_this$$slots$default = (_this$$slots$default2 = (_this$$slots3 = _this.$slots)["default"]) === null || _this$$slots$default2 === void 0 ? void 0 : _this$$slots$default2.call(_this$$slots3)) !== null && _this$$slots$default !== void 0 ? _this$$slots$default : 'default';
869
- },
870
866
  footer: function footer() {
871
- var _this$$slots$footer, _this$$slots$footer2, _this$$slots4, _this$$slots$footer3, _this$$slots$footer4, _this$$slots5, _this$$slots$footer5, _this$$slots$footer6, _this$$slots6;
867
+ var _this$$slots$footer, _this$$slots$footer2, _this$$slots3, _this$$slots$footer3, _this$$slots$footer4, _this$$slots4, _this$$slots$footer5, _this$$slots$footer6, _this$$slots5;
872
868
  return (0,external_vue_namespaceObject.createVNode)("div", {
873
869
  "class": _this.resolveClassName('dialog-footer'),
874
870
  "style": "text-align: ".concat(_this.footerAlign)
875
- }, [_this.dialogType === 'process' ? (_this$$slots$footer = (_this$$slots$footer2 = (_this$$slots4 = _this.$slots).footer) === null || _this$$slots$footer2 === void 0 ? void 0 : _this$$slots$footer2.call(_this$$slots4)) !== null && _this$$slots$footer !== void 0 ? _this$$slots$footer : (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Fragment, null, [_this.current === 1 ? '' : (0,external_vue_namespaceObject.createVNode)(button_namespaceObject["default"], {
871
+ }, [_this.dialogType === 'process' ? (_this$$slots$footer = (_this$$slots$footer2 = (_this$$slots3 = _this.$slots).footer) === null || _this$$slots$footer2 === void 0 ? void 0 : _this$$slots$footer2.call(_this$$slots3)) !== null && _this$$slots$footer !== void 0 ? _this$$slots$footer : (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Fragment, null, [_this.current === 1 ? '' : (0,external_vue_namespaceObject.createVNode)(button_namespaceObject["default"], {
876
872
  "class": _this.resolveClassName('dialog-perv'),
877
873
  "onClick": _this.handlePrevStep
878
874
  }, {
@@ -902,7 +898,7 @@ function _isSlot(s) {
902
898
  "default": function _default() {
903
899
  return [_this.localCancelText];
904
900
  }
905
- })]) : '', _this.dialogType === 'operation' ? (_this$$slots$footer3 = (_this$$slots$footer4 = (_this$$slots5 = _this.$slots).footer) === null || _this$$slots$footer4 === void 0 ? void 0 : _this$$slots$footer4.call(_this$$slots5)) !== null && _this$$slots$footer3 !== void 0 ? _this$$slots$footer3 : (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Fragment, null, [(0,external_vue_namespaceObject.createVNode)(button_namespaceObject["default"], {
901
+ })]) : '', _this.dialogType === 'operation' ? (_this$$slots$footer3 = (_this$$slots$footer4 = (_this$$slots4 = _this.$slots).footer) === null || _this$$slots$footer4 === void 0 ? void 0 : _this$$slots$footer4.call(_this$$slots4)) !== null && _this$$slots$footer3 !== void 0 ? _this$$slots$footer3 : (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Fragment, null, [(0,external_vue_namespaceObject.createVNode)(button_namespaceObject["default"], {
906
902
  "onClick": _this.handleConfirm,
907
903
  "theme": _this.theme,
908
904
  "loading": _this.isLoading
@@ -918,7 +914,7 @@ function _isSlot(s) {
918
914
  "default": function _default() {
919
915
  return [_this.localCancelText];
920
916
  }
921
- })]) : '', _this.dialogType === 'confirm' ? (_this$$slots$footer5 = (_this$$slots$footer6 = (_this$$slots6 = _this.$slots).footer) === null || _this$$slots$footer6 === void 0 ? void 0 : _this$$slots$footer6.call(_this$$slots6)) !== null && _this$$slots$footer5 !== void 0 ? _this$$slots$footer5 : (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Fragment, null, [(0,external_vue_namespaceObject.createVNode)(button_namespaceObject["default"], {
917
+ })]) : '', _this.dialogType === 'confirm' ? (_this$$slots$footer5 = (_this$$slots$footer6 = (_this$$slots5 = _this.$slots).footer) === null || _this$$slots$footer6 === void 0 ? void 0 : _this$$slots$footer6.call(_this$$slots5)) !== null && _this$$slots$footer5 !== void 0 ? _this$$slots$footer5 : (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Fragment, null, [(0,external_vue_namespaceObject.createVNode)(button_namespaceObject["default"], {
922
918
  "onClick": _this.handleConfirm,
923
919
  "theme": _this.theme,
924
920
  "loading": _this.isLoading
@@ -935,6 +931,14 @@ function _isSlot(s) {
935
931
  }, null);
936
932
  }
937
933
  };
934
+ if (this.$slots["default"]) {
935
+ Object.assign(dialogSlot, {
936
+ "default": function _default() {
937
+ return _this.$slots["default"]();
938
+ }
939
+ });
940
+ }
941
+ console.log('dialogSlot = ', dialogSlot);
938
942
  var className = this.resolveClassName('dialog-wrapper ');
939
943
  var bodyClass = "".concat(this.scrollable ? 'scroll-able' : '', " ").concat(this.multiInstance ? 'multi-instance' : '', " ").concat(this.hasFooter ? 'has-footer' : 'no-footer');
940
944
  return (0,external_vue_namespaceObject.createVNode)(modal_namespaceObject["default"], (0,external_vue_namespaceObject.mergeProps)(this.$props, {
package/lib/info-box/info-box.css CHANGED
@@ -10,27 +10,22 @@
10
10
  .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-body {
11
11
  border-radius: 2px;
12
12
  }
13
- .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header {
14
- padding: 24px 24px 0;
15
- }
16
13
  .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header .bk-dialog-title {
17
- height: 27px;
18
- margin: 15px 0 10px;
14
+ margin-top: 16px;
19
15
  }
20
16
  .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content {
21
- height: 100%;
22
- max-height: 100%;
23
- min-height: 100%;
24
- padding: 0 50px 10px;
17
+ height: initial;
18
+ max-height: initial;
19
+ min-height: initial;
25
20
  word-break: break-all;
26
21
  }
27
22
  .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content .bk-info-sub-title {
28
- margin-bottom: 10px;
29
23
  text-align: center;
30
24
  word-break: break-all;
31
25
  }
32
26
  .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-footer {
33
- padding: 0 65px 33px;
27
+ height: initial;
28
+ margin-top: 24px;
34
29
  background-color: #fff;
35
30
  border-top: none;
36
31
  }
package/lib/info-box/info-box.d.ts CHANGED
@@ -4,7 +4,7 @@ export interface ModalFuncProps {
4
4
  width?: string | number;
5
5
  height?: string | number;
6
6
  'ext-cls': string | string[];
7
- type?: 'primary' | 'warning' | 'success' | 'danger';
7
+ theme?: 'primary' | 'warning' | 'success' | 'danger';
8
8
  infoType?: 'success' | 'danger' | 'warning' | 'loading';
9
9
  title?: string | (() => VNode | string) | VNode;
10
10
  subTitle?: string | (() => VNode) | VNode;
package/lib/info-box/info-box.less CHANGED
@@ -17,29 +17,25 @@
17
17
  }
18
18
 
19
19
  .@{bk-prefix}-dialog-header {
20
- padding: 24px 24px 0;
21
-
22
20
  .@{bk-prefix}-dialog-title {
23
- height: 27px;
24
- margin: 15px 0 10px;
21
+ margin-top: 16px;
25
22
  }
26
23
  }
27
24
 
28
25
  .@{bk-prefix}-modal-content {
29
- height: 100%;
30
- max-height: 100%;
31
- min-height: 100%;
32
- padding: 0 50px 10px;
26
+ height: initial;
27
+ max-height: initial;
28
+ min-height: initial;
33
29
  word-break: break-all;
34
30
  .@{bk-prefix}-info-sub-title {
35
- margin-bottom: 10px;
36
31
  text-align: center;
37
32
  word-break: break-all;
38
33
  }
39
34
  }
40
35
 
41
36
  .@{bk-prefix}-modal-footer {
42
- padding: 0 65px 33px;
37
+ height: initial;
38
+ margin-top: 24px;
43
39
  background-color: #fff;
44
40
  border-top: none;
45
41
 
package/lib/info-box/info-box.variable.css CHANGED
@@ -139,27 +139,22 @@
139
139
  .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-body {
140
140
  border-radius: 2px;
141
141
  }
142
- .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header {
143
- padding: 24px 24px 0;
144
- }
145
142
  .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header .bk-dialog-title {
146
- height: 27px;
147
- margin: 15px 0 10px;
143
+ margin-top: 16px;
148
144
  }
149
145
  .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content {
150
- height: 100%;
151
- max-height: 100%;
152
- min-height: 100%;
153
- padding: 0 50px 10px;
146
+ height: initial;
147
+ max-height: initial;
148
+ min-height: initial;
154
149
  word-break: break-all;
155
150
  }
156
151
  .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content .bk-info-sub-title {
157
- margin-bottom: 10px;
158
152
  text-align: center;
159
153
  word-break: break-all;
160
154
  }
161
155
  .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-footer {
162
- padding: 0 65px 33px;
156
+ height: initial;
157
+ margin-top: 24px;
163
158
  background-color: #fff;
164
159
  border-top: none;
165
160
  }
package/lib/modal/index.js CHANGED
@@ -822,16 +822,14 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
822
822
  _this$$slots$header,
823
823
  _this$$slots$header2,
824
824
  _this$$slots,
825
- _this$$slots$default,
826
- _this$$slots$default2,
827
- _this$$slots2,
828
825
  _this$$slots$footer,
829
826
  _this$$slots$footer2,
830
- _this$$slots3,
827
+ _this$$slots2,
831
828
  _this$$slots$close,
832
829
  _this$$slots$close2,
833
- _this$$slots4,
830
+ _this$$slots3,
834
831
  _this = this;
832
+ console.log('this.$sltos = ', this.$slots);
835
833
  var _usePrefix2 = (0,config_provider_namespaceObject.usePrefix)(),
836
834
  resolveClassName = _usePrefix2.resolveClassName;
837
835
  var maxHeight = this.maxHeight ? {
@@ -862,14 +860,14 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
862
860
  "class": bodyClass
863
861
  }, [(0,external_vue_namespaceObject.createVNode)("div", {
864
862
  "class": resolveClassName('modal-header')
865
- }, [(_this$$slots$header = (_this$$slots$header2 = (_this$$slots = _this.$slots).header) === null || _this$$slots$header2 === void 0 ? void 0 : _this$$slots$header2.call(_this$$slots)) !== null && _this$$slots$header !== void 0 ? _this$$slots$header : '']), (0,external_vue_namespaceObject.createVNode)("div", {
863
+ }, [(_this$$slots$header = (_this$$slots$header2 = (_this$$slots = _this.$slots).header) === null || _this$$slots$header2 === void 0 ? void 0 : _this$$slots$header2.call(_this$$slots)) !== null && _this$$slots$header !== void 0 ? _this$$slots$header : '']), _this.$slots["default"] && (0,external_vue_namespaceObject.createVNode)("div", {
866
864
  "class": resolveClassName('modal-content'),
867
865
  "style": [_this.dialogType === 'show' ? 'padding-bottom: 20px' : '', _objectSpread({}, maxHeight)]
868
- }, [(_this$$slots$default = (_this$$slots$default2 = (_this$$slots2 = _this.$slots)["default"]) === null || _this$$slots$default2 === void 0 ? void 0 : _this$$slots$default2.call(_this$$slots2)) !== null && _this$$slots$default !== void 0 ? _this$$slots$default : '']), _this.dialogType === 'show' ? '' : (0,external_vue_namespaceObject.createVNode)("div", {
866
+ }, [_this.$slots["default"]()]), _this.dialogType === 'show' ? '' : (0,external_vue_namespaceObject.createVNode)("div", {
869
867
  "class": resolveClassName('modal-footer')
870
- }, [(_this$$slots$footer = (_this$$slots$footer2 = (_this$$slots3 = _this.$slots).footer) === null || _this$$slots$footer2 === void 0 ? void 0 : _this$$slots$footer2.call(_this$$slots3)) !== null && _this$$slots$footer !== void 0 ? _this$$slots$footer : '']), _this.closeIcon && (0,external_vue_namespaceObject.createVNode)("div", {
868
+ }, [(_this$$slots$footer = (_this$$slots$footer2 = (_this$$slots2 = _this.$slots).footer) === null || _this$$slots$footer2 === void 0 ? void 0 : _this$$slots$footer2.call(_this$$slots2)) !== null && _this$$slots$footer !== void 0 ? _this$$slots$footer : '']), _this.closeIcon && (0,external_vue_namespaceObject.createVNode)("div", {
871
869
  "class": resolveClassName('modal-close')
872
- }, [(_this$$slots$close = (_this$$slots$close2 = (_this$$slots4 = _this.$slots).close) === null || _this$$slots$close2 === void 0 ? void 0 : _this$$slots$close2.call(_this$$slots4)) !== null && _this$$slots$close !== void 0 ? _this$$slots$close : ''])]) : ''];
870
+ }, [(_this$$slots$close = (_this$$slots$close2 = (_this$$slots3 = _this.$slots).close) === null || _this$$slots$close2 === void 0 ? void 0 : _this$$slots$close2.call(_this$$slots3)) !== null && _this$$slots$close !== void 0 ? _this$$slots$close : ''])]) : ''];
873
871
  }
874
872
  })])]);
875
873
  }
package/lib/modal/modal.css CHANGED
@@ -10,27 +10,22 @@
10
10
  .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-body {
11
11
  border-radius: 2px;
12
12
  }
13
- .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header {
14
- padding: 24px 24px 0;
15
- }
16
13
  .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header .bk-dialog-title {
17
- height: 27px;
18
- margin: 15px 0 10px;
14
+ margin-top: 16px;
19
15
  }
20
16
  .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content {
21
- height: 100%;
22
- max-height: 100%;
23
- min-height: 100%;
24
- padding: 0 50px 10px;
17
+ height: initial;
18
+ max-height: initial;
19
+ min-height: initial;
25
20
  word-break: break-all;
26
21
  }
27
22
  .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content .bk-info-sub-title {
28
- margin-bottom: 10px;
29
23
  text-align: center;
30
24
  word-break: break-all;
31
25
  }
32
26
  .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-footer {
33
- padding: 0 65px 33px;
27
+ height: initial;
28
+ margin-top: 24px;
34
29
  background-color: #fff;
35
30
  border-top: none;
36
31
  }
@@ -38,11 +33,11 @@
38
33
  min-width: 88px;
39
34
  }
40
35
  .bk-modal-ctx {
41
- pointer-events: auto;
42
36
  top: 0px;
43
37
  left: 0px;
44
38
  width: 100%;
45
39
  height: 100%;
40
+ pointer-events: auto;
46
41
  }
47
42
  .bk-modal-ctx.--show {
48
43
  position: fixed;
@@ -51,9 +46,9 @@
51
46
  display: none;
52
47
  }
53
48
  .bk-modal-ctx .bk-modal-ctx-mask {
54
- display: none;
55
- left: 0;
56
49
  top: 0;
50
+ left: 0;
51
+ display: none;
57
52
  width: 100%;
58
53
  height: 100%;
59
54
  background-color: rgba(0, 0, 0, 0.6);
@@ -95,7 +90,7 @@
95
90
  }
96
91
  .bk-modal-wrapper .bk-modal-body {
97
92
  height: 100%;
98
- width: 100%;
93
+ overflow: hidden;
99
94
  background: #fff;
100
95
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
101
96
  }
package/lib/modal/modal.less CHANGED
@@ -2,12 +2,12 @@
2
2
  @import '../info-box/info-box.less';
3
3
 
4
4
  .@{bk-prefix}-modal-ctx {
5
- pointer-events: auto;
6
5
  top: 0px;
7
6
  left: 0px;
8
7
 
9
8
  width: 100%;
10
9
  height: 100%;
10
+ pointer-events: auto;
11
11
 
12
12
  &.--show {
13
13
  position: fixed;
@@ -18,12 +18,12 @@
18
18
  }
19
19
 
20
20
  .@{bk-prefix}-modal-ctx-mask {
21
- display: none;
22
- left: 0;
23
21
  top: 0;
22
+ left: 0;
23
+ display: none;
24
24
  width: 100%;
25
25
  height: 100%;
26
- background-color: rgba(0,0,0,0.6);
26
+ background-color: rgba(0,0,0,.6);
27
27
 
28
28
  &.--show {
29
29
  position: fixed;
@@ -73,7 +73,7 @@
73
73
 
74
74
  .@{bk-prefix}-modal-body {
75
75
  height: 100%;
76
- width: 100%;
76
+ overflow: hidden;
77
77
  background: #fff;
78
78
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
79
79
  }