bkui-vue 0.0.1-beta.164 → 0.0.1-beta.167

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.
@@ -33,11 +33,12 @@
33
33
  }
34
34
  .bk-pagination-total-num {
35
35
  padding: 0 2px;
36
- color: #3f4046;
37
36
  }
38
37
  .bk-pagination-list {
39
38
  display: flex;
40
39
  }
40
+ .bk-pagination-list-pre-batch,
41
+ .bk-pagination-list-next-batch,
41
42
  .bk-pagination-list-pre,
42
43
  .bk-pagination-list-next,
43
44
  .bk-pagination-list-item {
@@ -52,19 +53,26 @@
52
53
  color: #63656e;
53
54
  cursor: pointer;
54
55
  background: #fff;
55
- border: 1px solid #c4c6cc;
56
56
  border-radius: 2px;
57
57
  user-select: none;
58
58
  }
59
- .bk-pagination-list-pre:hover,
60
- .bk-pagination-list-next:hover,
61
- .bk-pagination-list-item:hover,
59
+ .bk-pagination-list-pre-batch.is-active,
60
+ .bk-pagination-list-next-batch.is-active,
62
61
  .bk-pagination-list-pre.is-active,
63
62
  .bk-pagination-list-next.is-active,
64
63
  .bk-pagination-list-item.is-active {
65
64
  color: #3a84ff;
66
- border-color: #3a84ff;
65
+ background: #e1ecff;
66
+ }
67
+ .bk-pagination-list-pre-batch:hover,
68
+ .bk-pagination-list-next-batch:hover,
69
+ .bk-pagination-list-pre:hover,
70
+ .bk-pagination-list-next:hover,
71
+ .bk-pagination-list-item:hover {
72
+ background: #f0f1f5;
67
73
  }
74
+ .bk-pagination-list-pre-batch.is-disabled,
75
+ .bk-pagination-list-next-batch.is-disabled,
68
76
  .bk-pagination-list-pre.is-disabled,
69
77
  .bk-pagination-list-next.is-disabled,
70
78
  .bk-pagination-list-item.is-disabled {
@@ -73,26 +81,20 @@
73
81
  background-color: #fafbfd;
74
82
  border-color: #dcdee5;
75
83
  }
76
- .bk-pagination-list-pre-batch,
77
- .bk-pagination-list-next-batch {
78
- display: flex;
79
- align-items: center;
80
- justify-content: center;
81
- height: 32px;
82
- cursor: pointer;
83
- user-select: none;
84
- }
85
- .bk-pagination-list-pre-batch:hover,
86
- .bk-pagination-list-next-batch:hover {
87
- color: #3a84ff;
88
- }
89
84
  .bk-pagination-list-pre,
90
85
  .bk-pagination-list-next {
91
- font-size: 14px;
86
+ font-size: 20px;
87
+ color: #979ba5;
88
+ }
89
+ .bk-pagination-list-pre.is-disabled,
90
+ .bk-pagination-list-next.is-disabled {
91
+ color: #dcdee5;
92
+ cursor: not-allowed;
93
+ background-color: transparent;
92
94
  }
93
95
  .bk-pagination-list-item {
94
- margin-right: 4px;
95
- margin-left: 4px;
96
+ margin-right: 2px;
97
+ margin-left: 2px;
96
98
  }
97
99
  .bk-pagination-limit {
98
100
  display: flex;
@@ -103,12 +105,32 @@
103
105
  width: 60px;
104
106
  margin: 0 4px;
105
107
  }
108
+ .bk-pagination-limit-select .bk-input {
109
+ border-color: #f0f1f5;
110
+ }
111
+ .bk-pagination-limit-select .bk-input--text {
112
+ background-color: #f0f1f5;
113
+ }
114
+ .bk-pagination-limit-select:hover .bk-input {
115
+ border-color: #eaebf0;
116
+ }
117
+ .bk-pagination-limit-select:hover .bk-input--text {
118
+ background-color: #eaebf0;
119
+ }
120
+ .bk-pagination-limit-select .bk-input.is-focused {
121
+ border-color: #3a84ff;
122
+ }
123
+ .bk-pagination-limit-select .bk-input.is-focused .bk-input--text {
124
+ background-color: #fff;
125
+ }
106
126
  .bk-pagination-small-list {
107
127
  display: flex;
128
+ align-items: center;
108
129
  }
109
130
  .bk-pagination-small-list .bk-pagination-picker {
110
131
  display: flex;
111
- height: 24px;
132
+ height: 26px;
133
+ margin: 0 4px;
112
134
  cursor: pointer;
113
135
  background-color: #f0f1f5;
114
136
  border: 1px solid #f0f1f5;
@@ -116,8 +138,8 @@
116
138
  align-items: center;
117
139
  }
