bkui-vue 0.0.3-beta.5 → 1.0.0

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 (203) hide show
  1. package/dist/index.cjs.js +36 -36
  2. package/dist/index.esm.js +9724 -9973
  3. package/dist/index.umd.js +36 -36
  4. package/dist/style.css +1 -1
  5. package/dist/style.variable.css +1 -1
  6. package/lib/affix/index.js +16 -15
  7. package/lib/alert/index.js +25 -24
  8. package/lib/animate-number/index.js +7 -7
  9. package/lib/backtop/index.js +23 -22
  10. package/lib/badge/index.js +22 -21
  11. package/lib/breadcrumb/index.js +31 -30
  12. package/lib/button/index.js +42 -34
  13. package/lib/card/index.js +44 -37
  14. package/lib/cascader/index.js +105 -86
  15. package/lib/checkbox/index.js +39 -38
  16. package/lib/code-diff/code-diff.css +0 -1
  17. package/lib/code-diff/code-diff.d.ts +1 -0
  18. package/lib/code-diff/code-diff.less +1 -1
  19. package/lib/code-diff/code-diff.variable.css +0 -1
  20. package/lib/code-diff/index.js +152 -15
  21. package/lib/collapse/index.js +46 -45
  22. package/lib/collapse-transition/index.js +10 -10
  23. package/lib/color-picker/index.js +51 -50
  24. package/lib/components.js +63 -504
  25. package/lib/config-provider/index.js +30 -26
  26. package/lib/config-provider/use-global-config.d.ts +2 -2
  27. package/lib/container/index.js +28 -27
  28. package/lib/date-picker/index.js +72 -66
  29. package/lib/dialog/dialog.css +61 -35
  30. package/lib/dialog/dialog.d.ts +20 -11
  31. package/lib/dialog/dialog.less +2 -2
  32. package/lib/dialog/dialog.variable.css +61 -35
  33. package/lib/dialog/index.d.ts +38 -22
  34. package/lib/dialog/index.js +68 -54
  35. package/lib/dialog/props.d.ts +8 -4
  36. package/lib/directives/index.js +24 -24
  37. package/lib/dist.index.js +5 -61
  38. package/lib/divider/index.js +16 -15
  39. package/lib/dropdown/index.js +39 -32
  40. package/lib/exception/index.js +20 -19
  41. package/lib/fixed-navbar/index.js +16 -15
  42. package/lib/form/index.js +60 -59
  43. package/lib/hooks.js +8 -48
  44. package/lib/icon/angle-double-down-line.js +2 -2
  45. package/lib/icon/angle-double-left-line.js +2 -2
  46. package/lib/icon/angle-double-left.js +2 -2
  47. package/lib/icon/angle-double-right-line.js +2 -2
  48. package/lib/icon/angle-double-right.js +2 -2
  49. package/lib/icon/angle-double-up-line.js +2 -2
  50. package/lib/icon/angle-down-fill.js +2 -2
  51. package/lib/icon/angle-down-line.js +2 -2
  52. package/lib/icon/angle-down.js +2 -2
  53. package/lib/icon/angle-left.js +2 -2
  54. package/lib/icon/angle-right.js +2 -2
  55. package/lib/icon/angle-up-fill.js +2 -2
  56. package/lib/icon/angle-up.js +2 -2
  57. package/lib/icon/archive-fill.js +2 -2
  58. package/lib/icon/arrows-left.js +2 -2
  59. package/lib/icon/arrows-right.js +2 -2
  60. package/lib/icon/assistant.js +2 -2
  61. package/lib/icon/audio-fill.js +2 -2
  62. package/lib/icon/bk.js +2 -2
  63. package/lib/icon/circle.js +2 -2
  64. package/lib/icon/close-line.js +2 -2
  65. package/lib/icon/close.js +2 -2
  66. package/lib/icon/code.js +2 -2
  67. package/lib/icon/cog-shape.js +2 -2
  68. package/lib/icon/collapse-left.js +2 -2
  69. package/lib/icon/copy-shape.js +2 -2
  70. package/lib/icon/copy.js +2 -2
  71. package/lib/icon/data-shape.js +2 -2
  72. package/lib/icon/del.js +2 -2
  73. package/lib/icon/doc-fill.js +2 -2
  74. package/lib/icon/done.js +2 -2
  75. package/lib/icon/down-shape.js +2 -2
  76. package/lib/icon/down-small.js +2 -2
  77. package/lib/icon/edit-line.js +2 -2
  78. package/lib/icon/ellipsis.js +2 -2
  79. package/lib/icon/enlarge-line.js +2 -2
  80. package/lib/icon/error.js +2 -2
  81. package/lib/icon/excel-fill.js +2 -2
  82. package/lib/icon/exclamation-circle-shape.js +2 -2
  83. package/lib/icon/eye.js +2 -2
  84. package/lib/icon/filliscreen-line.js +2 -2
  85. package/lib/icon/fix-line.js +2 -2
  86. package/lib/icon/fix-shape.js +2 -2
  87. package/lib/icon/folder-open.js +2 -2
  88. package/lib/icon/folder-shape-open.js +2 -2
  89. package/lib/icon/folder-shape.js +2 -2
  90. package/lib/icon/folder.js +2 -2
  91. package/lib/icon/funnel.js +2 -2
  92. package/lib/icon/grag-fill.js +2 -2
  93. package/lib/icon/help-document-fill.js +2 -2
  94. package/lib/icon/help-fill.js +2 -2
  95. package/lib/icon/help.js +2 -2
  96. package/lib/icon/image-fill.js +15 -15
  97. package/lib/icon/img-error.js +15 -15
  98. package/lib/icon/img-placehoulder.js +15 -15
  99. package/lib/icon/index.js +386 -386
  100. package/lib/icon/info-line.js +15 -15
  101. package/lib/icon/info.js +15 -15
  102. package/lib/icon/left-shape.js +15 -15
  103. package/lib/icon/left-turn-line.js +15 -15
  104. package/lib/icon/loading.js +15 -15
  105. package/lib/icon/narrow-line.js +15 -15
  106. package/lib/icon/original.js +15 -15
  107. package/lib/icon/pdf-fill.js +15 -15
  108. package/lib/icon/play-shape.js +15 -15
  109. package/lib/icon/plus.js +15 -15
  110. package/lib/icon/ppt-fill.js +15 -15
  111. package/lib/icon/qq.js +15 -15
  112. package/lib/icon/right-shape.js +15 -15
  113. package/lib/icon/right-turn-line.js +15 -15
  114. package/lib/icon/search.js +15 -15
  115. package/lib/icon/share.js +15 -15
  116. package/lib/icon/spinner.js +15 -15
  117. package/lib/icon/success.js +15 -15
  118. package/lib/icon/switcher-loading.js +15 -15
  119. package/lib/icon/text-file.js +15 -15
  120. package/lib/icon/text-fill.js +15 -15
  121. package/lib/icon/transfer.js +15 -15
  122. package/lib/icon/tree-application-shape.js +15 -15
  123. package/lib/icon/unfull-screen.js +15 -15
  124. package/lib/icon/unvisible.js +15 -15
  125. package/lib/icon/up-shape.js +15 -15
  126. package/lib/icon/upload.js +15 -15
  127. package/lib/icon/video-fill.js +15 -15
  128. package/lib/icon/warn.js +15 -15
  129. package/lib/icon/weixin-pro.js +15 -15
  130. package/lib/icon/weixin.js +15 -15
  131. package/lib/image/index.js +43 -43
  132. package/lib/index.js +8 -72
  133. package/lib/info-box/index.d.ts +1 -0
  134. package/lib/info-box/index.js +177 -17384
  135. package/lib/info-box/info-box.css +10 -10
  136. package/lib/info-box/info-box.d.ts +4 -3
  137. package/lib/info-box/info-box.less +37 -34
  138. package/lib/info-box/info-box.variable.css +10 -10
  139. package/lib/input/index.js +62 -61
  140. package/lib/link/index.js +16 -15
  141. package/lib/loading/index.js +28 -27
  142. package/lib/locale/index.js +2 -2
  143. package/lib/menu/index.js +24 -23
  144. package/lib/message/index.js +41 -40
  145. package/lib/modal/index.d.ts +108 -65
  146. package/lib/modal/index.js +193 -135
  147. package/lib/modal/modal.css +36 -10
  148. package/lib/modal/modal.d.ts +40 -22
  149. package/lib/modal/modal.less +34 -0
  150. package/lib/modal/modal.variable.css +36 -10
  151. package/lib/modal/props.mixin.d.ts +8 -4
  152. package/lib/navigation/index.js +17 -16
  153. package/lib/notify/index.js +34 -33
  154. package/lib/overflow-title/index.js +31 -24
  155. package/lib/pagination/index.js +68 -54
  156. package/lib/plugin-popover/index.js +55 -55
  157. package/lib/plugins/index.js +2 -2
  158. package/lib/pop-confirm/index.js +43 -30
  159. package/lib/popover/index.js +59 -58
  160. package/lib/popover2/index.js +5 -5
  161. package/lib/preset.d.ts +2 -281
  162. package/lib/preset.js +16 -58
  163. package/lib/process/index.js +28 -28
  164. package/lib/progress/index.js +29 -28
  165. package/lib/radio/index.js +41 -40
  166. package/lib/rate/index.js +25 -24
  167. package/lib/resize-layout/index.d.ts +3 -3
  168. package/lib/resize-layout/index.js +28 -27
  169. package/lib/resize-layout/resize-layout.d.ts +1 -1
  170. package/lib/search-select/index.js +71 -53
  171. package/lib/select/index.js +172 -134
  172. package/lib/shared/index.d.ts +1 -2
  173. package/lib/shared/index.js +638 -1285
  174. package/lib/shared/mask.d.ts +11 -0
  175. package/lib/sideslider/index.d.ts +38 -22
  176. package/lib/sideslider/index.js +23 -17
  177. package/lib/sideslider/sideslider.css +12 -11
  178. package/lib/sideslider/sideslider.d.ts +20 -11
  179. package/lib/sideslider/sideslider.less +79 -77
  180. package/lib/sideslider/sideslider.variable.css +12 -11
  181. package/lib/slider/index.js +37 -24
  182. package/lib/steps/index.js +31 -30
  183. package/lib/swiper/index.js +17 -16
  184. package/lib/switcher/index.js +32 -31
  185. package/lib/tab/index.js +55 -54
  186. package/lib/table/components/table-column.d.ts +1 -0
  187. package/lib/table/index.d.ts +1 -0
  188. package/lib/table/index.js +200 -147
  189. package/lib/table/props.d.ts +1 -0
  190. package/lib/table/use-column.d.ts +3 -0
  191. package/lib/table-column/index.d.ts +3 -0
  192. package/lib/table-column/index.js +43 -43
  193. package/lib/tag/index.js +22 -21
  194. package/lib/tag-input/index.js +81 -67
  195. package/lib/time-picker/index.js +10 -9
  196. package/lib/timeline/index.js +14 -14
  197. package/lib/transfer/index.js +52 -38
  198. package/lib/tree/index.js +93 -74
  199. package/lib/upload/index.js +64 -50
  200. package/lib/virtual-render/index.js +36 -35
  201. package/package.json +8 -4
  202. package/lib/shared/mask-manager.d.ts +0 -89
  203. package/lib/shared/pop-manager.d.ts +0 -41
