bkui-vue 0.0.1-beta.80 → 0.0.1-beta.83

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 (43) hide show
  1. package/dist/index.cjs.js +28 -28
  2. package/dist/index.esm.js +473 -213
  3. package/dist/index.umd.js +27 -27
  4. package/dist/style.css +1 -1
  5. package/lib/button/button.css +16 -11
  6. package/lib/button/button.d.ts +0 -10
  7. package/lib/button/button.less +28 -13
  8. package/lib/button/button.variable.css +16 -11
  9. package/lib/button/index.d.ts +1 -16
  10. package/lib/button/index.js +1 -1
  11. package/lib/cascader/cascader.d.ts +1 -1
  12. package/lib/cascader/index.d.ts +4 -4
  13. package/lib/date-picker/index.js +1 -1
  14. package/lib/input/input.css +4 -1
  15. package/lib/input/input.less +4 -1
  16. package/lib/input/input.variable.css +4 -1
  17. package/lib/loading/loading.css +4 -3
  18. package/lib/loading/loading.less +4 -3
  19. package/lib/loading/loading.variable.css +4 -3
  20. package/lib/pagination/index.js +1 -1
  21. package/lib/select/common.d.ts +4 -4
  22. package/lib/select/index.d.ts +563 -212
  23. package/lib/select/index.js +1 -1
  24. package/lib/select/option.d.ts +11 -4
  25. package/lib/select/select.css +31 -59
  26. package/lib/select/select.d.ts +168 -62
  27. package/lib/select/select.less +43 -51
  28. package/lib/select/select.variable.css +31 -59
  29. package/lib/select/selectTagInput.d.ts +71 -0
  30. package/lib/select/type.d.ts +9 -5
  31. package/lib/shared/index.js +1 -1
  32. package/lib/tab/index.d.ts +7 -7
  33. package/lib/tab/tab.d.ts +2 -2
  34. package/lib/table/index.js +1 -1
  35. package/lib/table/props.d.ts +1 -0
  36. package/lib/tag-input/index.d.ts +4 -4
  37. package/lib/tag-input/index.js +1 -1
  38. package/lib/tag-input/tag-input.d.ts +1 -1
  39. package/lib/transfer/index.js +1 -1
  40. package/lib/transfer/transfer.css +41 -60
  41. package/lib/transfer/transfer.less +55 -82
  42. package/lib/transfer/transfer.variable.css +41 -60
  43. package/package.json +1 -1
@@ -19,56 +19,44 @@
19
19
  @iconNormalSize: 22px;
20
20
 