118
140
  .bk-pagination-small-list .bk-pagination-picker:hover {
119
- background-color: #e1ecff;
120
- border-color: #e1ecff;
141
+ background-color: #eaebf0;
142
+ border-color: #eaebf0;
121
143
  }
122
144
  .bk-pagination-small-list .bk-pagination-picker.is-focused {
123
145
  background-color: #fff;
@@ -126,7 +148,7 @@
126
148
  }
127
149
  .bk-pagination-editor {
128
150
  height: 16px;
129
- min-width: 14px;
151
+ min-width: 23px;
130
152
  padding-right: 4px;
131
153
  padding-left: 8px;
132
154
  line-height: 16px;
@@ -144,14 +166,18 @@
144
166
  .bk-pagination-btn-pre,
145
167
  .bk-pagination-btn-next {
146
168
  display: flex;
169
+ width: 26px;
170
+ height: 26px;
171
+ font-size: 20px;
172
+ color: #979ba5;
173
+ cursor: pointer;
147
174
  justify-content: center;
148
175
  align-items: center;
149
- width: 24px;
150
- cursor: pointer;
151
176
  }
152
177
  .bk-pagination-btn-pre:hover,
153
178
  .bk-pagination-btn-next:hover {
154
179
  color: #3a84ff;
180
+ background: #f0f1f5;
155
181
  }
156
182
  .bk-pagination-btn-pre.is-disabled,
157
183
  .bk-pagination-btn-next.is-disabled {
@@ -56,6 +56,9 @@ export declare const paginationProps: {
56
56
  } & {
57
57
  default: boolean;
58
58
  };
59
+ beforeChange: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
60
+ default: (...args: any[]) => any;
61
+ };
59
62
  layout: import("vue-types").VueTypeDef<string[]> & {
60
63
  default: () => string[];
61
64
  };
@@ -118,6 +121,9 @@ declare const _default: import("vue").DefineComponent<{
118
121
  } & {
119
122
  default: boolean;
120
123
  };
124
+ beforeChange: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
125
+ default: (...args: any[]) => any;
126
+ };
121
127
  layout: import("vue-types").VueTypeDef<string[]> & {
122
128
  default: () => string[];
123
129
  };
@@ -193,6 +199,9 @@ declare const _default: import("vue").DefineComponent<{
193
199
  } & {
194
200
  default: boolean;
195
201
  };
202
+ beforeChange: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
203
+ default: (...args: any[]) => any;
204
+ };
196
205
  layout: import("vue-types").VueTypeDef<string[]> & {
197
206
  default: () => string[];
198
207
  };
@@ -209,6 +218,7 @@ declare const _default: import("vue").DefineComponent<{
209
218
  layout: string[];
210
219
  count: number;
211
220
  modelValue: number;
221
+ beforeChange: (...args: any[]) => any;
212
222
  prevText: string;
213
223
  nextText: string;
214
224
  align: string;
@@ -36,7 +36,6 @@
36
36
  margin-right: 0;
37
37
  }
38
38
 
39
-
40
39
  }
