bkui-vue 0.0.1-beta.226 → 0.0.1-beta.227

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 (39) hide show
  1. package/dist/index.cjs.js +30 -30
  2. package/dist/index.esm.js +190 -127
  3. package/dist/index.umd.js +29 -29
  4. package/dist/style.css +1 -1
  5. package/dist/style.variable.css +1 -1
  6. package/lib/color-picker/color-picker.d.ts +1 -1
  7. package/lib/color-picker/index.d.ts +4 -4
  8. package/lib/date-picker/date-picker.d.ts +1 -1
  9. package/lib/date-picker/index.d.ts +4 -4
  10. package/lib/date-picker/panel/time-range.d.ts +1 -1
  11. package/lib/date-picker/panel/time.d.ts +1 -1
  12. package/lib/date-picker/time-picker.d.ts +1 -1
  13. package/lib/dialog/dialog.d.ts +1 -1
  14. package/lib/dialog/index.d.ts +4 -4
  15. package/lib/icon/index.d.ts +1 -0
  16. package/lib/icon/index.js +1 -1
  17. package/lib/icon/transfer.d.ts +4 -0
  18. package/lib/icon/transfer.js +1 -0
  19. package/lib/modal/index.d.ts +4 -4
  20. package/lib/modal/modal.d.ts +1 -1
  21. package/lib/select/index.d.ts +3 -0
  22. package/lib/select/index.js +1 -1
  23. package/lib/select/select.d.ts +1 -0
  24. package/lib/sideslider/index.d.ts +4 -4
  25. package/lib/sideslider/sideslider.d.ts +1 -1
  26. package/lib/table/components/table-cell.d.ts +11 -0
  27. package/lib/table/const.d.ts +4 -0
  28. package/lib/table/index.d.ts +11 -11
  29. package/lib/table/index.js +1 -1
  30. package/lib/table/props.d.ts +2 -2
  31. package/lib/table/table.d.ts +5 -5
  32. package/lib/table/use-common.d.ts +1 -0
  33. package/lib/table-column/index.js +1 -1
  34. package/lib/time-picker/index.d.ts +4 -4
  35. package/lib/transfer/index.js +1 -1
  36. package/lib/transfer/transfer.css +39 -24
  37. package/lib/transfer/transfer.less +43 -41
  38. package/lib/transfer/transfer.variable.css +44 -29
  39. package/package.json +1 -1
package/lib/transfer/transfer.css CHANGED
@@ -1,9 +1,3 @@
1
- /* 边框色 */
2
- /* 按钮、表单边框颜色、禁用时文本颜色 */
3
- /* 表格头部背景色、禁用底色 */
4
- /* 大面积背景色 */
5
- /* 重点表示、强调、链接以及带有明确指示性 */
6
- /* 正常尺寸图标 */
7
1
  .bk-transfer {
8
2
  display: flex;
9
3
  justify-content: center;
@@ -11,10 +5,9 @@
11
5
  font-size: 14px;
12
6
  }
13
7
  .bk-transfer .transfer {
14
- width: 30px;
15
- height: 30px;
16
- margin: 0 2px;
17
- background: url('@bkui-vue/styles/images/transfer.png') no-repeat center center;
8
+ margin: 0 8px;
9
+ font-size: 24px;
10
+ color: #c4c6cc;
18
11
  }
19
12
  .bk-transfer .source-list,
20
13
  .bk-transfer .target-list {
@@ -24,28 +17,30 @@
24
17
  height: 400px;
25
18
  min-width: 200px;
26
19
  overflow: hidden;
27
- background-color: #fff;
28
- border: 1px solid #dde4eb;
20
+ background-color: white;
21
+ border: 1px solid #dcdee5;
29
22
  border-radius: 2px;
30
23
  }
31
24
  .bk-transfer .source-list .slot-header,
32
25
  .bk-transfer .target-list .slot-header,
33
26
  .bk-transfer .source-list .header,
34
27
  .bk-transfer .target-list .header {
35
- height: 43px;
36
- padding: 0 20px;
28
+ height: 40px;
29
+ padding: 0 16px;
37
30
  background-color: #fafbfd;
38
- border-bottom: 1px solid #dde4eb;
31
+ border-bottom: 1px solid #dcdee5;
39
32
  }
40
33
  .bk-transfer .source-list .header,
