bkui-vue 1.0.3-beta.67 → 1.0.3-beta.67.dialog.2

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 (89) hide show
  1. package/dist/index.cjs.js +70 -70
  2. package/dist/index.esm.js +19848 -19033
  3. package/dist/index.umd.js +70 -70
  4. package/dist/style.css +1 -1
  5. package/dist/style.variable.css +1 -1
  6. package/lib/components.d.ts +1 -0
  7. package/lib/components.js +1 -0
  8. package/lib/dialog/dialog.css +135 -84
  9. package/lib/dialog/dialog.d.ts +32 -133
  10. package/lib/dialog/dialog.less +9 -76
  11. package/lib/dialog/dialog.variable.css +135 -84
  12. package/lib/dialog/index.d.ts +84 -314
  13. package/lib/dialog/index.js +206 -221
  14. package/lib/dialog/props.d.ts +8 -48
  15. package/lib/info-box/index.d.ts +2 -2
  16. package/lib/info-box/index.js +318 -173
  17. package/lib/info-box/info-box.css +63 -7
  18. package/lib/info-box/info-box.d.ts +17 -16
  19. package/lib/info-box/info-box.less +76 -14
  20. package/lib/info-box/info-box.variable.css +63 -7
  21. package/lib/info-box/render-component.d.ts +4 -0
  22. package/lib/input/index.js +2 -1
  23. package/lib/modal/hooks.d.ts +1 -1
  24. package/lib/modal/index.d.ts +16 -350
  25. package/lib/modal/index.js +183 -675
  26. package/lib/modal/mask.d.ts +6 -0
  27. package/lib/modal/modal.css +131 -32
  28. package/lib/modal/modal.d.ts +6 -134
  29. package/lib/modal/modal.less +84 -29
  30. package/lib/modal/modal.variable.css +131 -32
  31. package/lib/modal/props.mixin.d.ts +2 -53
  32. package/lib/overflow-title/index.js +46 -52
  33. package/lib/scrollbar/index.d.ts +15 -0
  34. package/lib/scrollbar/index.js +18756 -0
  35. package/lib/scrollbar/scrollbar-core/can-use-dom.d.ts +2 -0
  36. package/lib/scrollbar/scrollbar-core/helpers.d.ts +5 -0
  37. package/lib/scrollbar/scrollbar-core/index.d.ts +240 -0
  38. package/lib/scrollbar/scrollbar-core/mouse-wheel.d.ts +5 -0
  39. package/lib/scrollbar/scrollbar-core/scrollbar-width.d.ts +1 -0
  40. package/lib/scrollbar/scrollbar.css +75 -0
  41. package/lib/scrollbar/scrollbar.less +94 -0
  42. package/lib/scrollbar/scrollbar.variable.css +204 -0
  43. package/lib/shared/index.d.ts +0 -1
  44. package/lib/shared/index.js +1 -48
  45. package/lib/sideslider/index.d.ts +31 -222
  46. package/lib/sideslider/index.js +64 -40
  47. package/lib/sideslider/sideslider.css +17 -86
  48. package/lib/sideslider/sideslider.d.ts +14 -105
  49. package/lib/sideslider/sideslider.less +27 -107
  50. package/lib/sideslider/sideslider.variable.css +17 -86
  51. package/lib/table/components/table-cell.d.ts +3 -2
  52. package/lib/table/components/table-column.d.ts +2 -2
  53. package/lib/table/const.d.ts +1 -1
  54. package/lib/table/index.d.ts +25 -2
  55. package/lib/table/index.js +237 -85
  56. package/lib/table/plugins/head-filter.css +8 -4
  57. package/lib/table/plugins/head-filter.less +6 -3
  58. package/lib/table/plugins/head-filter.variable.css +8 -4
  59. package/lib/table/plugins/use-fixed-column.d.ts +1 -1
  60. package/lib/table/plugins/use-pagination.d.ts +3 -1
  61. package/lib/table/plugins/use-shift-key.d.ts +11 -0
  62. package/lib/table/props.d.ts +11 -3
  63. package/lib/table/table.css +106 -46
  64. package/lib/table/table.d.ts +11 -0
  65. package/lib/table/table.less +43 -58
  66. package/lib/table/table.variable.css +106 -46
  67. package/lib/table/use-attributes.d.ts +2 -1
  68. package/lib/table/use-column.d.ts +6 -6
  69. package/lib/table/use-render.d.ts +1 -1
  70. package/lib/table-column/index.d.ts +6 -6
  71. package/lib/table-column/index.js +6 -2
  72. package/lib/tree/index.d.ts +23 -0
  73. package/lib/tree/index.js +9 -3
  74. package/lib/tree/props.d.ts +8 -0
  75. package/lib/tree/tree.css +76 -2
  76. package/lib/tree/tree.d.ts +11 -0
  77. package/lib/tree/tree.variable.css +76 -2
  78. package/lib/virtual-render/index.d.ts +27 -0
  79. package/lib/virtual-render/index.js +285 -76
  80. package/lib/virtual-render/props.d.ts +16 -0
  81. package/lib/virtual-render/use-fix-top.d.ts +2 -7
  82. package/lib/virtual-render/use-scrollbar.d.ts +24 -0
  83. package/lib/virtual-render/v-virtual-render.d.ts +2 -1
  84. package/lib/virtual-render/virtual-render.css +76 -2
  85. package/lib/virtual-render/virtual-render.d.ts +13 -0
  86. package/lib/virtual-render/virtual-render.less +3 -3
  87. package/lib/virtual-render/virtual-render.variable.css +76 -2
  88. package/package.json +1 -1
  89. package/lib/shared/mask.d.ts +0 -11
