bkui-vue 0.0.1-beta.206 → 0.0.1-beta.207

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 (78) hide show
  1. package/dist/index.cjs.js +25 -25
  2. package/dist/index.esm.js +51 -37
  3. package/dist/index.umd.js +25 -25
  4. package/dist/style.css +1 -1
  5. package/dist/style.variable.css +1 -1
  6. package/lib/affix/affix.variable.css +6 -0
  7. package/lib/alert/alert.variable.css +6 -0
  8. package/lib/backtop/backtop.variable.css +6 -0
  9. package/lib/badge/badge.variable.css +6 -0
  10. package/lib/breadcrumb/breadcrumb.variable.css +6 -0
  11. package/lib/button/button.variable.css +6 -0
  12. package/lib/card/card.variable.css +6 -0
  13. package/lib/cascader/cascader.variable.css +6 -0
  14. package/lib/checkbox/checkbox.variable.css +6 -0
  15. package/lib/code-diff/code-diff.variable.css +6 -0
  16. package/lib/collapse/collapse.variable.css +6 -0
  17. package/lib/color-picker/color-picker.variable.css +6 -0
  18. package/lib/container/container.variable.css +6 -0
  19. package/lib/date-picker/date-picker.variable.css +6 -0
  20. package/lib/directives/index.js +1 -1
  21. package/lib/divider/divider.variable.css +6 -0
  22. package/lib/dropdown/dropdown.variable.css +6 -0
  23. package/lib/exception/exception.variable.css +6 -0
  24. package/lib/fixed-navbar/fixed-navbar.variable.css +6 -0
  25. package/lib/form/form.variable.css +6 -0
  26. package/lib/input/input.variable.css +6 -0
  27. package/lib/link/link.variable.css +6 -0
  28. package/lib/loading/loading.variable.css +6 -0
  29. package/lib/menu/menu.variable.css +6 -0
  30. package/lib/menu/submenu.variable.css +6 -0
  31. package/lib/message/message.variable.css +6 -0
  32. package/lib/navigation/navigation.variable.css +6 -0
  33. package/lib/notify/notify.variable.css +6 -0
  34. package/lib/pagination/pagination.variable.css +6 -0
  35. package/lib/popover/index.d.ts +7 -7
  36. package/lib/popover/popover.d.ts +2 -2
  37. package/lib/popover/popover.variable.css +6 -0
  38. package/lib/popover2/index.d.ts +7 -7
  39. package/lib/popover2/popover2.d.ts +2 -2
  40. package/lib/popover2/popover2.variable.css +6 -0
  41. package/lib/process/process.variable.css +6 -0
  42. package/lib/progress/progress.variable.css +6 -0
  43. package/lib/radio/radio.variable.css +6 -0
  44. package/lib/resize-layout/resize-layout.variable.css +6 -0
  45. package/lib/search-select/index.js +1 -1
  46. package/lib/search-select/search-select.css +196 -199
  47. package/lib/search-select/search-select.less +195 -47
  48. package/lib/search-select/search-select.variable.css +217 -214
  49. package/lib/search-select/utils.d.ts +2 -2
  50. package/lib/select/index.d.ts +4 -4
  51. package/lib/select/select.d.ts +1 -1
  52. package/lib/select/select.variable.css +6 -0
  53. package/lib/sideslider/sideslider.variable.css +6 -0
  54. package/lib/slider/slider.variable.css +6 -0
  55. package/lib/steps/steps.variable.css +6 -0
  56. package/lib/styles/mixins/scroll.variable.css +6 -0
  57. package/lib/styles/themes/themes.less +9 -0
  58. package/lib/switcher/switcher.variable.css +6 -0
  59. package/lib/tab/tab.variable.css +6 -0
  60. package/lib/table/plugins/head-filter.variable.css +6 -0
  61. package/lib/table/plugins/head-sort.variable.css +6 -0
  62. package/lib/table/plugins/settings.variable.css +6 -0
  63. package/lib/table/table.variable.css +6 -0
  64. package/lib/tag/tag.variable.css +6 -0
  65. package/lib/tag-input/tag-input.variable.css +6 -0
  66. package/lib/time-picker/time-picker.variable.css +6 -0
  67. package/lib/timeline/timeline.variable.css +6 -0
  68. package/lib/transfer/transfer.variable.css +6 -0
  69. package/lib/tree/tree.variable.css +6 -0
  70. package/lib/upload/upload.variable.css +6 -0
  71. package/lib/virtual-render/virtual-render.variable.css +6 -0
  72. package/package.json +1 -1
  73. package/lib/search-select/menu.css +0 -145
  74. package/lib/search-select/menu.less +0 -134
  75. package/lib/search-select/menu.variable.css +0 -145
  76. package/lib/search-select/selected.css +0 -21
  77. package/lib/search-select/selected.less +0 -24
  78. package/lib/search-select/selected.variable.css +0 -21
@@ -1,24 +1,44 @@
1
1
  /* stylelint-disable declaration-no-important */
2
2
  @import '../styles/themes/themes.less';
3
3
  @import '../styles/mixins/mixins.less';