41
34
  .bk-transfer .target-list .header {
42
35
  display: flex;
43
36
  align-items: center;
44
37
  justify-content: space-between;
38
+ font-weight: 700;
45
39
  }
46
40
  .bk-transfer .source-list .header span,
47
41
  .bk-transfer .target-list .header span {
48
42
  font-size: 12px;
43
+ font-weight: normal;
49
44
  color: #3a84ff;
50
45
  cursor: pointer;
51
46
  }
@@ -56,8 +51,10 @@
56
51
  }
57
52
  .bk-transfer .source-list .transfer-search-input,
58
53
  .bk-transfer .target-list .transfer-search-input {
59
- height: 36px;
60
- border-bottom: 1px solid #f0f1f5;
54
+ width: calc(100% - 32px);
55
+ height: 30px;
56
+ margin: 8px 16px 0;
57
+ border-bottom: 1px solid #dcdee5;
61
58
  border-width: 0 0 1px 0;
62
59
  border-radius: 0;
63
60
  outline: none;
@@ -66,6 +63,16 @@
66
63
  .bk-transfer .target-list .transfer-search-input.is-focused {
67
64
  box-shadow: none;
68
65
  }
66
+ .bk-transfer .source-list .transfer-search-input .icon-search,
67
+ .bk-transfer .target-list .transfer-search-input .icon-search {
68
+ font-size: 18px;
69
+ line-height: 28px;
70
+ color: #c4c6cc;
71
+ }
72
+ .bk-transfer .source-list .transfer-search-input input,
73
+ .bk-transfer .target-list .transfer-search-input input {
74
+ padding-left: 4px;
75
+ }
69
76
  .bk-transfer .source-list .empty,
70
77
  .bk-transfer .target-list .empty {
71
78
  flex: 1;
@@ -79,7 +86,7 @@
79
86
  .bk-transfer .source-list .content,
80
87
  .bk-transfer .target-list .content {
81
88
  flex: 1;
82
- margin: 6px 0;
89
+ margin: 8px 0;
83
90
  overflow-y: auto;
84
91
  }
85
92
  .bk-transfer .source-list .content li.custom-item,
@@ -87,17 +94,18 @@
87
94
  .bk-transfer .source-list .content li .item-content,
88
95
  .bk-transfer .target-list .content li .item-content {
89
96
  display: flex;
90
- align-items: center;
91
- height: 40px;
92
- padding: 0 20px;
97
+ height: 32px;
98
+ padding: 0 10px 0 16px;
99
+ margin-bottom: 4px;
93
100
  cursor: pointer;
101
+ align-items: center;
94
102
  }
95
103
  .bk-transfer .source-list .content li.custom-item:hover,
96
104
  .bk-transfer .target-list .content li.custom-item:hover,
97
105
  .bk-transfer .source-list .content li .item-content:hover,
98
106
  .bk-transfer .target-list .content li .item-content:hover {
99
107
  color: #3a84ff;
100
- background-color: #eef6fe;
108
+ background-color: #e1ecff;
101
109
  }
102
110
  .bk-transfer .source-list .content li.custom-item:hover .icon-wrapper,
103
111
  .bk-transfer .target-list .content li.custom-item:hover .icon-wrapper,
@@ -125,7 +133,14 @@
125
133
  .bk-transfer .source-list .content li .item-content .icon-wrapper .bk-icon,
126
134
  .bk-transfer .target-list .content li .item-content .icon-wrapper .bk-icon {
127
135
  display: flex;
128
- font-size: 22px;
136
+ font-size: 30px;
137
+ }
138
+ .bk-transfer .source-list .content li.custom-item .icon-wrapper .icon-delete,
139
+ .bk-transfer .target-list .content li.custom-item .icon-wrapper .icon-delete,
140
+ .bk-transfer .source-list .content li .item-content .icon-wrapper .icon-delete,
141
+ .bk-transfer .target-list .content li .item-content .icon-wrapper .icon-delete {
142
+ margin-right: 6px;
143
+ font-size: 16px;
129
144
  }
130
145
  .bk-transfer .source-list .content::-webkit-scrollbar,
131
146
  .bk-transfer .target-list .content::-webkit-scrollbar {
@@ -134,6 +149,6 @@
134
149
  .bk-transfer .source-list .content::-webkit-scrollbar-thumb,
135
150
  .bk-transfer .target-list .content::-webkit-scrollbar-thumb {
136
151
  height: 5px;
137
- background-color: #e6e9ea;
152
+ background-color: #dcdee5;
138
153
  border-radius: 2px;
139
154
  }
package/lib/transfer/transfer.less CHANGED
@@ -1,22 +1,6 @@
1
1
  @import '../styles/themes/themes.less';
2
2
 
3
- /* 边框色 */
4
- @borderInlineColor: #dde4eb;
5
-
6
- /* 按钮、表单边框颜色、禁用时文本颜色 */
7
- @newGreyColor: #c4c6cc;
8
-
9
- /* 表格头部背景色、禁用底色 */
10
- @newGreyColor2: #f0f1f5;
11
-
12
- /* 大面积背景色 */
13
- @newGreyColor3: #fafbfd;
14
-
15
- /* 重点表示、强调、链接以及带有明确指示性 */
16
- @newMainColor: #3a84ff;
17
-
18
- /* 正常尺寸图标 */
19
- @iconNormalSize: 22px;
3
+ @transfer-item-hover-background-color: #e1ecff;
20
4
 
21
5
  .@{bk-prefix}-transfer {
22
6
  display: flex;
@@ -25,10 +9,9 @@
25
9
  font-size: 14px;
26
10
 
27
11
  .transfer {
28
- width: 30px;
29
- height: 30px;
30
- margin: 0 2px;
31
- background: url('@bkui-vue/styles/images/transfer.png') no-repeat center center;
12
+ margin: 0 8px;
13
+ font-size: 24px;
14
+ color: @light-gray;
32
15
  }
33
16
 
34
17
  .source-list,
@@ -39,38 +22,42 @@
39
22
  height: 400px;
40
23
  min-width: 200px;
41
24
  overflow: hidden;
42
- background-color: #fff;
43
- border: 1px solid @borderInlineColor;
25
+ background-color: @white-color;
26
+ border: 1px solid @disable-color;
44
27
  border-radius: 2px;
45
28
 
46
29
  .slot-header,
47
30
  .header {
48
- height: 43px;
49
- padding: 0 20px;
50
- background-color: @newGreyColor3;
51
- border-bottom: 1px solid @borderInlineColor;
31
+ height: 40px;
32
+ padding: 0 16px;
33
+ background-color: @whitesmoke-color;
34
+ border-bottom: 1px solid @disable-color;
52
35
  }
53
36
 
54
37
  .header {
55
38
  display: flex;
56
39
  align-items: center;
57
40
  justify-content: space-between;
41
+ font-weight: 700;
58
42
 
59
43
  span {
60
44
  font-size: 12px;
61
- color: @newMainColor;
45
+ font-weight: normal;
46
+ color: @primary-color;
62
47
  cursor: pointer;
63
48
 
64
49
  &.disabled {
65
- color: @newGreyColor;
50
+ color: @light-gray;
66
51
  cursor: not-allowed;
67
52
  }
68
53
  }
69
54
  }
70
55
 
71
56
  .transfer-search-input {
72
- height: 36px;
73
- border-bottom: 1px solid @newGreyColor2;
57
+ width: calc(100% - 32px);
58
+ height: 30px;
59
+ margin: 8px 16px 0;
60
+ border-bottom: 1px solid @disable-color;
74
61
  border-width: 0 0 1px 0;
75
62
  border-radius: 0;
76
63
  outline: none;
@@ -78,6 +65,16 @@
78
65
  &.is-focused {
79
66
  box-shadow: none;
80
67
  }
68
+
69
+ .icon-search {
70
+ font-size: 18px;
71
+ line-height: 28px;
72
+ color: @light-gray;
73
+ }
74
+
75
+ input {
76
+ padding-left: 4px;
77
+ }
81
78
  }
82
79
 
83
80
  .empty {
@@ -86,26 +83,27 @@
86
83
  align-items: center;
87
84
  justify-content: center;
88
85
  padding-bottom: 30px;
89
- color: @newGreyColor;
86
+ color: @light-gray;
90
87
  cursor: default;
91
88
  }
92
89
 
93
90
  .content {
94
91
  flex: 1;
95
- margin: 6px 0;
92
+ margin: 8px 0;
96
93
  overflow-y: auto;
97
94
 
98
95
  li.custom-item,
99
96
  li .item-content {
100
97
  display: flex;
101
- align-items: center;
102
- height: 40px;
103
- padding: 0 20px;
98
+ height: 32px;
99
+ padding: 0 10px 0 16px;
100
+ margin-bottom: 4px;
104
101
  cursor: pointer;
102
+ align-items: center;
105
103
 
106
104
  &:hover {
107
- color: @newMainColor;
108
- background-color: #eef6fe;
105
+ color: @primary-color;
106
+ background-color: @transfer-item-hover-background-color;
109
107
 
110
108
  .icon-wrapper {
111
109
  visibility: visible;
@@ -124,19 +122,23 @@
124
122
 
125
123
  .bk-icon {
126
124
  display: flex;
127
- font-size: @iconNormalSize;
125
+ font-size: 30px;
126
+ }
127
+
128
+ .icon-delete {
129
+ margin-right: 6px;
130
+ font-size: 16px;
128
131
  }
129
132
  }
130
133
  }
131
134
 
132
135
  &::-webkit-scrollbar {
133
136
  width: 4px;
134
- // background-color: color(transparent lightness(80%));
135
137
  }
136
138
 
137
139
  &::-webkit-scrollbar-thumb {
138
140
  height: 5px;
139
- background-color: #e6e9ea;
141
+ background-color: #dcdee5;
140
142
  border-radius: 2px;
141
143
  }
142
144
  }
package/lib/transfer/transfer.variable.css CHANGED
@@ -117,12 +117,6 @@
117
117
  --search-select-placeholder-color: var(--light-gray);
118
118
  --search-select-message-color: var(--danger-color);
119
119
  }
120
- /* 边框色 */
121
- /* 按钮、表单边框颜色、禁用时文本颜色 */
122
- /* 表格头部背景色、禁用底色 */
123
- /* 大面积背景色 */
124
- /* 重点表示、强调、链接以及带有明确指示性 */
125
- /* 正常尺寸图标 */
126
120
  .bk-transfer {
127
121
  display: flex;
128
122
  justify-content: center;
@@ -130,10 +124,9 @@
130
124
  font-size: 14px;
131
125
  }
132
126
  .bk-transfer .transfer {
133
- width: 30px;
134
- height: 30px;
135
- margin: 0 2px;
136
- background: url('@bkui-vue/styles/images/transfer.png') no-repeat center center;
127
+ margin: 0 8px;
128
+ font-size: 24px;
129
+ color: var(--light-gray);
137
130
  }
138
131
  .bk-transfer .source-list,
139
132
  .bk-transfer .target-list {
@@ -143,40 +136,44 @@
143
136
  height: 400px;
144
137
  min-width: 200px;
145
138
  overflow: hidden;
146
- background-color: #fff;
147
- border: 1px solid #dde4eb;
139
+ background-color: var(--white-color);
140
+ border: 1px solid var(--disable-color);
148
141
  border-radius: 2px;
149
142
  }
150
143
  .bk-transfer .source-list .slot-header,
151
144
  .bk-transfer .target-list .slot-header,
152
145
  .bk-transfer .source-list .header,
153
146
  .bk-transfer .target-list .header {
154
- height: 43px;
155
- padding: 0 20px;
156
- background-color: #fafbfd;
157
- border-bottom: 1px solid #dde4eb;
147
+ height: 40px;
148
+ padding: 0 16px;
149
+ background-color: var(--whitesmoke-color);
150
+ border-bottom: 1px solid var(--disable-color);
158
151
  }
159
152
  .bk-transfer .source-list .header,
160
153
  .bk-transfer .target-list .header {
161
154
  display: flex;
162
155
  align-items: center;
163
156
  justify-content: space-between;
157
+ font-weight: 700;
164
158
  }
165
159
  .bk-transfer .source-list .header span,
166
160
  .bk-transfer .target-list .header span {
167
161
  font-size: 12px;
168
- color: #3a84ff;
162
+ font-weight: normal;
163
+ color: var(--primary-color);
169
164
  cursor: pointer;
170
165
  }
171
166
  .bk-transfer .source-list .header span.disabled,
172
167
  .bk-transfer .target-list .header span.disabled {
173
- color: #c4c6cc;
168
+ color: var(--light-gray);
174
169
  cursor: not-allowed;
175
170
  }
176
171
  .bk-transfer .source-list .transfer-search-input,
177
172
  .bk-transfer .target-list .transfer-search-input {
178
- height: 36px;
179
- border-bottom: 1px solid #f0f1f5;
173
+ width: calc(100% - 32px);
174
+ height: 30px;
175
+ margin: 8px 16px 0;
176
+ border-bottom: 1px solid var(--disable-color);
180
177
  border-width: 0 0 1px 0;
181
178
  border-radius: 0;
182
179
  outline: none;
@@ -185,6 +182,16 @@
185
182
  .bk-transfer .target-list .transfer-search-input.is-focused {
186
183
  box-shadow: none;
187
184
  }
185
+ .bk-transfer .source-list .transfer-search-input .icon-search,
186
+ .bk-transfer .target-list .transfer-search-input .icon-search {
187
+ font-size: 18px;
188
+ line-height: 28px;
189
+ color: var(--light-gray);
190
+ }
191
+ .bk-transfer .source-list .transfer-search-input input,
192
+ .bk-transfer .target-list .transfer-search-input input {
193
+ padding-left: 4px;
194
+ }
188
195
  .bk-transfer .source-list .empty,
189
196
  .bk-transfer .target-list .empty {
190
197
  flex: 1;
@@ -192,13 +199,13 @@
192
199
  align-items: center;
193
200
  justify-content: center;
194
201
  padding-bottom: 30px;
195
- color: #c4c6cc;
202
+ color: var(--light-gray);
196
203
  cursor: default;
197
204
  }
198
205
  .bk-transfer .source-list .content,
199
206
  .bk-transfer .target-list .content {
200
207
  flex: 1;
201
- margin: 6px 0;
208
+ margin: 8px 0;
202
209
  overflow-y: auto;
203
210
  }
204
211
  .bk-transfer .source-list .content li.custom-item,
@@ -206,17 +213,18 @@
206
213
  .bk-transfer .source-list .content li .item-content,
207
214
  .bk-transfer .target-list .content li .item-content {
208
215
  display: flex;
209
- align-items: center;
210
- height: 40px;
211
- padding: 0 20px;
216
+ height: 32px;
217
+ padding: 0 10px 0 16px;
218
+ margin-bottom: 4px;
212
219
  cursor: pointer;
220
+ align-items: center;
213
221
  }
214
222
  .bk-transfer .source-list .content li.custom-item:hover,
215
223
  .bk-transfer .target-list .content li.custom-item:hover,
216
224
  .bk-transfer .source-list .content li .item-content:hover,
217
225
  .bk-transfer .target-list .content li .item-content:hover {
218
- color: #3a84ff;
219
- background-color: #eef6fe;
226
+ color: var(--primary-color);
227
+ background-color: #e1ecff;
220
228
  }
221
229
  .bk-transfer .source-list .content li.custom-item:hover .icon-wrapper,
222
230
  .bk-transfer .target-list .content li.custom-item:hover .icon-wrapper,
@@ -244,7 +252,14 @@
244
252
  .bk-transfer .source-list .content li .item-content .icon-wrapper .bk-icon,
245
253
  .bk-transfer .target-list .content li .item-content .icon-wrapper .bk-icon {
246
254
  display: flex;
247
- font-size: 22px;
255
+ font-size: 30px;
256
+ }
257
+ .bk-transfer .source-list .content li.custom-item .icon-wrapper .icon-delete,
258
+ .bk-transfer .target-list .content li.custom-item .icon-wrapper .icon-delete,
259
+ .bk-transfer .source-list .content li .item-content .icon-wrapper .icon-delete,
260
+ .bk-transfer .target-list .content li .item-content .icon-wrapper .icon-delete {
261
+ margin-right: 6px;
262
+ font-size: 16px;
248
263
  }
249
264
  .bk-transfer .source-list .content::-webkit-scrollbar,
250
265
  .bk-transfer .target-list .content::-webkit-scrollbar {
@@ -253,6 +268,6 @@
253
268
  .bk-transfer .source-list .content::-webkit-scrollbar-thumb,
254
269
  .bk-transfer .target-list .content::-webkit-scrollbar-thumb {
255
270
  height: 5px;
256
- background-color: #e6e9ea;
271
+ background-color: #dcdee5;
257
272
  border-radius: 2px;
258
273
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bkui-vue",
3
- "version": "0.0.1-beta.226",
3
+ "version": "0.0.1-beta.227",
4
4
  "workspaces": {
5
5
  "packages": [
6
6
  "packages/!(**.bak)*",