bkui-vue 0.0.1-beta.14 → 0.0.1-beta.15

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 (101) hide show
  1. package/README.md +25 -17
  2. package/README_EN.md +89 -0
  3. package/dist/bkui-vue.cjs.js +1473 -425
  4. package/dist/bkui-vue.esm.js +1472 -427
  5. package/dist/bkui-vue.umd.js +1473 -425
  6. package/dist/style.css +315 -177
  7. package/lib/alert/index.js +1 -1
  8. package/lib/badge/index.js +1 -1
  9. package/lib/breadcrumb/breadcrumb.css +10 -1
  10. package/lib/breadcrumb/breadcrumb.d.ts +20 -0
  11. package/lib/breadcrumb/breadcrumb.less +13 -2
  12. package/lib/breadcrumb/breadcrumb.variable.css +10 -1
  13. package/lib/breadcrumb/index.d.ts +37 -1
  14. package/lib/breadcrumb/index.js +1 -1
  15. package/lib/button/index.js +1 -1
  16. package/lib/card/index.js +1 -1
  17. package/lib/checkbox/index.js +1 -1
  18. package/lib/components.d.ts +2 -0
  19. package/lib/date-picker/index.js +1 -1
  20. package/lib/directives/index.js +1 -1
  21. package/lib/form/index.js +1 -1
  22. package/lib/icon/angle-down-fill.d.ts +4 -0
  23. package/lib/icon/angle-up-fill.d.ts +4 -0
  24. package/lib/icon/arrows-left.d.ts +4 -0
  25. package/lib/icon/index.d.ts +7 -3
  26. package/lib/icon/index.js +1 -1
  27. package/lib/icon/spinner.d.ts +4 -0
  28. package/lib/input/index.d.ts +11 -3
  29. package/lib/input/index.js +2 -2
  30. package/lib/input/input.css +1 -0
  31. package/lib/input/input.d.ts +3 -1
  32. package/lib/input/input.less +4 -3
  33. package/lib/input/input.variable.css +1 -0
  34. package/lib/loading/index.js +1 -1
  35. package/lib/menu/index.js +1 -1
  36. package/lib/modal/index.js +1 -1
  37. package/lib/notify/index.js +1 -1
  38. package/lib/notify/notifyConstructor.d.ts +2 -2
  39. package/lib/popover/index.d.ts +103 -48
  40. package/lib/popover/index.js +1 -1
  41. package/lib/popover/popover.css +22 -13
  42. package/lib/popover/popover.d.ts +30 -23
  43. package/lib/popover/popover.less +55 -45
  44. package/lib/popover/popover.variable.css +22 -13
  45. package/lib/popover/props.d.ts +77 -0
  46. package/lib/process/index.js +1 -1
  47. package/lib/progress/index.d.ts +23 -1
  48. package/lib/progress/index.js +1 -1
  49. package/lib/progress/progress.css +0 -3
  50. package/lib/progress/progress.d.ts +17 -1
  51. package/lib/progress/progress.less +0 -4
  52. package/lib/progress/progress.variable.css +0 -3
  53. package/lib/radio/index.js +1 -1
  54. package/lib/select/common.d.ts +10 -1
  55. package/lib/select/index.d.ts +131 -188
  56. package/lib/select/index.js +2 -2
  57. package/lib/select/option.d.ts +1 -7
  58. package/lib/select/optionGroup.d.ts +22 -15
  59. package/lib/select/select.css +71 -14
  60. package/lib/select/select.d.ts +40 -55
  61. package/lib/select/select.less +73 -14
  62. package/lib/select/select.variable.css +71 -14
  63. package/lib/shared/bk-helper-core.d.ts +6 -0
  64. package/lib/shared/bk-popover.d.ts +45 -4
  65. package/lib/shared/index.d.ts +10 -0
  66. package/lib/shared/index.js +1 -1
  67. package/lib/shared/utils.d.ts +6 -0
  68. package/lib/steps/index.js +1 -1
  69. package/lib/styles/index.d.ts +1 -0
  70. package/lib/styles/index.js +1 -1
  71. package/lib/switcher/index.js +1 -1
  72. package/lib/switcher/switcher.css +149 -135
  73. package/lib/switcher/switcher.less +210 -154
  74. package/lib/switcher/switcher.variable.css +149 -135
  75. package/lib/tab/index.js +1 -1
  76. package/lib/table/index.d.ts +76 -1
  77. package/lib/table/index.js +1 -1
  78. package/lib/table/props.d.ts +38 -0
  79. package/lib/table/render.d.ts +1 -1
  80. package/lib/table/table.css +6 -4
  81. package/lib/table/table.d.ts +34 -0
  82. package/lib/table/table.less +4 -4
  83. package/lib/table/table.variable.css +6 -4
  84. package/lib/table/utils.d.ts +7 -0
  85. package/lib/tree/index.d.ts +22 -8
  86. package/lib/tree/index.js +1 -1
  87. package/lib/tree/props.d.ts +52 -0
  88. package/lib/tree/tree.css +16 -7
  89. package/lib/tree/tree.d.ts +13 -7
  90. package/lib/tree/tree.less +24 -24
  91. package/lib/tree/tree.variable.css +16 -7
  92. package/lib/tree/util.d.ts +3 -44
  93. package/lib/virtual-render/index.d.ts +395 -0
  94. package/lib/virtual-render/index.js +1 -0
  95. package/lib/virtual-render/props.d.ts +147 -0
  96. package/lib/virtual-render/v-virtual-render.d.ts +7 -0
  97. package/lib/virtual-render/virtual-render.css +40 -0
  98. package/lib/virtual-render/virtual-render.d.ts +175 -0
  99. package/lib/virtual-render/virtual-render.less +51 -0
  100. package/lib/virtual-render/virtual-render.variable.css +40 -0
  101. package/package.json +8 -6