4
- @import './menu.less';
5
- @import './selected.less';
6
4
 
7
- .search-select-wrap {
5
+
6
+ @search-select-name: ~'@{bk-prefix}-search-select';
7
+
8
+
9
+ .@{search-select-name} {
8
10
  position: relative;
9
11
  z-index: 9;
10
- height: 32px;
12
+ height: @component-size-base;
11
13
  overflow: inherit;
14
+
15
+ .focus {
16
+ color: @search-select-focus-color;
17
+ background: #fff !important;
18
+ border-color: @search-select-focus-border-color !important;
19
+ }
20
+
21
+ .div-input {
22
+ height: @component-size-base;
23
+ padding: 5px 0;
24
+ line-height: 20px;
25
+ word-break: break-all;
26
+ flex: 1 1 auto;
27
+
28
+ &:focus {
29
+ outline: none;
30
+ }
31
+ }
12
32
 
13
- .bk-search-select {
33
+ &-container {
14
34
  position: relative;
15
35
  display: flex;
16
- min-height: 30px;
36
+ min-height: @component-size-base;
17
37
  overflow: hidden;
18
38
  font-size: 12px;
19
- color: #63656e;
20
- border: 1px solid #c4c6cc;
21
- border-radius: 2px;
39
+ color: @search-select-font-color;
40
+ border: @border-width-base @border-style-base @border-style-color;
41
+ border-radius: @border-radius-base;
22
42
  outline: none;
23
43
  box-sizing: border-box;
24
44
  transition: border .2s linear;
@@ -29,9 +49,7 @@
29
49
 
30
50
  &.is-focus {
31
51
  overflow: auto;
32
- color: #3c96ff;
33
- background: #fff !important;
34
- border-color: #3c96ff !important;
52
+ .focus();
35
53
  }
36
54
 
37
55
  .search-prefix {
@@ -41,7 +59,7 @@
41
59
  height: 100%;
42
60
  }
43
61
 
44
- .search-input {
62
+ .search-container {
45
63
  position: relative;
46
64
  display: flex;
47
65
  min-height: 26px;
@@ -54,42 +72,42 @@
54
72
  flex-wrap: wrap;
55
73
  align-items: center;
56
74
 
57
- &-chip {
75
+ &-selected {
58
76
  position: relative;
59
77
  display: inline-block;
60
78
  max-width: 99%;
61
79
  padding-left: 8px;
62
80
  margin: 0 0 4px 6px;
63
81
  line-height: 22px;
64
- color: #63656e;
82
+ color: @search-select-font-color;
65
83
  background: #f0f1f5;
66
84
  border-radius: 2px;
67
85
  flex: 0 0 auto;
68
86
  align-self: center;
69
87
 
70
- &.hidden-chip {
88
+ &.hidden-selected {
71
89
  visibility: hidden
72
90
  }
73
91
 
74
- &.overflow-chip {
92
+ &.overflow-selected {
75
93
  padding-right: 8px;
76
94
  }
77
95
 
78
96
  &:hover {
79
97
  background: #dcdee5;
80
98
 
81
- .chip-clear {
82
- color: #63656e;
99
+ .selected-clear {
100
+ color: @search-select-font-color;
83
101
  }
84
102
  }
85
103
 
86
- .chip-name {
104
+ .selected-name {
87
105
  display: inline-block;
88
106
  margin-right: 20px;
89
107
  word-break: break-all;
90
108
  }
91
109
 
92
- .chip-clear {
110
+ .selected-clear {
93
111
  position: absolute;
94
112
  top: 4px;
95
113
  right: 3px;
@@ -114,27 +132,14 @@
114
132
  min-width: 40px;
115
133
  padding: 0 10px;
116
134
  margin-top: -4px;
117
- color: #63656e;
135
+ color: @search-select-font-color;
118
136
  border: none;
119
137
  flex: 1 1 auto;
120
138
  align-items: center;
121
139
 
122
- .div-input {
123
- height: 30px;
124
- padding: 5px 0;
125
- line-height: 20px;
126
- word-break: break-all;
127
- flex: 1 1 auto;
128
-
129
- &:focus {
130
- outline: none;
131
- }
132
- }
133
-
134
140
  .input-before {
135
141
  &:before {
136
- // padding-left: 2px;
137
- color: #c4c6cc;
142
+ color: @search-select-placeholder-color;
138
143
  content: attr(data-placeholder);
139
144
  }
140
145
  }
@@ -142,19 +147,30 @@
142
147
  .input-after {
143
148
  &:after {
144
149
  padding-left: 2px;
145
- color: #c4c6cc;
150
+ color: @search-select-placeholder-color;
146
151
  content: attr(data-tips);
147
152
  }
148
153
  }
149
154
  }
155
+
156
+ .selected-input {
157
+ position: relative;
158
+ display: flex;
159
+ height: 100%;
160
+ min-width: 40px;
161
+ padding: 0 10px;
162
+ margin-top: -4px;
163
+ color: @search-select-font-color;
164
+ border: none;
165
+ align-items: center;
166
+ }
150
167
  }
151
168
 
152
169
  .search-nextfix {
153
170
  display: flex;
154
- color: #c4c6cc;
171
+ color: @light-gray;
155
172
  align-items: center;
156
-
157
- // @extend .search-prefix;
173
+ .search-prefix();
158
174
 
159
175
  .search-clear {
160
176
  display: flex;
@@ -162,7 +178,7 @@
162
178
  height: 12px;
163
179
  margin-right: 6px;
164
180
  font-size: 12px;
165
- color: #c4c6cc;
181
+ color: @light-gray;
166
182
  align-items: center;
167
183
  justify-content: center;
168
184
 
@@ -181,9 +197,7 @@
181
197
  justify-content: center;
182
198
 
183
199
  &.is-focus {
184
- color: #3c96ff;
185
- background: #fff !important;
186
- border-color: #3c96ff !important;
200
+ .focus();
187
201
  }
188
202
  }
189
203
  }
@@ -200,12 +214,12 @@
200
214
  }
201
215
  }
202
216
 
203
- .bk-select-tips {
217
+ &-tips {
204
218
  display: flex;
205
219
  margin-top: 5px;
206
220
  font-size: 12px;
207
221
  line-height: 16px;
208
- color: #ea3636;
222
+ color: @search-select-message-color;
209
223
  align-items: center;
210
224
 
211
225
  .select-tips {
@@ -219,9 +233,143 @@
219
233
  justify-content: center;
220
234
  }
221
235
  }
236
+ }
237
+
238
+ .@{search-select-name}-menu {
239
+ display: flex;
240
+ min-width: 160px;
241
+ font-size: 12px;
242
+ color: @search-select-font-color;
243
+ flex-direction: column;
244
+
245
+ .menu-list-mixin {
246
+ display: flex;
247
+ flex-direction: column;
248
+ }
249
+
250
+ .menu-item-mixin {
251
+ display: flex;
252
+ align-items: center;
253
+ width: 100%;
254
+ height: 32px;
255
+ padding: 0 12px;
256
+ flex: 0 0 32px;
257
+ outline: none;
258
+
259
+ &:hover {
260
+ cursor: pointer;
261
+ background-color: #f5f7fa;
262
+ }
263
+ }
264
+
265
+ .menu-disabled-mixin {
266
+ color: @light-gray;
267
+
268
+ &:hover {
269
+ cursor: not-allowed;
270
+ background-color: white;
271
+ }
272
+ }
222
273
 
274
+ .menu-header {
275
+ .menu-list-mixin();
276
+ border-bottom: @border-width-base @border-style-base @border-style-color;
277
+
278
+ &-item {
279
+ .menu-item-mixin();
280
+
281
+ &.is-disabled {
282
+ .menu-disabled-mixin()
283
+ }
284
+ }
285
+ }
286
+
287
+ .menu-content {
288
+ display: flex;
289
+ flex-direction: column;
290
+ flex: 1;
291
+ max-height: 240px;
292
+ overflow: auto;
293
+
294
+ .menu-item {
295
+ .menu-item-mixin();
296
+
297
+ .is-keyword {
298
+ display: inline-flex;
299
+ color: @primary-color;
300
+ }
301
+
302
+ .is-selected {
303
+ display: flex;
304
+ width: 14px;
305
+ height: 14px;
306
+ margin-left: auto;
307
+ overflow: hidden;
308
+ font-size: 18px;
309
+ font-weight: bold;
310
+ color: @primary-color;
311
+ align-items: center;
312
+ justify-content: center;
313
+ }
314
+
315
+ &.is-hover {
316
+ color: @primary-color;
317
+ background-color: #f5f7fa;
318
+
319
+ .menu-name {
320
+ color: @primary-color;
321
+ }
322
+ }
323
+
324
+ &.is-disabled {
325
+ .menu-disabled-mixin();
326
+
327
+ .menu-name {
328
+ color: @light-gray;;
329
+ }
330
+ }
331
+
332
+ .menu-name {
333
+ display: flex;
334
+ max-width: 100px;
335
+ margin-right: 5px;
336
+ font-weight: bold;
337
+ color: @search-select-font-color;
338
+ align-items: center;
339
+ }
340
+ }
341
+ }
342
+
343
+ .menu-footer {
344
+ display: flex;
345
+ width: 100%;
346
+ height: 32px;
347
+ border-top: @border-width-base @border-style-base @border-style-color;
348
+ align-items: center;
349
+
350
+ &-btn {
351
+ flex: 1;
352
+ display: flex;
353
+ align-items: center;
354
+ justify-content: center;
355
+ height: 100%;
356
+
357
+ &:first-child {
358
+ border-right: @border-width-base @border-style-base @border-style-color;
359
+ }
360
+
361
+ &:hover {
362
+ color: @primary-color;
363
+ cursor: pointer;
364
+ }
365
+
366
+ &.is-disabled {
367
+ .menu-disabled-mixin()
368
+ }
369
+ }
370
+ }
223
371
  }
224
372
 
225
- .popover-content {
373
+ .@{search-select-name}-popover {
226
374
  margin: -7px -14px;
227
375
  }