41
40
  .@{bk-prefix}-pagination-total {
42
41
  display: flex;
@@ -45,13 +44,14 @@
45
44
 
46
45
  .@{bk-prefix}-pagination-total-num {
47
46
  padding: 0 2px;
48
- color: #3f4046;
49
47
  }
50
48
 
51
49
  .@{bk-prefix}-pagination-list {
52
50
  display: flex;
53
51
  }
54
52
 
53
+ .@{bk-prefix}-pagination-list-pre-batch,
54
+ .@{bk-prefix}-pagination-list-next-batch,
55
55
  .@{bk-prefix}-pagination-list-pre,
56
56
  .@{bk-prefix}-pagination-list-next,
57
57
  .@{bk-prefix}-pagination-list-item {
@@ -66,14 +66,16 @@
66
66
  color: #63656e;
67
67
  cursor: pointer;
68
68
  background: #fff;
69
- border: 1px solid #c4c6cc;
70
69
  border-radius: 2px;
71
70
  user-select: none;
72
71
 
73
- &:hover,
74
72
  &.is-active {
75
73
  color: #3a84ff;
76
- border-color: #3a84ff;
74
+ background: #e1ecff;
75
+ }
76
+
77
+ &:hover {
78
+ background: #f0f1f5;
77
79
  }
78
80
 
79
81
  &.is-disabled {
@@ -84,28 +86,21 @@
84
86
  }
85
87
  }
86
88
 
87
- .@{bk-prefix}-pagination-list-pre-batch,
88
- .@{bk-prefix}-pagination-list-next-batch {
89
- display: flex;
90
- align-items: center;
91
- justify-content: center;
92
- height: 32px;
93
- cursor: pointer;
94
- user-select: none;
95
-
96
- &:hover {
97
- color: #3a84ff;
98
- }
99
- }
100
-
101
89
  .@{bk-prefix}-pagination-list-pre,
102
90
  .@{bk-prefix}-pagination-list-next {
103
- font-size: 14px;
91
+ font-size: 20px;
92
+ color: #979ba5;
93
+
94
+ &.is-disabled {
95
+ color: #dcdee5;
96
+ cursor: not-allowed;
97
+ background-color: transparent;
98
+ }
104
99
  }
105
100
 
106
101
  .@{bk-prefix}-pagination-list-item {
107
- margin-right: 4px;
108
- margin-left: 4px;
102
+ margin-right: 2px;
103
+ margin-left: 2px;
109
104
  }
110
105
 
111
106
  .@{bk-prefix}-pagination-limit {
@@ -117,14 +112,42 @@
117
112
  .@{bk-prefix}-pagination-limit-select {
118
113
  width: 60px;
119
114
  margin: 0 4px;
115
+
116
+ .bk-input {
117
+ border-color: #f0f1f5;
118
+ }
119
+
120
+ .bk-input--text {
121
+ background-color: #f0f1f5;
122
+ }
123
+
124
+ &:hover {
125
+ .bk-input {
126
+ border-color: #eaebf0;
127
+ }
128
+
129
+ .bk-input--text {
130
+ background-color: #eaebf0;
131
+ }
132
+ }
133
+
134
+ .bk-input {
135
+ &.is-focused {
136
+ border-color: #3a84ff;
137
+
138
+ .bk-input--text {
139
+ background-color: #fff;
140
+ }
141
+ }
142
+ }
120
143
  }
121
144
  .@{bk-prefix}-pagination-small-list {
122
145
  display: flex;
123
-
146
+ align-items: center;
124
147
  .@{bk-prefix}-pagination-picker {
125
148
  display: flex;
126
- height: 24px;
127
- // padding: 0 8px;
149
+ height: 26px;
150
+ margin: 0 4px;
128
151
  cursor: pointer;
129
152
  background-color: #f0f1f5;
130
153
  border: 1px solid #f0f1f5;
@@ -132,8 +155,8 @@
132
155
  align-items: center;
133
156
 
134
157
  &:hover {
135
- background-color: #e1ecff;
136
- border-color: #e1ecff;
158
+ background-color: #eaebf0;
159
+ border-color: #eaebf0;
137
160
  }
138
161
 
139
162
  &.is-focused {
@@ -146,7 +169,7 @@
146
169
 
147
170
  .@{bk-prefix}-pagination-editor {
148
171
  height: 16px;
149
- min-width: 14px;
172
+ min-width: 23px;
150
173
  padding-right: 4px;
151
174
  padding-left: 8px;
152
175
  line-height: 16px;
@@ -164,13 +187,17 @@
164
187
  .@{bk-prefix}-pagination-btn-pre,
165
188
  .@{bk-prefix}-pagination-btn-next {
166
189
  display: flex;
190
+ width: 26px;
191
+ height: 26px;
192
+ font-size: 20px;
193
+ color: #979ba5;
194
+ cursor: pointer;
167
195
  justify-content: center;
168
196
  align-items: center;
169
- width: 24px;
170
- cursor: pointer;
171
197
 
172
198
  &:hover {
173
- color: #3a84ff
199
+ color: #3a84ff;
200
+ background: #f0f1f5;
174
201
  }
175
202
 
176
203
  &.is-disabled {
@@ -146,11 +146,12 @@
146
146
  }
147
147
  .bk-pagination-total-num {
148
148
  padding: 0 2px;
149
- color: #3f4046;
150
149
  }
151
150
  .bk-pagination-list {
152
151
  display: flex;
153
152
  }
153
+ .bk-pagination-list-pre-batch,
154
+ .bk-pagination-list-next-batch,
154
155
  .bk-pagination-list-pre,
155
156
  .bk-pagination-list-next,
156
157
  .bk-pagination-list-item {
@@ -165,19 +166,26 @@
165
166
  color: #63656e;
166
167
  cursor: pointer;
167
168
  background: #fff;
168
- border: 1px solid #c4c6cc;
169
169
  border-radius: 2px;
170
170
  user-select: none;
171
171
  }
172
- .bk-pagination-list-pre:hover,
173
- .bk-pagination-list-next:hover,
174
- .bk-pagination-list-item:hover,
172
+ .bk-pagination-list-pre-batch.is-active,
173
+ .bk-pagination-list-next-batch.is-active,
175
174
  .bk-pagination-list-pre.is-active,
176
175
  .bk-pagination-list-next.is-active,
177
176
  .bk-pagination-list-item.is-active {
178
177
  color: #3a84ff;
179
- border-color: #3a84ff;
178
+ background: #e1ecff;
179
+ }
180
+ .bk-pagination-list-pre-batch:hover,
181
+ .bk-pagination-list-next-batch:hover,
182
+ .bk-pagination-list-pre:hover,
183
+ .bk-pagination-list-next:hover,
184
+ .bk-pagination-list-item:hover {
185
+ background: #f0f1f5;
180
186
  }
187
+ .bk-pagination-list-pre-batch.is-disabled,
188
+ .bk-pagination-list-next-batch.is-disabled,
181
189
  .bk-pagination-list-pre.is-disabled,
182
190
  .bk-pagination-list-next.is-disabled,
183
191
  .bk-pagination-list-item.is-disabled {
@@ -186,26 +194,20 @@
186
194
  background-color: #fafbfd;
187
195
  border-color: #dcdee5;
188
196
  }
189
- .bk-pagination-list-pre-batch,
190
- .bk-pagination-list-next-batch {
191
- display: flex;
192
- align-items: center;
193
- justify-content: center;
194
- height: 32px;
195
- cursor: pointer;
196
- user-select: none;
197
- }
198
- .bk-pagination-list-pre-batch:hover,
199
- .bk-pagination-list-next-batch:hover {
200
- color: #3a84ff;
201
- }
202
197
  .bk-pagination-list-pre,
203
198
  .bk-pagination-list-next {
204
- font-size: 14px;
199
+ font-size: 20px;
200
+ color: #979ba5;
201
+ }
202
+ .bk-pagination-list-pre.is-disabled,
203
+ .bk-pagination-list-next.is-disabled {
204
+ color: #dcdee5;
205
+ cursor: not-allowed;
206
+ background-color: transparent;
205
207
  }
206
208
  .bk-pagination-list-item {
207
- margin-right: 4px;
208
- margin-left: 4px;
209
+ margin-right: 2px;
210
+ margin-left: 2px;
209
211
  }
210
212
  .bk-pagination-limit {
211
213
  display: flex;
@@ -216,12 +218,32 @@
216
218
  width: 60px;
217
219
  margin: 0 4px;
218
220
  }
221
+ .bk-pagination-limit-select .bk-input {
222
+ border-color: #f0f1f5;
223
+ }
224
+ .bk-pagination-limit-select .bk-input--text {
225
+ background-color: #f0f1f5;
226
+ }
227
+ .bk-pagination-limit-select:hover .bk-input {
228
+ border-color: #eaebf0;
229
+ }
230
+ .bk-pagination-limit-select:hover .bk-input--text {
231
+ background-color: #eaebf0;
232
+ }
233
+ .bk-pagination-limit-select .bk-input.is-focused {
234
+ border-color: #3a84ff;
235
+ }
236
+ .bk-pagination-limit-select .bk-input.is-focused .bk-input--text {
237
+ background-color: #fff;
238
+ }
219
239
  .bk-pagination-small-list {
220
240
  display: flex;
241
+ align-items: center;
221
242
  }
222
243
  .bk-pagination-small-list .bk-pagination-picker {
223
244
  display: flex;
224
- height: 24px;
245
+ height: 26px;
246
+ margin: 0 4px;
225
247
  cursor: pointer;
226
248
  background-color: #f0f1f5;
227
249
  border: 1px solid #f0f1f5;
@@ -229,8 +251,8 @@
229
251
  align-items: center;
230
252
  }
231
253
  .bk-pagination-small-list .bk-pagination-picker:hover {
232
- background-color: #e1ecff;
233
- border-color: #e1ecff;
254
+ background-color: #eaebf0;
255
+ border-color: #eaebf0;
234
256
  }
235
257
  .bk-pagination-small-list .bk-pagination-picker.is-focused {
236
258
  background-color: #fff;
@@ -239,7 +261,7 @@
239
261
  }
240
262
  .bk-pagination-editor {
241
263
  height: 16px;
242
- min-width: 14px;
264
+ min-width: 23px;
243
265
  padding-right: 4px;
244
266
  padding-left: 8px;
245
267
  line-height: 16px;
@@ -257,14 +279,18 @@
257
279
  .bk-pagination-btn-pre,
258
280
  .bk-pagination-btn-next {
259
281
  display: flex;
282
+ width: 26px;
283
+ height: 26px;
284
+ font-size: 20px;
285
+ color: #979ba5;
286
+ cursor: pointer;
260
287
  justify-content: center;
261
288
  align-items: center;
262
- width: 24px;
263
- cursor: pointer;
264
289
  }
265
290
  .bk-pagination-btn-pre:hover,
266
291
  .bk-pagination-btn-next:hover {
267
292
  color: #3a84ff;
293
+ background: #f0f1f5;
268
294
  }
269
295
  .bk-pagination-btn-pre.is-disabled,
270
296
  .bk-pagination-btn-next.is-disabled {