21
21
  .@{bk-prefix}-transfer {
22
- position: relative;
23
22
  display: flex;
24
- font-size: 14px;
25
- flex-direction: row;
26
23
  justify-content: center;
24
+ align-items: center;
25
+ font-size: 14px;
27
26
 
28
27
  .transfer {
29
- position: absolute;
30
- top: 50%;
31
- left: 50%;
32
28
  width: 30px;
33
29
  height: 30px;
30
+ margin: 0 2px;
34
31
  background: url('@bkui-vue/styles/images/transfer.png') no-repeat center center;
35
- transform: translate(-50%, -50%);
36
32
  }
37
33
 
38
34
  .source-list,
39
35
  .target-list {
36
+ flex: 1;
37
+ display: flex;
38
+ flex-direction: column;
40
39
  height: 400px;
41
40
  min-width: 200px;
42
41
  overflow: hidden;
43
42
  background-color: #fff;
44
43
  border: 1px solid @borderInlineColor;
45
44
  border-radius: 2px;
46
- flex: 1;
47
45
 
48
- .slot-header {
49
- position: relative;
46
+ .slot-header,
47
+ .header {
50
48
  height: 43px;
51
49
  padding: 0 20px;
52
- line-height: 43px;
53
50
  background-color: @newGreyColor3;
54
51
  border-bottom: 1px solid @borderInlineColor;
55
-
56
- .slot-content {
57
- position: relative;
58
- }
59
52
  }
60
53
 
61
54
  .header {
62
- position: relative;
63
- height: 43px;
64
- padding: 0 20px;
65
- line-height: 43px;
66
- background-color: @newGreyColor3;
67
- border-bottom: 1px solid @borderInlineColor;
55
+ display: flex;
56
+ align-items: center;
57
+ justify-content: space-between;
68
58
 
69
59
  span {
70
- position: absolute;
71
- right: 10px;
72
60
  font-size: 12px;
73
61
  color: @newMainColor;
74
62
  cursor: pointer;
@@ -79,58 +67,64 @@
79
67
  }
80
68
  }
81
69
  }
70
+
71
+ .transfer-search-input {
72
+ height: 36px;
73
+ border-bottom: 1px solid @newGreyColor2;
74
+ border-width: 0 0 1px 0;
75
+ border-radius: 0;
76
+ outline: none;
77
+
78
+ &.is-focused {
79
+ box-shadow: none;
80
+ }
81
+ }
82
82
 
83
83
  .empty {
84
- position: relative;
85
- top: 40%;
86
- width: 100%;
84
+ flex: 1;
85
+ display: flex;
86
+ align-items: center;
87
+ justify-content: center;
88
+ padding-bottom: 30px;
87
89
  color: @newGreyColor;
88
- text-align: center;
89
90
  cursor: default;
90
91
  }
91
92
 
92
93
  .content {
93
- position: relative;
94
- max-height: calc(100% - 50px);
95
- padding: 0;
94
+ flex: 1;
96
95
  margin: 6px 0;
97
96
  overflow-y: auto;
98
97
 
99
- &.is-search {
100
- max-height: calc(100% - 86px);
101
- }
98
+ li.custom-item,
99
+ li .item-content {
100
+ display: flex;
101
+ align-items: center;
102
+ height: 40px;
103
+ padding: 0 20px;
104
+ cursor: pointer;
102
105
 
103
- li {
104
- &.custom-item,
105
- .item-content {
106
- position: relative;
107
- display: flex;
108
- height: 40px;
109
- padding: 0 20px;
110
- line-height: 40px;
111
- list-style: none;
112
- cursor: pointer;
113
- align-items: center;
114
-
115
- &:hover {
116
- color: @newMainColor;
117
- background-color: #eef6fe;
118
- }
106
+ &:hover {
107
+ color: @newMainColor;
108
+ background-color: #eef6fe;
109
+ }
119
110
 
120
- .content-text {
121
- overflow: hidden;
122
- text-overflow: ellipsis;
123
- white-space: nowrap;
124
- flex: 1;
125
- }
111
+ .content-text {
112
+ flex: 1;
113
+ overflow: hidden;
114
+ text-overflow: ellipsis;
115
+ white-space: nowrap;
116
+ }
126
117
 
127
- .icon-wrapper {
128
- display: none;
129
- flex: 22px 0 0;
118
+ .icon-wrapper {
119
+ visibility: hidden;
130
120
 
131
- &.hover {
132
- display: inline-block;
133
- }
121
+ &.hover {
122
+ visibility: visible;
123
+ }
124
+
125
+ .bk-icon {
126
+ display: flex;
127
+ font-size: @iconNormalSize;
134
128
  }
135
129
  }
136
130
  }
@@ -145,27 +139,6 @@
145
139
  background-color: #e6e9ea;
146
140
  border-radius: 2px;
147
141
  }
148
-
149
- .bk-icon {
150
- font-size: @iconNormalSize;
151
- }
152
- }
153
- }
154
-
155
- .target-list {
156
- margin-left: 33px;
157
- }
158
-
159
- .transfer-search-input {
160
- height: 36px;
161
- line-height: 34px;
162
- border: none;
163
- border-bottom: 1px solid @newGreyColor2;
164
- outline: none;
165
-
166
- &.is-focused {
167
- border-color: @newGreyColor2;
168
- box-shadow: 0px 0px 3px 0px transparent;
169
142
  }
170
143
  }
171
144
  }
@@ -104,57 +104,46 @@
104
104
  /* 重点表示、强调、链接以及带有明确指示性 */
105
105
  /* 正常尺寸图标 */
106
106
  .bk-transfer {
107
- position: relative;
108
107
  display: flex;
109
- font-size: 14px;
110
- flex-direction: row;
111
108
  justify-content: center;
109
+ align-items: center;
110
+ font-size: 14px;
112
111
  }
113
112
  .bk-transfer .transfer {
114
- position: absolute;
115
- top: 50%;
116
- left: 50%;
117
113
  width: 30px;
118
114
  height: 30px;
115
+ margin: 0 2px;
119
116
  background: url('@bkui-vue/styles/images/transfer.png') no-repeat center center;
120
- transform: translate(-50%, -50%);
121
117
  }
122
118
  .bk-transfer .source-list,
123
119
  .bk-transfer .target-list {
120
+ flex: 1;
121
+ display: flex;
122
+ flex-direction: column;
124
123
  height: 400px;
125
124
  min-width: 200px;
126
125
  overflow: hidden;
127
126
  background-color: #fff;
128
127
  border: 1px solid #dde4eb;
129
128
  border-radius: 2px;
130
- flex: 1;
131
129
  }
132
130
  .bk-transfer .source-list .slot-header,
133
- .bk-transfer .target-list .slot-header {
134
- position: relative;
131
+ .bk-transfer .target-list .slot-header,
132
+ .bk-transfer .source-list .header,
133
+ .bk-transfer .target-list .header {
135
134
  height: 43px;
136
135
  padding: 0 20px;
137
- line-height: 43px;
138
136
  background-color: #fafbfd;
139
137
  border-bottom: 1px solid #dde4eb;
140
138
  }
141
- .bk-transfer .source-list .slot-header .slot-content,
142
- .bk-transfer .target-list .slot-header .slot-content {
143
- position: relative;
144
- }
145
139
  .bk-transfer .source-list .header,
146
140
  .bk-transfer .target-list .header {
147
- position: relative;
148
- height: 43px;
149
- padding: 0 20px;
150
- line-height: 43px;
151
- background-color: #fafbfd;
152
- border-bottom: 1px solid #dde4eb;
141
+ display: flex;
142
+ align-items: center;
143
+ justify-content: space-between;
153
144
  }
154
145
  .bk-transfer .source-list .header span,
155
146
  .bk-transfer .target-list .header span {
156
- position: absolute;
157
- right: 10px;
158
147
  font-size: 12px;
159
148
  color: #3a84ff;
160
149
  cursor: pointer;
@@ -164,39 +153,43 @@
164
153
  color: #c4c6cc;
165
154
  cursor: not-allowed;
166
155
  }
156
+ .bk-transfer .source-list .transfer-search-input,
157
+ .bk-transfer .target-list .transfer-search-input {
158
+ height: 36px;
159
+ border-bottom: 1px solid #f0f1f5;
160
+ border-width: 0 0 1px 0;
161
+ border-radius: 0;
162
+ outline: none;
163
+ }
164
+ .bk-transfer .source-list .transfer-search-input.is-focused,
165
+ .bk-transfer .target-list .transfer-search-input.is-focused {
166
+ box-shadow: none;
167
+ }
167
168
  .bk-transfer .source-list .empty,
168
169
  .bk-transfer .target-list .empty {
169
- position: relative;
170
- top: 40%;
171
- width: 100%;
170
+ flex: 1;
171
+ display: flex;
172
+ align-items: center;
173
+ justify-content: center;
174
+ padding-bottom: 30px;
172
175
  color: #c4c6cc;
173
- text-align: center;
174
176
  cursor: default;
175
177
  }
176
178
  .bk-transfer .source-list .content,
177
179
  .bk-transfer .target-list .content {
178
- position: relative;
179
- max-height: calc(100% - 50px);
180
- padding: 0;
180
+ flex: 1;
181
181
  margin: 6px 0;
182
182
  overflow-y: auto;
183
183
  }
184
- .bk-transfer .source-list .content.is-search,
185
- .bk-transfer .target-list .content.is-search {
186
- max-height: calc(100% - 86px);
187
- }
188
184
  .bk-transfer .source-list .content li.custom-item,
189
185
  .bk-transfer .target-list .content li.custom-item,
190
186
  .bk-transfer .source-list .content li .item-content,
191
187
  .bk-transfer .target-list .content li .item-content {
192
- position: relative;
193
188
  display: flex;
189
+ align-items: center;
194
190
  height: 40px;
195
191
  padding: 0 20px;
196
- line-height: 40px;
197
- list-style: none;
198
192
  cursor: pointer;
199
- align-items: center;
200
193
  }
201
194
  .bk-transfer .source-list .content li.custom-item:hover,
202
195
  .bk-transfer .target-list .content li.custom-item:hover,
@@ -209,23 +202,29 @@
209
202
  .bk-transfer .target-list .content li.custom-item .content-text,
210
203
  .bk-transfer .source-list .content li .item-content .content-text,
211
204
  .bk-transfer .target-list .content li .item-content .content-text {
205
+ flex: 1;
212
206
  overflow: hidden;
213
207
  text-overflow: ellipsis;
214
208
  white-space: nowrap;
215
- flex: 1;
216
209
  }
217
210
  .bk-transfer .source-list .content li.custom-item .icon-wrapper,
218
211
  .bk-transfer .target-list .content li.custom-item .icon-wrapper,
219
212
  .bk-transfer .source-list .content li .item-content .icon-wrapper,
220
213
  .bk-transfer .target-list .content li .item-content .icon-wrapper {
221
- display: none;
222
- flex: 22px 0 0;
214
+ visibility: hidden;
223
215
  }
224
216
  .bk-transfer .source-list .content li.custom-item .icon-wrapper.hover,
225
217
  .bk-transfer .target-list .content li.custom-item .icon-wrapper.hover,
226
218
  .bk-transfer .source-list .content li .item-content .icon-wrapper.hover,
227
219
  .bk-transfer .target-list .content li .item-content .icon-wrapper.hover {
228
- display: inline-block;
220
+ visibility: visible;
221
+ }
222
+ .bk-transfer .source-list .content li.custom-item .icon-wrapper .bk-icon,
223
+ .bk-transfer .target-list .content li.custom-item .icon-wrapper .bk-icon,
224
+ .bk-transfer .source-list .content li .item-content .icon-wrapper .bk-icon,
225
+ .bk-transfer .target-list .content li .item-content .icon-wrapper .bk-icon {
226
+ display: flex;
227
+ font-size: 22px;
229
228
  }
230
229
  .bk-transfer .source-list .content::-webkit-scrollbar,
231
230
  .bk-transfer .target-list .content::-webkit-scrollbar {
@@ -237,21 +236,3 @@
237
236
  background-color: #e6e9ea;
238
237
  border-radius: 2px;
239
238
  }
240
- .bk-transfer .source-list .content .bk-icon,
241
- .bk-transfer .target-list .content .bk-icon {
242
- font-size: 22px;
243
- }
244
- .bk-transfer .target-list {
245
- margin-left: 33px;
246
- }
247
- .bk-transfer .transfer-search-input {
248
- height: 36px;
249
- line-height: 34px;
250
- border: none;
251
- border-bottom: 1px solid #f0f1f5;
252
- outline: none;
253
- }
254
- .bk-transfer .transfer-search-input.is-focused {
255
- border-color: #f0f1f5;
256
- box-shadow: 0px 0px 3px 0px transparent;
257
- }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bkui-vue",
3
- "version": "0.0.1-beta.80",
3
+ "version": "0.0.1-beta.83",
4
4
  "workspaces": {
5
5
  "packages": [
6
6
  "packages/!(**.bak)*",