package/lib/switcher/switcher.css CHANGED
@@ -22,181 +22,181 @@
22
22
  .bk-switcher {
23
23
  position: relative;
24
24
  display: inline-block;
25
- /* 默认尺寸 */
26
- width: 36px;
27
25
  height: 20px;
26
+ /* 默认尺寸 */
27
+ min-width: 36px;
28
+ padding: 0;
29
+ margin: 0;
30
+ font-size: 14px;
28
31
  line-height: 20px;
29
32
  text-align: left;
30
33
  vertical-align: middle;
34
+ list-style: none;
35
+ cursor: pointer;
31
36
  background-color: #c4c6cc;
37
+ border: 1px solid transparent;
32
38
  border-radius: 50px;
39
+ border-radius: 100px;
40
+ box-sizing: border-box;
33
41
  transition: all 0.4s ease;
42
+ transition: all 0.36s;
43
+ user-select: none;
34
44
  /* 显示文本时固定尺寸 */
35
45
  }
36
- .bk-switcher:focus {
37
- box-shadow: 0px 0px 6px #c4c6cc;
38
- }
39
46
  .bk-switcher:after {
40
47
  position: absolute;
41
- top: 2px;
42
- left: 2px;
43
- display: block;
44
- width: 24px;
45
- height: 24px;
48
+ top: 1px;
49
+ left: 1px;
50
+ width: 16px;
51
+ height: 16px;
46
52
  cursor: pointer;
47
53
  background: #fff;
48
- border-radius: 100px;
49
- content: '';
50
- box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
54
+ background-color: #fff;
55
+ border-radius: 18px;
56
+ content: ' ';
51
57
  transition: all 0.3s ease;
52
58
  }
