bkui-vue 0.0.1-beta.20 → 0.0.1-beta.21

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 (46) hide show
  1. package/README.md +7 -3
  2. package/README_EN.md +7 -3
  3. package/dist/bkui-vue.cjs.js +230 -208
  4. package/dist/bkui-vue.esm.js +230 -208
  5. package/dist/bkui-vue.umd.js +230 -208
  6. package/dist/style.css +127 -85
  7. package/lib/button/button.css +9 -0
  8. package/lib/button/button.d.ts +25 -1
  9. package/lib/button/button.less +18 -10
  10. package/lib/button/button.variable.css +9 -0
  11. package/lib/button/index.d.ts +42 -4
  12. package/lib/button/index.js +1 -1
  13. package/lib/code-diff/code-diff.css +114 -0
  14. package/lib/code-diff/code-diff.d.ts +71 -0
  15. package/lib/code-diff/code-diff.less +144 -0
  16. package/lib/code-diff/code-diff.variable.css +207 -0
  17. package/lib/code-diff/index.d.ts +6 -0
  18. package/lib/date-picker/date-picker.d.ts +20 -130
  19. package/lib/date-picker/index.js +1 -1
  20. package/lib/date-picker/interface.d.ts +1 -1
  21. package/lib/date-picker/props.d.ts +111 -0
  22. package/lib/directives/clickoutside.d.ts +3 -23
  23. package/lib/directives/index.js +2 -2
  24. package/lib/input/index.d.ts +58 -4
  25. package/lib/input/index.js +2 -2
  26. package/lib/input/input.css +19 -2
  27. package/lib/input/input.d.ts +31 -1
  28. package/lib/input/input.less +25 -3
  29. package/lib/input/input.variable.css +19 -2
  30. package/lib/loading/index.d.ts +31 -9
  31. package/lib/loading/index.js +1 -1
  32. package/lib/loading/loading.css +98 -71
  33. package/lib/loading/loading.d.ts +23 -8
  34. package/lib/loading/loading.less +62 -49
  35. package/lib/loading/loading.variable.css +98 -71
  36. package/lib/shared/index.js +1 -1
  37. package/lib/shared/vue-types.d.ts +4 -0
  38. package/lib/tree/index.d.ts +17 -24
  39. package/lib/tree/index.js +1 -1
  40. package/lib/tree/props.d.ts +9 -8
  41. package/lib/tree/tree.css +1 -12
  42. package/lib/tree/tree.d.ts +8 -11
  43. package/lib/tree/tree.less +10 -24
  44. package/lib/tree/tree.variable.css +1 -12
  45. package/lib/tree/util.d.ts +9 -1
  46. package/package.json +1 -1
package/lib/loading/loading.less CHANGED
@@ -8,6 +8,12 @@
8
8
  @ovalGap: 20px;
9
9
  @titleMarginTop: 8px;
10
10
 
11
+ @miniDotSize: 3px;
12
+ @miniDotGap: 3px;
13
+ @miniOvalWidth: 2px;
14
+ @miniOvalHeight: 3px;
15
+ @miniOvalGap: 8px;
16
+
11
17
  @smallDotSize: 6px;
12
18
  @smallDotGap: 6px;
13
19
  @smallOvalWidth: 4px;