package/lib/dialog/dialog.css CHANGED
@@ -1,42 +1,67 @@
1
- .bk-modal-wrapper.bk-info-wrapper {
1
+ .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper {
2
2
  width: 440px;
3
3
  }
4
- .bk-modal-wrapper.bk-info-wrapper.normal {
4
+ .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper.normal {
5
5
  width: 440px;
6
6
  }
7
- .bk-modal-wrapper.bk-info-wrapper.small {
7
+ .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper.small {
8
8
  width: 400px;
9
9
  }
10
- .bk-modal-wrapper.bk-info-wrapper .bk-modal-body {
10
+ .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-body {
11
11
  border-radius: 2px;
12
12
  }
13
- .bk-modal-wrapper.bk-info-wrapper .bk-dialog-header {
13
+ .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header {
14
14
  padding: 24px 24px 0;
15
15
  }
16
- .bk-modal-wrapper.bk-info-wrapper .bk-dialog-header .bk-dialog-title {
16
+ .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header .bk-dialog-title {
17
17
  height: 27px;
18
18
  margin: 15px 0 10px;
19
19
  }
20
- .bk-modal-wrapper.bk-info-wrapper .bk-modal-content {
20
+ .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content {
21
21
  height: 100%;
22
22
  max-height: 100%;
23
23
  min-height: 100%;
24
24
  padding: 0 50px 10px;
25
25
  word-break: break-all;
26
26
  }
27
- .bk-modal-wrapper.bk-info-wrapper .bk-modal-content .bk-info-sub-title {
27
+ .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content .bk-info-sub-title {
28
28
  margin-bottom: 10px;
29
29
  text-align: center;
30
30
  word-break: break-all;
31
31
  }
32
- .bk-modal-wrapper.bk-info-wrapper .bk-modal-footer {
32
+ .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-footer {
33
33
  padding: 0 65px 33px;
34
34
  background-color: #fff;
35
35
  border-top: none;
36
36
  }
37
- .bk-modal-wrapper.bk-info-wrapper .bk-modal-footer .bk-dialog-footer button {
37
+ .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-footer .bk-dialog-footer button {
38
38
  min-width: 88px;
39
39
  }
40
+ .bk-modal-ctx {
41
+ pointer-events: auto;
42
+ top: 0px;
43
+ left: 0px;
44
+ width: 100%;
45
+ height: 100%;
46
+ }
47
+ .bk-modal-ctx.--show {
48
+ position: fixed;
49
+ }
50
+ .bk-modal-ctx.--hide {
51
+ display: none;
52
+ }
53
+ .bk-modal-ctx .bk-modal-ctx-mask {
54
+ display: none;
55
+ left: 0;
56
+ top: 0;
57
+ width: 100%;
58
+ height: 100%;
59
+ background-color: rgba(0, 0, 0, 0.6);
60
+ }
61
+ .bk-modal-ctx .bk-modal-ctx-mask.--show {
62
+ position: fixed;
63
+ display: inherit;
64
+ }
40
65
  .bk-modal-wrapper {
41
66
  position: absolute;
42
67
  top: 50%;
@@ -70,57 +95,58 @@
70
95
  }
71
96
  .bk-modal-wrapper .bk-modal-body {
72
97
  height: 100%;
98
+ width: 100%;
73
99
  background: #fff;
74
100
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
75
101
  }
76
- .bk-modal-wrapper.bk-dialog-wrapper {
102
+ .bk-dialog-wrapper .bk-modal-wrapper {
77
103
  position: relative;
78
104
  }
79
- .bk-modal-wrapper.bk-dialog-wrapper * {
105
+ .bk-dialog-wrapper .bk-modal-wrapper * {
80
106
  box-sizing: border-box;
81
107
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
82
108
  }
83
- .bk-modal-wrapper.bk-dialog-wrapper.scroll-able .bk-modal-content {
109
+ .bk-dialog-wrapper .bk-modal-wrapper.scroll-able .bk-modal-content {
84
110
  overflow: auto;
85
111
  }
86
- .bk-modal-wrapper.bk-dialog-wrapper.multi-instance {
112
+ .bk-dialog-wrapper .bk-modal-wrapper.multi-instance {
87
113
  position: absolute;
88
114
  }
89
- .bk-modal-wrapper.bk-dialog-wrapper .bk-dialog-tool {
115
+ .bk-dialog-wrapper .bk-modal-wrapper .bk-dialog-tool {
90
116
  position: absolute;
91
117
  top: 0;
92
118
  right: 0;
93
119
  left: 0;
94
120
  height: 18px;
95
121
  }
96
- .bk-modal-wrapper.bk-dialog-wrapper .move {
122
+ .bk-dialog-wrapper .bk-modal-wrapper .move {
97
123
  cursor: move;
98
124
  }
99
- .bk-modal-wrapper.bk-dialog-wrapper .content-dragging {
125
+ .bk-dialog-wrapper .bk-modal-wrapper .content-dragging {
100
126
  user-select: none;
101
127
  }
102
- .bk-modal-wrapper.bk-dialog-wrapper .bk-dialog-header {
128
+ .bk-dialog-wrapper .bk-modal-wrapper .bk-dialog-header {
103
129
  padding: 16px 24px 12px;
104
130
  font-size: 20px;
105
131
  line-height: 1;
106
132
  }
107
- .bk-modal-wrapper.bk-dialog-wrapper .bk-dialog-header .bk-header-icon {
133
+ .bk-dialog-wrapper .bk-modal-wrapper .bk-dialog-header .bk-header-icon {
108
134
  text-align: center;
109
135
  }
110
- .bk-modal-wrapper.bk-dialog-wrapper .bk-dialog-header .bk-header-icon .bk-info-icon {
136
+ .bk-dialog-wrapper .bk-modal-wrapper .bk-dialog-header .bk-header-icon .bk-info-icon {
111
137
  display: inline-block;
112
138
  font-size: 48px;
113
139
  }
114
- .bk-modal-wrapper.bk-dialog-wrapper .bk-dialog-header .bk-header-icon .bk-info-icon.success {
140
+ .bk-dialog-wrapper .bk-modal-wrapper .bk-dialog-header .bk-header-icon .bk-info-icon.success {
115
141
  color: #2dcb56;
116
142
  }
117
- .bk-modal-wrapper.bk-dialog-wrapper .bk-dialog-header .bk-header-icon .bk-info-icon.warning {
143
+ .bk-dialog-wrapper .bk-modal-wrapper .bk-dialog-header .bk-header-icon .bk-info-icon.warning {
118
144
  color: #ff9c01;
119
145
  }
120
- .bk-modal-wrapper.bk-dialog-wrapper .bk-dialog-header .bk-header-icon .bk-info-icon.danger {
146
+ .bk-dialog-wrapper .bk-modal-wrapper .bk-dialog-header .bk-header-icon .bk-info-icon.danger {
121
147
  color: #ea3636;
122
148
  }
123
- .bk-modal-wrapper.bk-dialog-wrapper .bk-dialog-header .bk-dialog-title {
149
+ .bk-dialog-wrapper .bk-modal-wrapper .bk-dialog-header .bk-dialog-title {
124
150
  display: inline-block;
125
151
  width: 100%;
126
152
  overflow: hidden;
@@ -128,7 +154,7 @@
128
154
  text-overflow: ellipsis;
129
155
  white-space: nowrap;
130
156
  }
131
- .bk-modal-wrapper.bk-dialog-wrapper .bk-modal-content {
157
+ .bk-dialog-wrapper .bk-modal-wrapper .bk-modal-content {
132
158
  height: calc(100% - 79px);
133
159
  max-height: calc(100vh - 300px);
134
160
  min-height: 141px;
@@ -137,19 +163,19 @@
137
163
  line-height: 1.5;
138
164
  color: #63656e;
139
165
  }
140
- .bk-modal-wrapper.bk-dialog-wrapper.fullscreen .bk-modal-content {
166
+ .bk-dialog-wrapper .bk-modal-wrapper.fullscreen .bk-modal-content {
141
167
  max-height: calc(100vh - 137px);
142
168
  }
143
- .bk-modal-wrapper.bk-dialog-wrapper.fullscreen.no-footer {
169
+ .bk-dialog-wrapper .bk-modal-wrapper.fullscreen.no-footer {
144
170
  max-height: calc(100vh - 79px);
145
171
  }
146
- .bk-modal-wrapper.bk-dialog-wrapper .bk-modal-body {
172
+ .bk-dialog-wrapper .bk-modal-wrapper .bk-modal-body {
147
173
  padding-bottom: 48px;
148
174
  }
149
- .bk-modal-wrapper.bk-dialog-wrapper.no-footer .bk-modal-body {
175
+ .bk-dialog-wrapper .bk-modal-wrapper.no-footer .bk-modal-body {
150
176
  padding-bottom: 0;
151
177
  }
152
- .bk-modal-wrapper.bk-dialog-wrapper .bk-modal-footer {
178
+ .bk-dialog-wrapper .bk-modal-wrapper .bk-modal-footer {
153
179
  position: absolute;
154
180
  right: 0;
155
181
  bottom: 0;
@@ -160,17 +186,17 @@
160
186
  border-top: 1px solid #dcdee5;
161
187
  border-radius: 2px;
162
188
  }
163
- .bk-modal-wrapper.bk-dialog-wrapper .bk-modal-footer .bk-dialog-perv {
189
+ .bk-dialog-wrapper .bk-modal-wrapper .bk-modal-footer .bk-dialog-perv {
164
190
  float: left;
165
191
  margin-right: 8px;
166
192
  }
167
- .bk-modal-wrapper.bk-dialog-wrapper .bk-modal-footer .bk-dialog-next {
193
+ .bk-dialog-wrapper .bk-modal-wrapper .bk-modal-footer .bk-dialog-next {
168
194
  float: left;
169
195
  }
170
- .bk-modal-wrapper.bk-dialog-wrapper .bk-modal-footer .bk-dialog-cancel {
196
+ .bk-dialog-wrapper .bk-modal-wrapper .bk-modal-footer .bk-dialog-cancel {
171
197
  margin-left: 8px;
172
198
  }
173
- .bk-modal-wrapper.bk-dialog-wrapper .bk-modal-close {
199
+ .bk-dialog-wrapper .bk-modal-wrapper .bk-modal-close {
174
200
  position: absolute;
175
201
  top: 4px;
176
202
  right: 4px;
@@ -178,6 +204,6 @@
178
204
  color: #c4c6cc;
179
205
  cursor: pointer;
180
206
  }
181
- .bk-modal-wrapper.bk-dialog-wrapper .bk-modal-close:hover {
207
+ .bk-dialog-wrapper .bk-modal-wrapper .bk-modal-close:hover {
182
208
  color: #979ba5;
183
209
  }
package/lib/dialog/dialog.d.ts CHANGED
@@ -94,9 +94,7 @@ declare const _default: import("vue").DefineComponent<{
94
94
  transfer: import("vue-types").VueTypeDef<string | boolean | HTMLElement> & {
95
95
  default: string | boolean | (() => HTMLElement);
96
96
  };
97
- zIndex: import("vue-types").VueTypeDef<string | number> & {
98
- default: string | number;
99
- };
97
+ zIndex: import("vue-types").VueTypeDef<string | number>;
100
98
  maxHeight: import("vue-types").VueTypeValidableDef<string> & {
101
99
  default: string;
102
100
  };
@@ -117,7 +115,13 @@ declare const _default: import("vue").DefineComponent<{
117
115
  } & {
118
116
  default: boolean;
119
117
  };
120
- infoType: import("vue-types").VueTypeDef<"loading" | "success" | "warning" | "danger">;
118
+ infoType: import("vue-types").VueTypeDef<"success" | "warning" | "danger" | "primary">;
119
+ left: import("vue-types").VueTypeValidableDef<string> & {
120
+ default: string;
121
+ };
122
+ top: import("vue-types").VueTypeValidableDef<string> & {
123
+ default: string;
124
+ };
121
125
  }, {
122
126
  data: {
123
127
  positionX: number;
@@ -236,9 +240,7 @@ declare const _default: import("vue").DefineComponent<{
236
240
  transfer: import("vue-types").VueTypeDef<string | boolean | HTMLElement> & {
237
241
  default: string | boolean | (() => HTMLElement);
238
242
  };
239
- zIndex: import("vue-types").VueTypeDef<string | number> & {
240
- default: string | number;
241
- };
243
+ zIndex: import("vue-types").VueTypeDef<string | number>;
242
244
  maxHeight: import("vue-types").VueTypeValidableDef<string> & {
243
245
  default: string;
244
246
  };
@@ -259,7 +261,13 @@ declare const _default: import("vue").DefineComponent<{
259
261
  } & {
260
262
  default: boolean;
261
263
  };
262
- infoType: import("vue-types").VueTypeDef<"loading" | "success" | "warning" | "danger">;
264
+ infoType: import("vue-types").VueTypeDef<"success" | "warning" | "danger" | "primary">;
265
+ left: import("vue-types").VueTypeValidableDef<string> & {
266
+ default: string;
267
+ };
268
+ top: import("vue-types").VueTypeValidableDef<string> & {
269
+ default: string;
270
+ };
263
271
  }>> & {
264
272
  onConfirm?: (...args: any[]) => any;
265
273
  onPrev?: (...args: any[]) => any;
@@ -273,21 +281,22 @@ declare const _default: import("vue").DefineComponent<{
273
281
  height: string | number;
274
282
  maxHeight: string;
275
283
  extCls: string | unknown[];
284
+ top: string;
285
+ left: string;
276
286
  isShow: boolean;
277
287
  theme: "success" | "warning" | "danger" | "primary";
278
- zIndex: string | number;
279
288
  draggable: boolean;
280
289
  transfer: string | boolean | HTMLElement;
281
- showMask: boolean;
282
- multiInstance: boolean;
283
290
  direction: string;
284
291
  renderDirective: "show" | "if";
285
292
  quickClose: boolean;
286
293
  scrollable: boolean;
294
+ showMask: boolean;
287
295
  closeIcon: boolean;
288
296
  escClose: boolean;
289
297
  fullscreen: boolean;
290
298
  animateType: string;
299
+ multiInstance: boolean;
291
300
  confirmText: string;
292
301
  cancelText: string;
293
302
  prevText: string;
package/lib/dialog/dialog.less CHANGED
@@ -1,8 +1,8 @@
1
1
  @import '../styles/themes/themes.less';
2
2
  @import '../modal/modal.less';
3
3
 
4
- .@{bk-prefix}-modal-wrapper {
5
- &.@{bk-prefix}-dialog-wrapper {
4
+ .@{bk-prefix}-dialog-wrapper {
5
+ .@{bk-prefix}-modal-wrapper {
6
6
  position: relative;
7
7
 
8
8
  * {
package/lib/dialog/dialog.variable.css CHANGED
@@ -124,45 +124,70 @@
124
124
  --search-select-message-color: var(--danger-color);
125
125
  --search-select-menu-border-color: var(--disable-color);
126
126
  }
127
- .bk-modal-wrapper.bk-info-wrapper {
127
+ .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper {
128
128
  width: 440px;
129
129
  }
130
- .bk-modal-wrapper.bk-info-wrapper.normal {
130
+ .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper.normal {
131
131
  width: 440px;
132
132
  }
133
- .bk-modal-wrapper.bk-info-wrapper.small {
133
+ .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper.small {
134
134
  width: 400px;
135
135
  }
136
- .bk-modal-wrapper.bk-info-wrapper .bk-modal-body {
136
+ .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-body {
137
137
  border-radius: 2px;
138
138
  }
139
- .bk-modal-wrapper.bk-info-wrapper .bk-dialog-header {
139
+ .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header {
140
140
  padding: 24px 24px 0;
141
141
  }
142
- .bk-modal-wrapper.bk-info-wrapper .bk-dialog-header .bk-dialog-title {
142
+ .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header .bk-dialog-title {
143
143
  height: 27px;
144
144
  margin: 15px 0 10px;
145
145
  }
146
- .bk-modal-wrapper.bk-info-wrapper .bk-modal-content {
146
+ .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content {
147
147
  height: 100%;
148
148
  max-height: 100%;
149
149
  min-height: 100%;
150
150
  padding: 0 50px 10px;
151
151
  word-break: break-all;
152
152
  }
153
- .bk-modal-wrapper.bk-info-wrapper .bk-modal-content .bk-info-sub-title {
153
+ .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content .bk-info-sub-title {
154
154
  margin-bottom: 10px;
155
155
  text-align: center;
156
156
  word-break: break-all;
157
157
  }
158
- .bk-modal-wrapper.bk-info-wrapper .bk-modal-footer {
158
+ .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-footer {
159
159
  padding: 0 65px 33px;
160
160
  background-color: #fff;
161
161
  border-top: none;
162
162
  }
163
- .bk-modal-wrapper.bk-info-wrapper .bk-modal-footer .bk-dialog-footer button {
163
+ .bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-footer .bk-dialog-footer button {
164
164
  min-width: 88px;
165
165
  }
166
+ .bk-modal-ctx {
167
+ pointer-events: auto;
168
+ top: 0px;
169
+ left: 0px;
170
+ width: 100%;
171
+ height: 100%;
172
+ }
173
+ .bk-modal-ctx.--show {
174
+ position: fixed;
175
+ }
176
+ .bk-modal-ctx.--hide {
177
+ display: none;
178
+ }
179
+ .bk-modal-ctx .bk-modal-ctx-mask {
180
+ display: none;
181
+ left: 0;
182
+ top: 0;
183
+ width: 100%;
184
+ height: 100%;
185
+ background-color: rgba(0, 0, 0, 0.6);
186
+ }
187
+ .bk-modal-ctx .bk-modal-ctx-mask.--show {
188
+ position: fixed;
189
+ display: inherit;
190
+ }
166
191
  .bk-modal-wrapper {
167
192
  position: absolute;
168
193
  top: 50%;
@@ -196,57 +221,58 @@
196
221
  }
197
222
  .bk-modal-wrapper .bk-modal-body {
198
223
  height: 100%;
224
+ width: 100%;
199
225
  background: #fff;
200
226
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
201
227
  }
202
- .bk-modal-wrapper.bk-dialog-wrapper {
228
+ .bk-dialog-wrapper .bk-modal-wrapper {
203
229
  position: relative;
204
230
  }
205
- .bk-modal-wrapper.bk-dialog-wrapper * {
231
+ .bk-dialog-wrapper .bk-modal-wrapper * {
206
232
  box-sizing: border-box;
207
233
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
208
234
  }
209
- .bk-modal-wrapper.bk-dialog-wrapper.scroll-able .bk-modal-content {
235
+ .bk-dialog-wrapper .bk-modal-wrapper.scroll-able .bk-modal-content {
210
236
  overflow: auto;
211
237
  }
212
- .bk-modal-wrapper.bk-dialog-wrapper.multi-instance {
238
+ .bk-dialog-wrapper .bk-modal-wrapper.multi-instance {
213
239
  position: absolute;
214
240
  }
215
- .bk-modal-wrapper.bk-dialog-wrapper .bk-dialog-tool {
241
+ .bk-dialog-wrapper .bk-modal-wrapper .bk-dialog-tool {
216
242
  position: absolute;
217
243
  top: 0;
218
244
  right: 0;
219
245
  left: 0;
220
246
  height: 18px;
221
247
  }
222
- .bk-modal-wrapper.bk-dialog-wrapper .move {
248
+ .bk-dialog-wrapper .bk-modal-wrapper .move {
223
249
  cursor: move;
224
250
  }
225
- .bk-modal-wrapper.bk-dialog-wrapper .content-dragging {
251
+ .bk-dialog-wrapper .bk-modal-wrapper .content-dragging {
226
252
  user-select: none;
227
253
  }
228
- .bk-modal-wrapper.bk-dialog-wrapper .bk-dialog-header {
254
+ .bk-dialog-wrapper .bk-modal-wrapper .bk-dialog-header {
229
255
  padding: 16px 24px 12px;
230
256
  font-size: 20px;
231
257
  line-height: 1;
232
258
  }
233
- .bk-modal-wrapper.bk-dialog-wrapper .bk-dialog-header .bk-header-icon {
259
+ .bk-dialog-wrapper .bk-modal-wrapper .bk-dialog-header .bk-header-icon {
234
260
  text-align: center;
235
261
  }
236
- .bk-modal-wrapper.bk-dialog-wrapper .bk-dialog-header .bk-header-icon .bk-info-icon {
262
+ .bk-dialog-wrapper .bk-modal-wrapper .bk-dialog-header .bk-header-icon .bk-info-icon {
237
263
  display: inline-block;
238
264
  font-size: 48px;
239
265
  }
240
- .bk-modal-wrapper.bk-dialog-wrapper .bk-dialog-header .bk-header-icon .bk-info-icon.success {
266
+ .bk-dialog-wrapper .bk-modal-wrapper .bk-dialog-header .bk-header-icon .bk-info-icon.success {
241
267
  color: #2dcb56;
242
268
  }
243
- .bk-modal-wrapper.bk-dialog-wrapper .bk-dialog-header .bk-header-icon .bk-info-icon.warning {
269
+ .bk-dialog-wrapper .bk-modal-wrapper .bk-dialog-header .bk-header-icon .bk-info-icon.warning {
244
270
  color: #ff9c01;
245
271
  }
246
- .bk-modal-wrapper.bk-dialog-wrapper .bk-dialog-header .bk-header-icon .bk-info-icon.danger {
272
+ .bk-dialog-wrapper .bk-modal-wrapper .bk-dialog-header .bk-header-icon .bk-info-icon.danger {
247
273
  color: #ea3636;
248
274
  }
249
- .bk-modal-wrapper.bk-dialog-wrapper .bk-dialog-header .bk-dialog-title {
275
+ .bk-dialog-wrapper .bk-modal-wrapper .bk-dialog-header .bk-dialog-title {
250
276
  display: inline-block;
251
277
  width: 100%;
252
278
  overflow: hidden;
@@ -254,7 +280,7 @@
254
280
  text-overflow: ellipsis;
255
281
  white-space: nowrap;
256
282
  }
257
- .bk-modal-wrapper.bk-dialog-wrapper .bk-modal-content {
283
+ .bk-dialog-wrapper .bk-modal-wrapper .bk-modal-content {
258
284
  height: calc(100% - 79px);
259
285
  max-height: calc(100vh - 300px);
260
286
  min-height: 141px;
@@ -263,19 +289,19 @@
263
289
  line-height: 1.5;
264
290
  color: #63656e;
265
291
  }
266
- .bk-modal-wrapper.bk-dialog-wrapper.fullscreen .bk-modal-content {
292
+ .bk-dialog-wrapper .bk-modal-wrapper.fullscreen .bk-modal-content {
267
293
  max-height: calc(100vh - 137px);
268
294
  }
269
- .bk-modal-wrapper.bk-dialog-wrapper.fullscreen.no-footer {
295
+ .bk-dialog-wrapper .bk-modal-wrapper.fullscreen.no-footer {
270
296
  max-height: calc(100vh - 79px);
271
297
  }
272
- .bk-modal-wrapper.bk-dialog-wrapper .bk-modal-body {
298
+ .bk-dialog-wrapper .bk-modal-wrapper .bk-modal-body {
273
299
  padding-bottom: 48px;
274
300
  }
275
- .bk-modal-wrapper.bk-dialog-wrapper.no-footer .bk-modal-body {
301
+ .bk-dialog-wrapper .bk-modal-wrapper.no-footer .bk-modal-body {
276
302
  padding-bottom: 0;
277
303
  }
278
- .bk-modal-wrapper.bk-dialog-wrapper .bk-modal-footer {
304
+ .bk-dialog-wrapper .bk-modal-wrapper .bk-modal-footer {
279
305
  position: absolute;
280
306
  right: 0;
281
307
  bottom: 0;
@@ -286,17 +312,17 @@
286
312
  border-top: 1px solid #dcdee5;
287
313
  border-radius: 2px;
288
314
  }
289
- .bk-modal-wrapper.bk-dialog-wrapper .bk-modal-footer .bk-dialog-perv {
315
+ .bk-dialog-wrapper .bk-modal-wrapper .bk-modal-footer .bk-dialog-perv {
290
316
  float: left;
291
317
  margin-right: 8px;
292
318
  }
293
- .bk-modal-wrapper.bk-dialog-wrapper .bk-modal-footer .bk-dialog-next {
319
+ .bk-dialog-wrapper .bk-modal-wrapper .bk-modal-footer .bk-dialog-next {
294
320
  float: left;
295
321
  }
296
- .bk-modal-wrapper.bk-dialog-wrapper .bk-modal-footer .bk-dialog-cancel {
322
+ .bk-dialog-wrapper .bk-modal-wrapper .bk-modal-footer .bk-dialog-cancel {
297
323
  margin-left: 8px;
298
324
  }
299
- .bk-modal-wrapper.bk-dialog-wrapper .bk-modal-close {
325
+ .bk-dialog-wrapper .bk-modal-wrapper .bk-modal-close {
300
326
  position: absolute;
301
327
  top: 4px;
302
328
  right: 4px;
@@ -304,6 +330,6 @@
304
330
  color: #c4c6cc;
305
331
  cursor: pointer;
306
332
  }
307
- .bk-modal-wrapper.bk-dialog-wrapper .bk-modal-close:hover {
333
+ .bk-dialog-wrapper .bk-modal-wrapper .bk-modal-close:hover {
308
334
  color: #979ba5;
309
335
  }