package/lib/dialog/dialog.variable.css CHANGED
@@ -127,32 +127,76 @@
127
127
  --select-active-color: #e1ecff;
128
128
  --select-hover-color: #f5f7fa;
129
129
  }
130
- .bk-info-wrapper .bk-modal-wrapper {
131
- width: 440px;
130
+ .bk-infobox {
131
+ font-size: 12px;
132
132
  }
133
- .bk-info-wrapper .bk-modal-wrapper .bk-dialog-header .bk-dialog-title {
133
+ .bk-infobox .bk-modal-wrapper {
134
+ top: 50%;
135
+ left: 50%;
136
+ transform: translate(-50%, -50%);
137
+ }
138
+ .bk-infobox-header {
139
+ padding-top: 24px;
140
+ }
141
+ .bk-infobox-type {
142
+ display: flex;
143
+ justify-content: center;
144
+ align-items: center;
145
+ }
146
+ .bk-infobox-icon {
147
+ width: 42px;
148
+ height: 42px;
149
+ font-size: 42px;
150
+ }
151
+ .bk-infobox-icon.success {
152
+ color: #2dcb56;
153
+ }
154
+ .bk-infobox-icon.warning {
155
+ color: #ff9c01;
156
+ }
157
+ .bk-infobox-icon.danger {
158
+ color: #ea3636;
159
+ }
160
+ .bk-infobox-icon.loading {
161
+ color: #3a84ff;
162
+ }
163
+ .bk-infobox-title {
164
+ padding-right: 24px;
165
+ padding-left: 24px;
166
+ margin-top: 24px;
167
+ font-size: 20px;
168
+ line-height: 32px;
169
+ color: #313238;
170
+ }
171
+ .bk-infobox-content {
172
+ padding-right: 24px;
173
+ padding-left: 24px;
134
174
  margin-top: 16px;
135
175
  }
136
- .bk-info-wrapper .bk-dialog-footer button {
137
- min-width: 88px;
176
+ .bk-infobox-footer {
177
+ display: flex;
178
+ padding-right: 24px;
179
+ padding-bottom: 24px;
180
+ padding-left: 24px;
181
+ margin-top: 24px;
182
+ align-content: center;
138
183
  }
139
- .bk-info-sub-title {
140
- text-align: center;
141
- word-break: break-all;
184
+ .bk-infobox-footer.is-position-right {
185
+ justify-content: right;
142
186
  }
143
- .bk-modal-ctx {
144
- position: fixed;
145
- top: 0px;
146
- left: 0px;
147
- display: none;
148
- width: 100%;
149
- height: 100%;
150
- pointer-events: auto;
187
+ .bk-infobox-footer.is-position-center {
188
+ justify-content: center;
189
+ }
190
+ .bk-infobox-footer.is-position-left {
191
+ justify-content: left;
151
192
  }
152
- .bk-modal-ctx.is-show {
153
- display: block;
193
+ .bk-infobox-footer .bk-button {
194
+ min-width: 88px;
154
195
  }
155
- .bk-modal-ctx-mask {
196
+ .bk-infobox-footer .bk-button ~ .bk-button {
197
+ margin-left: 8px;
198
+ }
199
+ .bk-modal-mask {
156
200
  position: fixed;
157
201
  top: 0;
158
202
  left: 0;
@@ -161,18 +205,7 @@
161
205
  background-color: rgba(0, 0, 0, 0.6);
162
206
  }
163
207
  .bk-modal-wrapper {
164
- position: absolute;
165
- top: 50%;
166
- left: 50%;
167
- border-radius: 2px;
168
- transform: translate(-50%, -50%);
169
- }
170
- .bk-modal-outside {
171
208
  position: fixed;
172
- top: 0;
173
- right: 0;
174
- bottom: 0;
175
- left: 0;
176
209
  }
177
210
  .bk-modal-body {
178
211
  height: 100%;
@@ -183,8 +216,10 @@
183
216
  }
184
217
  .bk-modal-content {
185
218
  max-height: 100vh;
186
- overflow: auto;
187
- scrollbar-gutter: stable;
219
+ font-size: 0;
220
+ }
221
+ .bk-modal-content div {
222
+ font-size: 12px;
188
223
  }
189
224
  .bk-modal-close {
190
225
  position: absolute;
@@ -204,73 +239,94 @@
204
239
  .bk-modal-close:hover {
205
240
  background: #f0f1f5;
206
241
  }
207
- .bk-dialog {
208
- font-size: 14px;
242
+ .modal-fadein-enter-from {
243
+ opacity: 0;
209
244
  }
210
- .bk-dialog.is-fullscreen {
211
- top: 0;
212
- right: 0 ;
213
- bottom: 0;
214
- left: 0;
215
- transform: translate(0, 0);
245
+ .modal-fadein-enter-from .bk-modal-body {
246
+ transform: translateY(-20px);
216
247
  }
217
- .bk-dialog.is-fullscreen .bk-modal-wrapper {
218
- top: 0;
219
- right: 0;
220
- bottom: 0;
221
- left: 0;
222
- transform: translate(0, 0);
248
+ .modal-fadein-enter-to {
249
+ opacity: 1;
223
250
  }
224
- .bk-dialog-wrapper .bk-modal-wrapper {
225
- position: relative;
251
+ .modal-fadein-enter-to .bk-modal-body {
252
+ transform: translateY(0);
226
253
  }
227
- .bk-dialog-wrapper .bk-modal-wrapper * {
228
- box-sizing: border-box;
229
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
254
+ .modal-fadein-leave-from {
255
+ opacity: 1;
230
256
  }
231
- .bk-dialog-wrapper .bk-modal-wrapper.scroll-able .bk-modal-content {
232
- overflow: auto;
257
+ .modal-fadein-leave-from .bk-modal-body {
258
+ transform: translateY(0);
233
259
  }
234
- .bk-dialog-wrapper .bk-modal-wrapper.multi-instance {
235
- position: absolute;
260
+ .modal-fadein-leave-to {
261
+ opacity: 0;
236
262
  }
237
- .bk-dialog-wrapper .bk-modal-wrapper.fullscreen .bk-modal-content {
238
- max-height: calc(100vh - 137px);
263
+ .modal-fadein-leave-to .bk-modal-body {
264
+ transform: translateY(-20px);
239
265
  }
240
- .bk-dialog-wrapper .bk-modal-wrapper.fullscreen.no-footer {
241
- max-height: calc(100vh - 79px);
266
+ .modal-fadein-enter-active,
267
+ .modal-fadein-leave-active {
268
+ transition: opacity 0.15s linear;
242
269
  }
243
- .bk-dialog-wrapper .bk-modal-wrapper.no-footer .bk-modal-body {
244
- padding-bottom: 0;
270
+ .modal-fadein-enter-active .bk-modal-body,
271
+ .modal-fadein-leave-active .bk-modal-body {
272
+ transition: transform 0.08s linear;
245
273
  }
246
- .bk-dialog-header {
247
- padding: 16px 24px 0;
248
- font-size: 20px;
249
- line-height: 1;
274
+ .modal-right-enter-from {
275
+ transform: translateX(100%);
250
276
  }
251
- .bk-dialog-header-icon {
252
- display: flex;
253
- justify-content: center;
277
+ .modal-right-enter-to {
278
+ transform: translateX(0);
254
279
  }
255
- .bk-dialog-header-icon .bk-info-icon {
256
- font-size: 48px;
280
+ .modal-right-leave-from {
281
+ transform: translateX(0);
257
282
  }
258
- .bk-dialog-header-icon .bk-info-icon.success {
259
- color: #2dcb56;
283
+ .modal-right-leave-to {
284
+ transform: translateX(100%);
260
285
  }
261
- .bk-dialog-header-icon .bk-info-icon.warning {
262
- color: #ff9c01;
286
+ .modal-right-enter-active,
287
+ .modal-right-leave-active {
288
+ transition: transform 0.15s ease;
263
289
  }
264
- .bk-dialog-header-icon .bk-info-icon.danger {
265
- color: #ea3636;
290
+ .modal-left-enter-from {
291
+ transform: translateX(-100%);
292
+ }
293
+ .modal-left-enter-to {
294
+ transform: translateX(0);
295
+ }
296
+ .modal-left-leave-from {
297
+ transform: translateX(0);
298
+ }
299
+ .modal-left-leave-to {
300
+ transform: translateX(-100%);
301
+ }
302
+ .modal-left-enter-active,
303
+ .modal-left-leave-active {
304
+ transition: transform 0.15s ease;
305
+ }
306
+ .bk-dialog {
307
+ font-size: 14px;
308
+ }
309
+ .bk-dialog.is-fullscreen .bk-modal-wrapper {
310
+ top: 0;
311
+ right: 0;
312
+ bottom: 0;
313
+ left: 0;
314
+ border-radius: 0;
315
+ transform: translate(0, 0);
316
+ }
317
+ .bk-dialog .bk-modal-wrapper {
318
+ top: 50%;
319
+ left: 50%;
320
+ transform: translate(-50%, -50%);
321
+ }
322
+ .bk-dialog-header {
323
+ padding: 16px 24px 0;
324
+ font-size: 20px;
266
325
  }
267
326
  .bk-dialog-title {
268
327
  display: inline-block;
269
328
  width: 100%;
270
- overflow: hidden;
271
329
  color: #313238;
272
- text-overflow: ellipsis;
273
- white-space: nowrap;
274
330
  }
275
331
  .bk-dialog-tool {
276
332
  position: absolute;
@@ -278,15 +334,10 @@
278
334
  right: 0;
279
335
  left: 0;
280
336
  height: 18px;
281
- }
282
- .bk-dialog-tool.move {
283
337
  cursor: move;
284
- }
285
- .bk-dialog-tool.content-dragging {
286
338
  user-select: none;
287
339
  }
288
340
  .bk-dialog-content {
289
- max-height: calc(100vh - 300px);
290
341
  padding: 0 24px;
291
342
  margin-top: 16px;
292
343
  margin-bottom: 24px;