@@ -29,15 +35,15 @@
29
35
  .loading-theme(@theme) {
30
36
  .oval,
31
37
  .dot,
32
- .dot1,
33
- .dot2,
34
- .dot3,
35
- .dot4 {
38
+ .dot-1,
39
+ .dot-2,
40
+ .dot-3,
41
+ .dot-4 {
36
42
  background-color: @theme;
37
43
  }
38
44
  }
39
45
 
40
- @sizeSelectors: small, large;
46
+ @sizeSelectors: mini, small, large;
41
47
  @selectors: @danger-color, @warning-color, @success-color, @primary-color;
42
48
  @themeSelectors: {
43
49
  success: @success-color;
@@ -48,24 +54,52 @@
48
54
  default: @light-gray;
49
55
  };
50
56
 
51
- .bk-loading-wrapper {
57
+ .@{bk-prefix}-loading-wrapper {
52
58
  position: static;
53
59
  display: inline-block;
54
60
  font-size: 0;
61
+ vertical-align: middle;
55
62
 
56
- &.bk-nested-loading {
63
+ &.@{bk-prefix}-nested-loading {
57
64
  position: relative;
58
65
 
59
- .bk-loading-indicator {
66
+ .@{bk-prefix}-loading-indicator {
60
67
  position: absolute;
61
68
  top: 50%;
62
69
  left: 50%;
63
70
  z-index: 4;
71
+ text-align: center;
64
72
  transform: translate(-50%, -50%);
65
73
  }
66
74
  }
67
75
 
68
- .bk-loading-mask {
76
+ .dot {
77
+ display: inline-block;
78
+ width: @dotSize;
79
+ height: @dotSize;
80
+ margin-right: @dotGap;
81
+ border-radius: 50%;
82
+ transform: scale(.6);
83
+ animation-duration: .8s;
84
+ animation-iteration-count: infinite;
85
+ animation-name: loading-scale-animate;
86
+ animation-direction: normal;
87
+ }
88
+
89
+ .oval {
90
+ position: absolute;
91
+ width: @ovalWidth;
92
+ height: @ovalHeight;
93
+ background-color: @default-color;
94
+ border-radius: @ovalHeight;
95
+ animation-duration: 1.2s;
96
+ animation-iteration-count: infinite;
97
+ animation-name: fade;
98
+ transform-origin: center @ovalGap;
99
+ animation-direction: normal;
100
+ }
101
+
102
+ .@{bk-prefix}-loading-mask {
69
103
  opacity: .5;
70
104
 
71
105
  &::after {
@@ -82,16 +116,20 @@
82
116
  }
83
117
  }
84
118
 
85
- .bk-loading-indicator {
86
- font-size: @font-size-medium;
87
-
119
+ .@{bk-prefix}-loading-indicator {
120
+ text-align: center;
121
+ each(@themeSelectors, {
122
+ &.@{bk-prefix}-loading-@{key} {
123
+ .loading-theme(@value);
124
+ }
125
+ })
88
126
 
89
- each(@selectors, {
127
+ each(@selectors, {
90
128
  .dot-@{index} {
91
129
  background-color: @value;
92
130
  animation-delay: .1s + (@index - 1) * .15;
93
131
  & when (@index = 4) {
94
- margin-right: 0;
132
+ margin-right: 0px;
95
133
  }
96
134
  }
97
135
  });
@@ -102,15 +140,12 @@
102
140
  }
103
141
  });
104
142
 
105
- each(@themeSelectors, {
106
- &.bk-loading-@{key} {
107
- .loading-theme(@value);
108
- }
109
- })
110
143
 
111
144
  ;
112
145
 
113
- .bk-spin-indicator {
146
+ .@{bk-prefix}-spin-indicator {
147
+ display: inline-block;
148
+ width: 2 * @ovalGap;
114
149
  height: 2 * @ovalGap;
115
150
  }
116
151
 
@@ -121,9 +156,10 @@
121
156
  @sizedOvalHeight: '@{value}OvalHeight';
122
157
  @sizedOvalGap: '@{value}OvalGap';
123
158
 
124
- &.bk-loading-size-@{value} {
125
- .bk-spin-indicator {
159
+ &.@{bk-prefix}-loading-size-@{value} {
160
+ .@{bk-prefix}-spin-indicator {
126
161
  height: 2 * @@sizedOvalGap;
162
+ width: 2 * @@sizedOvalGap;
127
163
  }
128
164
  .dot {
129
165
  width: @@sizedDotSize;
@@ -139,13 +175,13 @@
139
175
  border-radius: @@sizedOvalHeight;
140
176
  transform-origin: center @@sizedOvalGap;
141
177
  }
142
- .bk-loading-title {
178
+ .@{bk-prefix}-loading-title {
143
179
  font-size: if(@value = small, @font-size-base, @font-size-medium);
144
180
  }
145
181
  }
146
182
  })
147
183
 
148
- .bk-loading-title {
184
+ .@{bk-prefix}-loading-title {
149
185
  margin-top: @titleMarginTop;
150
186
  font-size: @font-size-medium;
151
187
  line-height: normal;
@@ -153,29 +189,6 @@
153
189
  text-align: center;
154
190
  }
155
191
 
156
- .dot {
157
- display: inline-block;
158
- width: @dotSize;
159
- height: @dotSize;
160
- margin-right: @dotGap;
161
- border-radius: 50%;
162
- transform: scale(.6);
163
- animation-duration: .8s;
164
- animation-iteration-count: infinite;
165
- animation-name: loading-scale-animate;
166
- animation-direction: normal;
167
- }
168
-
169
- .oval {
170
- position: absolute;
171
- width: @ovalWidth;
172
- height: @ovalHeight;
173
- background-color: @default-color;
174
- border-radius: @ovalHeight;
175
- animation-duration: 1.2s;
176
- animation-iteration-count: infinite;
177
- animation-name: fade;
178
- transform-origin: center @ovalGap;
179
- animation-direction: normal;
180
- }}
192
+
193
+ }
181
194
  }
package/lib/loading/loading.variable.css CHANGED
@@ -116,6 +116,7 @@
116
116
  position: static;
117
117
  display: inline-block;
118
118
  font-size: 0;
119
+ vertical-align: middle;
119
120
  }
120
121
  .bk-loading-wrapper.bk-nested-loading {
121
122
  position: relative;
@@ -125,8 +126,33 @@
125
126
  top: 50%;
126
127
  left: 50%;
127
128
  z-index: 4;
129
+ text-align: center;
128
130
  transform: translate(-50%, -50%);
129
131
  }
132
+ .bk-loading-wrapper .dot {
133
+ display: inline-block;
134
+ width: 14px;
135
+ height: 14px;
136
+ margin-right: 10px;
137
+ border-radius: 50%;
138
+ transform: scale(0.6);
139
+ animation-duration: 0.8s;
140
+ animation-iteration-count: infinite;
141
+ animation-name: loading-scale-animate;
142
+ animation-direction: normal;
143
+ }
144
+ .bk-loading-wrapper .oval {
145
+ position: absolute;
146
+ width: 6px;
147
+ height: 8px;
148
+ background-color: var(--default-color);
149
+ border-radius: 8px;
150
+ animation-duration: 1.2s;
151
+ animation-iteration-count: infinite;
152
+ animation-name: fade;
153
+ transform-origin: center 20px;
154
+ animation-direction: normal;
155
+ }
130
156
  .bk-loading-wrapper .bk-loading-mask {
131
157
  opacity: 0.5;
132
158
  }
@@ -143,7 +169,55 @@
143
169
  content: '';
144
170
  }
145
171
  .bk-loading-wrapper .bk-loading-indicator {
146
- font-size: var(--font-size-medium);
172
+ text-align: center;
173
+ }
174
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-success .oval,
175
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot,
176
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot-1,
177
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot-2,
178
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot-3,
179
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot-4 {
180
+ background-color: var(--success-color);
181
+ }
182
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .oval,
183
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot,
184
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot-1,
185
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot-2,
186
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot-3,
187
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot-4 {
188
+ background-color: var(--danger-color);
189
+ }
190
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .oval,
191
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot,
192
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot-1,
193
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot-2,
194
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot-3,
195
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot-4 {
196
+ background-color: var(--warning-color);
197
+ }
198
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .oval,
199
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot,
200
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot-1,
201
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot-2,
202
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot-3,
203
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot-4 {
204
+ background-color: var(--primary-color);
205
+ }
206
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-white .oval,
207
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot,
208
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot-1,
209
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot-2,
210
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot-3,
211
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot-4 {
212
+ background-color: var(--white-color);
213
+ }
214
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-default .oval,
215
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot,
216
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot-1,
217
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot-2,
218
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot-3,
219
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot-4 {
220
+ background-color: var(--light-gray);
147
221
  }
148
222
  .bk-loading-wrapper .bk-loading-indicator .dot-1 {
149
223
  background-color: var(--danger-color);
@@ -160,7 +234,7 @@
160
234
  .bk-loading-wrapper .bk-loading-indicator .dot-4 {
161
235
  background-color: var(--primary-color);
162
236
  animation-delay: 0.55s;
163
- margin-right: 0;
237
+ margin-right: 0px;
164
238
  }
165
239
  .bk-loading-wrapper .bk-loading-indicator .oval-1 {
166
240
  transform: rotate(-135deg);
@@ -194,59 +268,35 @@
194
268
  transform: rotate(180deg);
195
269
  animation-delay: 1.65s;
196
270
  }
197
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-success .oval,
198
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot,
199
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot1,
200
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot2,
201
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot3,
202
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot4 {
203
- background-color: var(--success-color);
271
+ .bk-loading-wrapper .bk-loading-indicator .bk-spin-indicator {
272
+ display: inline-block;
273
+ width: 40px;
274
+ height: 40px;
204
275
  }
205
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .oval,
206
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot,
207
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot1,
208
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot2,
209
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot3,
210
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot4 {
211
- background-color: var(--danger-color);
276
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-mini .bk-spin-indicator {
277
+ height: 16px;
278
+ width: 16px;
212
279
  }
213
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .oval,
214
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot,
215
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot1,
216
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot2,
217
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot3,
218
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot4 {
219
- background-color: var(--warning-color);
280
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-mini .dot {
281
+ width: 3px;
282
+ height: 3px;
283
+ margin-right: 3px;
220
284
  }
221
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .oval,
222
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot,
223
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot1,
224
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot2,
225
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot3,
226
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot4 {
227
- background-color: var(--primary-color);
228
- }
229
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-white .oval,
230
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot,
231
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot1,
232
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot2,
233
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot3,
234
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot4 {
235
- background-color: var(--white-color);
285
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-mini .dot.dot-4 {
286
+ margin-right: 0;
236
287
  }
237
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-default .oval,
238
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot,
239
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot1,
240
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot2,
241
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot3,
242
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot4 {
243
- background-color: var(--light-gray);
288
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-mini .oval {
289
+ width: 2px;
290
+ height: 3px;
291
+ border-radius: 3px;
292
+ transform-origin: center 8px;
244
293
  }
245
- .bk-loading-wrapper .bk-loading-indicator .bk-spin-indicator {
246
- height: 40px;
294
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-mini .bk-loading-title {
295
+ font-size: var(--font-size-medium);
247
296
  }
248
297
  .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-small .bk-spin-indicator {
249
298
  height: 22px;
299
+ width: 22px;
250
300
  }
251
301
  .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-small .dot {
252
302
  width: 6px;
@@ -267,6 +317,7 @@
267
317
  }
268
318
  .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-large .bk-spin-indicator {
269
319
  height: 52px;
320
+ width: 52px;
270
321
  }
271
322
  .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-large .dot {
272
323
  width: 20px;
@@ -292,27 +343,3 @@
292
343
  color: var(--default-color);
293
344
  text-align: center;
294
345
  }
295
- .bk-loading-wrapper .bk-loading-indicator .dot {
296
- display: inline-block;
297
- width: 14px;
298
- height: 14px;
299
- margin-right: 10px;
300
- border-radius: 50%;
301
- transform: scale(0.6);
302
- animation-duration: 0.8s;
303
- animation-iteration-count: infinite;
304
- animation-name: loading-scale-animate;
305
- animation-direction: normal;
306
- }
307
- .bk-loading-wrapper .bk-loading-indicator .oval {
308
- position: absolute;
309
- width: 6px;
310
- height: 8px;
311
- background-color: var(--default-color);
312
- border-radius: 8px;
313
- animation-duration: 1.2s;
314
- animation-iteration-count: infinite;
315
- animation-name: fade;
316
- transform-origin: center 20px;
317
- animation-direction: normal;
318
- }