53
- .bk-switcher:not(.show-label):after {
54
- width: 16px;
55
- height: 16px;
56
- }
57
- .bk-switcher:not(.show-label).is-checked:after {
58
- margin-left: -18px;
59
- }
60
- .bk-switcher.is-loading {
61
- cursor: defalt;
59
+ .bk-switcher .switcher-text {
60
+ display: block;
61
+ margin-right: 6px;
62
+ margin-left: 28px;
63
+ font-size: 12px;
64
+ font-weight: 400;
65
+ color: #fff;
66
+ text-align: center;
67
+ transition: all 0.3s ease;
62
68
  }
63
- .bk-switcher.is-loading input[type=checkbox] {
64
- cursor: default;
69
+ .bk-switcher .animating-node {
70
+ position: absolute;
71
+ top: 0;
72
+ right: 0;
73
+ bottom: 0;
74
+ left: 0;
75
+ display: block;
76
+ pointer-events: none;
77
+ border-radius: inherit;
78
+ content: '';
79
+ opacity: 0.2;
80
+ box-shadow: 0 0 0 0 #1890ff;
81
+ animation: fadeEffect 2s cubic-bezier(0.08, 0.82, 0.17, 1), waveEffect 0.4s cubic-bezier(0.08, 0.82, 0.17, 1);
82
+ animation-fill-mode: forwards;
65
83
  }
66
84
  .bk-switcher .bk-switcher-loading {
67
85
  position: absolute;
68
- top: 50%;
86
+ top: 1px;
69
87
  left: 1px;
70
- z-index: 10;
71
- display: flex;
72
- width: 18px;
73
- height: 18px;
74
- transform: translateY(-50%);
88
+ z-index: 1;
89
+ width: 16px;
90
+ height: 16px;
91
+ font-size: 12px;
92
+ color: #c4c6cc;
93
+ cursor: pointer;
94
+ background: transparent;
95
+ border-radius: 16px;
96
+ content: ' ';
97
+ transition: all 0.36s cubic-bezier(0.78, 0.14, 0.15, 0.86);
75
98
  }
76
99
  .bk-switcher .bk-switcher-loading svg {
77
- color: #3a84ff;
78
- }
79
- .bk-switcher .switcher-label {
80
- display: none;
81
- width: 30px;
82
- height: 28px;
83
- margin: 0 0 0 26px;
84
- font-size: 12px;
85
- font-weight: normal;
86
- color: #fff;
87
- text-align: center;
88
- vertical-align: top;
89
- transition: all ease 0.3s;
100
+ position: absolute;
101
+ top: 0;
102
+ right: 0;
103
+ bottom: 0;
104
+ left: 0;
105
+ margin: auto;
106
+ animation: loading 1s linear infinite;
90
107
  }
91
- .bk-switcher .switcher-label .on-text {
92
- display: none;
108
+ .bk-switcher.is-loading {
109
+ cursor: defalt;
93
110
  }
94
- .bk-switcher .switcher-label .off-text {
95
- display: inline-block;
111
+ .bk-switcher.is-loading input[type=checkbox] {
112
+ cursor: default;
96
113
  }
97
114
  .bk-switcher.show-label {
98
- width: 60px;
99
115
  height: 28px;
116
+ min-width: 60px;
100
117
  line-height: 28px;
101
118
  }
102
- .bk-switcher.show-label .switcher-label {
103
- display: inline-block;
119
+ .bk-switcher.show-label::after {
120
+ width: 24px;
121
+ height: 24px;
104
122
  }
105
123
  .bk-switcher.show-label .bk-switcher-loading {
106
- width: 26px;
107
- height: 26px;
108
- align-items: center;
109
- justify-content: center;
124
+ width: 24px;
125
+ height: 24px;
126
+ font-size: 20px;
110
127
  }
111
- .bk-switcher.show-label .bk-switcher-loading svg {
112
- font-size: 24px;
128
+ .bk-switcher.show-label.is-checked .bk-switcher-loading {
129
+ left: 100%;
130
+ margin-left: -25px;
113
131
  }
114
132
  .bk-switcher.is-disabled {
115
- cursor: default;
116
- /* background-color: #eee !important; */
133
+ cursor: not-allowed;
117
134
  opacity: 0.3;
118
135
  }
119
- .bk-switcher.is-disabled input[type=checkbox] {
136
+ .bk-switcher.is-disabled .bk-switcher-loading {
137
+ cursor: not-allowed;
138
+ }
139
+ .bk-switcher.is-disabled::after {
120
140
  cursor: not-allowed;
121
141
  }
122
142
  .bk-switcher.is-checked {
123
143
  background: #2dcb56;
124
144
  }
125
- .bk-switcher.is-checked:focus {
126
- box-shadow: 0px 0px 6px #2dcb56;
145
+ .bk-switcher.is-checked .bk-switcher-loading svg {
146
+ color: #2dcb56;
127
147
  }
128
- .bk-switcher.is-checked.primary {
148
+ .bk-switcher.is-checked:not(.bk-switcher-outline).bk-switcher.is-checked.primary {
129
149
  background: #3a84ff;
130
150
  }
131
- .bk-switcher.is-checked.primary:focus {
132
- box-shadow: 0px 0px 6px #3a84ff;
151
+ .bk-switcher.is-checked:not(.bk-switcher-outline).bk-switcher.is-checked.primary .bk-switcher-loading svg {
152
+ color: #3a84ff;
133
153
  }
134
154
  .bk-switcher.is-checked:after {
135
- top: 2px;
136
155
  left: 100%;
137
- margin-left: -26px;
156
+ margin-left: -1px;
157
+ transform: translateX(-100%);
138
158
  }
139
- .bk-switcher.is-checked .switcher-label {
140
- margin-left: 4px;
159
+ .bk-switcher.is-checked .switcher-text {
160
+ margin-right: 28px;
161
+ margin-left: 6px;
141
162
  }
142
- .bk-switcher.is-checked .switcher-label .on-text {
143
- display: inline-block;
144
- }
145
- .bk-switcher.is-checked .switcher-label .off-text {
146
- display: none;
147
- }
148
- .bk-switcher.is-checked .bk-switcher-loading {
149
- right: 1px;
150
- left: auto;
163
+ .bk-switcher:not(.show-label).is-checked .bk-switcher-loading {
164
+ left: 100%;
165
+ margin-left: -17px;
151
166
  }
152
167
  .bk-switcher.bk-switcher-outline {
153
168
  background: #fff;
154
169
  border: 1px solid #c4c6cc;
155
170
  }
156
171
  .bk-switcher.bk-switcher-outline:after {
157
- width: 22px;
158
- height: 22px;
172
+ width: 24px;
173
+ height: 24px;
159
174
  background-color: #c4c6cc;
160
175
  box-shadow: none;
161
176
  }
162
- .bk-switcher.bk-switcher-outline .switcher-label {
163
- height: 26px;
164
- margin-left: 24px;
177
+ .bk-switcher.bk-switcher-outline .switcher-text {
165
178
  color: #c4c6cc;
166
179
  }
167
- .bk-switcher.bk-switcher-outline .bk-switcher-loading {
168
- width: 22px;
169
- height: 22px;
170
- align-items: center;
171
- justify-content: center;
172
- }
173
180
  .bk-switcher.bk-switcher-outline.is-checked {
174
181
  border: 1px solid #2dcb56;
175
182
  }
176
183
  .bk-switcher.bk-switcher-outline.is-checked:after {
177
- margin-left: -24px;
178
184
  background-color: #2dcb56;
179
185
  }
180
- .bk-switcher.bk-switcher-outline.is-checked .switcher-label {
181
- margin-left: 4px;
186
+ .bk-switcher.bk-switcher-outline.is-checked .switcher-text {
182
187
  color: #2dcb56;
183
188
  }
184
- .bk-switcher.bk-switcher-outline.is-disabled {
185
- background-color: #fff;
186
- border-color: #eee;
187
- }
188
- .bk-switcher.bk-switcher-outline.is-disabled .switcher-label {
189
- color: #eee;
189
+ .bk-switcher.bk-switcher-outline .bk-switcher-loading svg {
190
+ color: #fff;
190
191
  }
191
- .bk-switcher.bk-switcher-outline.is-disabled:after {
192
- background-color: #eee;
192
+ .bk-switcher.bk-switcher-outline.bk-switcher.primary.is-checked {
193
+ border: 1px solid #3a84ff;
193
194
  }
194
- .bk-switcher.bk-switcher-outline.bk-switcher-large:after {
195
- width: 18px;
196
- height: 18px;
195
+ .bk-switcher.bk-switcher-outline.bk-switcher.primary.is-checked:after {
196
+ background: #3a84ff;
197
197
  }
198
- .bk-switcher.bk-switcher-outline.bk-switcher-large.is-checked:after {
199
- margin-left: -20px;
198
+ .bk-switcher.bk-switcher-outline.bk-switcher.primary.is-checked .switcher-text {
199
+ color: #3a84ff;
200
200
  }
201
201
  .bk-switcher.bk-switcher-square {
202
202
  border-radius: 2px;
@@ -204,55 +204,69 @@
204
204
  .bk-switcher.bk-switcher-square:after {
205
205
  border-radius: 2px;
206
206
  }
207
- .bk-switcher.bk-switcher-square .switcher-label {
208
- width: 35px;
209
- }
210
207
  .bk-switcher.bk-switcher-large {
211
- width: 42px;
212
208
  height: 24px;
209
+ min-width: 42px;
213
210
  line-height: 22px;
214
- border-radius: 12px;
215
211
  }
216
212
  .bk-switcher.bk-switcher-large:after {
217
213
  width: 20px;
218
214
  height: 20px;
219
215
  }
220
- .bk-switcher.bk-switcher-large.is-checked:after {
221
- top: 2px;
222
- left: 100%;
223
- margin-left: -22px;
224
- }
225
216
  .bk-switcher.bk-switcher-large .bk-switcher-loading {
226
- width: 22px;
227
- height: 22px;
217
+ width: 20px;
218
+ height: 20px;
219
+ font-size: 16px;
220
+ }
221
+ .bk-switcher.bk-switcher-large.is-checked .bk-switcher-loading {
222
+ margin-left: -21px;
228
223
  }
229
224
  .bk-switcher.bk-switcher-small {
230
- width: 26px;
231
225
  height: 16px;
226
+ min-width: 26px;
232
227
  line-height: 22px;
233
228
  }
234
229
  .bk-switcher.bk-switcher-small:after {
235
230
  width: 12px;
236
231
  height: 12px;
237
232
  }
238
- .bk-switcher.bk-switcher-small.is-checked:after {
239
- top: 2px;
240
- left: 100%;
241
- margin-left: -14px;
242
- }
243
233
  .bk-switcher.bk-switcher-small .bk-switcher-loading {
244
- width: 14px;
245
- height: 14px;
234
+ width: 12px;
235
+ height: 12px;
236
+ font-weight: 700;
237
+ transform: scale(0.66667);
246
238
  }
247
- .bk-switcher input[type=checkbox],
248
- .bk-switcher input[type=radio] {
249
- position: absolute;
250
- top: 0;
251
- left: 0;
252
- z-index: 1;
253
- width: 100%;
254
- height: 100%;
255
- margin: 0;
256
- cursor: pointer;
257
- opacity: 0;
239
+ .bk-switcher.bk-switcher-small.is-checked .bk-switcher-loading {
240
+ margin-left: -13px;
241
+ }
242
+ :not(.show-label).bk-switcher-nomal.bk-switcher-outline::after {
243
+ width: 16px;
244
+ height: 16px;
245
+ }
246
+ :not(.show-label).bk-switcher-outline.is-checked.bk-switcher-small::after {
247
+ width: 12px;
248
+ height: 12px;
249
+ }
250
+ :not(.show-label).bk-switcher-outline.is-checked.bk-switcher-large::after {
251
+ width: 20px;
252
+ height: 20px;
253
+ }
254
+ :not(.show-label).bk-switcher-outline.is-checked::after {
255
+ width: 16px;
256
+ height: 16px;
257
+ }
258
+ @keyframes fadeEffect {
259
+ 100% {
260
+ opacity: 0;
261
+ }
262
+ }
263
+ @keyframes waveEffect {
264
+ 100% {
265
+ box-shadow: 0 0 0 #1890ff;
266
+ }
267
+ }
268
+ @keyframes loading {
269
+ 100% {
270
+ transform: rotate(1turn);
271
+ }
258
272
  }