@teammodlr/ui-kit 2.1.38 → 2.1.41
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.
- package/lib/components/pagination/Pagination.vue.d.ts +1 -1
- package/lib/index.cjs.js +10 -10
- package/lib/index.es.js +1853 -1814
- package/lib/style.css +1 -1
- package/package.json +40 -40
- package/src/components/pagination/Pagination.vue +124 -65
- package/src/components/pagination/style/Pagination.css.ts +3 -2
- package/src/components/tooltip/Tooltip.vue +2 -2
- package/src/components/tooltip/examples/basic.vue +1 -1
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div :class="style.pagination">
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
3
|
+
<div v-if="showTotal">
|
|
4
|
+
<div v-if="showTotal">
|
|
5
|
+
Showing <strong>{{ (page - 1) * pageSize + 1 }}</strong> to
|
|
6
|
+
<strong>{{ Math.min(page * pageSize, realTotal) }}</strong> of
|
|
7
|
+
<strong>{{ realTotal }}</strong>
|
|
8
|
+
</div>
|
|
9
|
+
</div>
|
|
8
10
|
|
|
9
11
|
<div :class="style.buttons">
|
|
10
12
|
<button
|
|
@@ -13,33 +15,46 @@
|
|
|
13
15
|
:disabled="page === 1"
|
|
14
16
|
aria-label="Previous"
|
|
15
17
|
role="button"
|
|
16
|
-
@click="handlePageChange(page - 1)"
|
|
17
|
-
|
|
18
|
-
|
|
18
|
+
@click="handlePageChange(page - 1)">
|
|
19
|
+
<svg
|
|
20
|
+
:class="style.svg"
|
|
21
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
22
|
+
fill="none"
|
|
23
|
+
viewBox="0 0 10 24"
|
|
24
|
+
width="10"
|
|
25
|
+
height="24"
|
|
26
|
+
focusable="false">
|
|
27
|
+
<path
|
|
28
|
+
stroke="currentColor"
|
|
29
|
+
fill="currentColor"
|
|
30
|
+
fill-rule="evenodd"
|
|
31
|
+
d="m2.462 12 7.222-6.77-1.368-1.46-8 7.5a1 1 0 0 0 0 1.46l8 7.5 1.368-1.46L2.462 12z"
|
|
32
|
+
clip-rule="evenodd"></path>
|
|
33
|
+
</svg>
|
|
19
34
|
</button>
|
|
20
35
|
|
|
21
36
|
<div :class="style.pages">
|
|
22
37
|
<template
|
|
23
38
|
v-for="(item, index) in pageIndicatorSeries"
|
|
24
|
-
:key="index"
|
|
25
|
-
>
|
|
39
|
+
:key="index">
|
|
26
40
|
<button
|
|
27
41
|
:class="[
|
|
28
42
|
style.page,
|
|
29
43
|
{
|
|
30
44
|
[style.active]: item.current
|
|
31
|
-
}
|
|
45
|
+
}
|
|
32
46
|
]"
|
|
33
47
|
:ref="getKey(item)"
|
|
34
48
|
tabindex="0"
|
|
35
49
|
:disabled="isEmpty"
|
|
36
50
|
role="button"
|
|
37
51
|
@click="handlePageChange(item.page)"
|
|
38
|
-
:aria-label="
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
52
|
+
:aria-label="
|
|
53
|
+
item.current
|
|
54
|
+
? `Page ${item.page}`
|
|
55
|
+
: `Goto page ${item.page}`
|
|
56
|
+
">
|
|
57
|
+
<template v-if="item.more"> ... </template>
|
|
43
58
|
<template v-else>
|
|
44
59
|
{{ item.text }}
|
|
45
60
|
</template>
|
|
@@ -53,23 +68,36 @@
|
|
|
53
68
|
aria-label="Next"
|
|
54
69
|
role="button"
|
|
55
70
|
@click="handlePageChange(page + 1)"
|
|
56
|
-
:class="style.page"
|
|
57
|
-
|
|
58
|
-
|
|
71
|
+
:class="style.page">
|
|
72
|
+
<svg
|
|
73
|
+
:class="style.svg"
|
|
74
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
75
|
+
fill="none"
|
|
76
|
+
viewBox="0 0 10 24"
|
|
77
|
+
width="10"
|
|
78
|
+
height="24"
|
|
79
|
+
focusable="false">
|
|
80
|
+
<path
|
|
81
|
+
stroke="currentColor"
|
|
82
|
+
fill="currentColor"
|
|
83
|
+
fill-rule="evenodd"
|
|
84
|
+
d="M10 12a1 1 0 0 1-.316.73l-8 7.5-1.368-1.46L7.538 12 .316 5.23l1.368-1.46 8 7.5A1 1 0 0 1 10 12z"
|
|
85
|
+
clip-rule="evenodd"></path>
|
|
86
|
+
</svg>
|
|
59
87
|
</button>
|
|
60
88
|
</div>
|
|
61
89
|
</div>
|
|
62
90
|
</template>
|
|
63
91
|
|
|
64
92
|
<script lang="ts">
|
|
65
|
-
import {computed, defineComponent, watch} from
|
|
66
|
-
import * as style from
|
|
93
|
+
import { computed, defineComponent, watch } from 'vue';
|
|
94
|
+
import * as style from './style';
|
|
67
95
|
|
|
68
|
-
const pageIndicatorLength = 7
|
|
69
|
-
const aroundIndicatorLength = 1
|
|
70
|
-
const moreIndicatorOffsetLength = 5
|
|
96
|
+
const pageIndicatorLength = 7;
|
|
97
|
+
const aroundIndicatorLength = 1;
|
|
98
|
+
const moreIndicatorOffsetLength = 5;
|
|
71
99
|
export default defineComponent({
|
|
72
|
-
name:
|
|
100
|
+
name: 'Pagination',
|
|
73
101
|
props: {
|
|
74
102
|
page: {
|
|
75
103
|
type: Number,
|
|
@@ -98,11 +126,8 @@ export default defineComponent({
|
|
|
98
126
|
default: false
|
|
99
127
|
}
|
|
100
128
|
},
|
|
101
|
-
emits: [
|
|
102
|
-
|
|
103
|
-
'update:pageSize',
|
|
104
|
-
],
|
|
105
|
-
setup(props, {emit}) {
|
|
129
|
+
emits: ['update:page', 'update:pageSize'],
|
|
130
|
+
setup(props, { emit }) {
|
|
106
131
|
const realTotal = computed(() => {
|
|
107
132
|
return props.total || 0;
|
|
108
133
|
});
|
|
@@ -112,11 +137,12 @@ export default defineComponent({
|
|
|
112
137
|
});
|
|
113
138
|
|
|
114
139
|
const realPageSizes = computed(() => {
|
|
115
|
-
const sizes =
|
|
116
|
-
|
|
117
|
-
|
|
140
|
+
const sizes =
|
|
141
|
+
props.pageSizes == null
|
|
142
|
+
? [10, 20, 30, 40, 50]
|
|
143
|
+
: props.pageSizes;
|
|
118
144
|
|
|
119
|
-
return sizes.map(
|
|
145
|
+
return sizes.map(size => ({
|
|
120
146
|
label: size,
|
|
121
147
|
value: size
|
|
122
148
|
}));
|
|
@@ -127,46 +153,68 @@ export default defineComponent({
|
|
|
127
153
|
});
|
|
128
154
|
|
|
129
155
|
const pageIndicatorSeries = computed(() => {
|
|
130
|
-
let {page} = props;
|
|
156
|
+
let { page } = props;
|
|
131
157
|
|
|
132
158
|
if (isEmpty.value) {
|
|
133
|
-
return [getPageIndicator(1, {current: false})];
|
|
159
|
+
return [getPageIndicator(1, { current: false })];
|
|
134
160
|
}
|
|
135
161
|
|
|
136
|
-
let continuousIndicatorLength = aroundIndicatorLength * 2 + 1
|
|
162
|
+
let continuousIndicatorLength = aroundIndicatorLength * 2 + 1;
|
|
137
163
|
let boundaryIndicatorLength =
|
|
138
|
-
(pageIndicatorLength - continuousIndicatorLength - 2) / 2
|
|
139
|
-
let leftLen
|
|
140
|
-
let rightLen
|
|
141
|
-
let offsetBackward = Math.max(page - moreIndicatorOffsetLength, 1)
|
|
142
|
-
let offsetForward = Math.min(
|
|
164
|
+
(pageIndicatorLength - continuousIndicatorLength - 2) / 2;
|
|
165
|
+
let leftLen;
|
|
166
|
+
let rightLen;
|
|
167
|
+
let offsetBackward = Math.max(page - moreIndicatorOffsetLength, 1);
|
|
168
|
+
let offsetForward = Math.min(
|
|
169
|
+
page + moreIndicatorOffsetLength,
|
|
170
|
+
pageCount.value
|
|
171
|
+
);
|
|
143
172
|
switch (true) {
|
|
144
173
|
case pageCount.value <= pageIndicatorLength:
|
|
145
|
-
return getPageSeries(1, pageCount.value)
|
|
146
|
-
case page <=
|
|
147
|
-
|
|
174
|
+
return getPageSeries(1, pageCount.value);
|
|
175
|
+
case page <=
|
|
176
|
+
boundaryIndicatorLength + aroundIndicatorLength + 2:
|
|
177
|
+
leftLen = pageIndicatorLength - boundaryIndicatorLength - 1;
|
|
148
178
|
return getPageSeries(1, leftLen)
|
|
149
179
|
.concat(
|
|
150
|
-
getPageIndicator(offsetForward, {
|
|
180
|
+
getPageIndicator(offsetForward, {
|
|
181
|
+
more: true,
|
|
182
|
+
forward: true
|
|
183
|
+
})
|
|
151
184
|
)
|
|
152
185
|
.concat(
|
|
153
186
|
getPageSeries(
|
|
154
187
|
pageCount.value - boundaryIndicatorLength + 1,
|
|
155
188
|
boundaryIndicatorLength
|
|
156
189
|
)
|
|
157
|
-
)
|
|
190
|
+
);
|
|
158
191
|
case page >=
|
|
159
|
-
|
|
160
|
-
|
|
192
|
+
pageCount.value -
|
|
193
|
+
boundaryIndicatorLength -
|
|
194
|
+
aroundIndicatorLength -
|
|
195
|
+
1:
|
|
196
|
+
rightLen =
|
|
197
|
+
pageIndicatorLength - boundaryIndicatorLength - 1;
|
|
161
198
|
return getPageSeries(1, boundaryIndicatorLength)
|
|
162
199
|
.concat(
|
|
163
|
-
getPageIndicator(offsetBackward, {
|
|
200
|
+
getPageIndicator(offsetBackward, {
|
|
201
|
+
more: true,
|
|
202
|
+
forward: false
|
|
203
|
+
})
|
|
164
204
|
)
|
|
165
|
-
.concat(
|
|
205
|
+
.concat(
|
|
206
|
+
getPageSeries(
|
|
207
|
+
pageCount.value - rightLen + 1,
|
|
208
|
+
rightLen
|
|
209
|
+
)
|
|
210
|
+
);
|
|
166
211
|
default:
|
|
167
212
|
return getPageSeries(1, boundaryIndicatorLength)
|
|
168
213
|
.concat(
|
|
169
|
-
getPageIndicator(offsetBackward, {
|
|
214
|
+
getPageIndicator(offsetBackward, {
|
|
215
|
+
more: true,
|
|
216
|
+
forward: false
|
|
217
|
+
})
|
|
170
218
|
)
|
|
171
219
|
.concat(
|
|
172
220
|
getPageSeries(
|
|
@@ -175,17 +223,19 @@ export default defineComponent({
|
|
|
175
223
|
)
|
|
176
224
|
)
|
|
177
225
|
.concat(
|
|
178
|
-
getPageIndicator(offsetForward, {
|
|
226
|
+
getPageIndicator(offsetForward, {
|
|
227
|
+
more: true,
|
|
228
|
+
forward: true
|
|
229
|
+
})
|
|
179
230
|
)
|
|
180
231
|
.concat(
|
|
181
232
|
getPageSeries(
|
|
182
233
|
pageCount.value - boundaryIndicatorLength + 1,
|
|
183
234
|
boundaryIndicatorLength
|
|
184
235
|
)
|
|
185
|
-
)
|
|
236
|
+
);
|
|
186
237
|
}
|
|
187
|
-
|
|
188
|
-
})
|
|
238
|
+
});
|
|
189
239
|
|
|
190
240
|
function getPageSeries(from: number, length: number) {
|
|
191
241
|
let series = [];
|
|
@@ -196,30 +246,39 @@ export default defineComponent({
|
|
|
196
246
|
return series;
|
|
197
247
|
}
|
|
198
248
|
|
|
199
|
-
function getPageIndicator(
|
|
249
|
+
function getPageIndicator(
|
|
250
|
+
page: number,
|
|
251
|
+
{ more = false, forward = false, current = false } = {}
|
|
252
|
+
) {
|
|
200
253
|
return {
|
|
201
254
|
page,
|
|
202
255
|
more,
|
|
203
256
|
forward,
|
|
204
257
|
current: !current ? page === props.page : current,
|
|
205
258
|
text: page
|
|
206
|
-
}
|
|
259
|
+
};
|
|
207
260
|
}
|
|
208
261
|
|
|
209
262
|
function getKey(item: any) {
|
|
210
|
-
return `page-${
|
|
263
|
+
return `page-${
|
|
264
|
+
item.more ? (item.forward ? 'forward' : 'backward') : item.page
|
|
265
|
+
}`;
|
|
211
266
|
}
|
|
212
267
|
|
|
213
268
|
function handlePageChange(page: number) {
|
|
214
269
|
if (props.loading) {
|
|
215
270
|
return;
|
|
216
271
|
}
|
|
217
|
-
emit('update:page', page)
|
|
272
|
+
emit('update:page', page);
|
|
218
273
|
}
|
|
219
274
|
|
|
220
|
-
watch(
|
|
221
|
-
|
|
222
|
-
|
|
275
|
+
watch(
|
|
276
|
+
() => props.page,
|
|
277
|
+
val => {
|
|
278
|
+
emit('update:page', val);
|
|
279
|
+
},
|
|
280
|
+
{ immediate: true }
|
|
281
|
+
);
|
|
223
282
|
|
|
224
283
|
return {
|
|
225
284
|
realTotal,
|
|
@@ -231,7 +290,7 @@ export default defineComponent({
|
|
|
231
290
|
handlePageChange,
|
|
232
291
|
|
|
233
292
|
style
|
|
234
|
-
}
|
|
293
|
+
};
|
|
235
294
|
}
|
|
236
|
-
})
|
|
295
|
+
});
|
|
237
296
|
</script>
|
|
@@ -20,10 +20,11 @@ export const vars = {
|
|
|
20
20
|
};
|
|
21
21
|
|
|
22
22
|
export const pagination = style({
|
|
23
|
-
display: '
|
|
23
|
+
display: 'flex',
|
|
24
24
|
alignItems: 'center',
|
|
25
25
|
fontSize: themeVars.fontSize.small,
|
|
26
|
-
boxSizing: 'border-box'
|
|
26
|
+
boxSizing: 'border-box',
|
|
27
|
+
justifyContent: 'space-between'
|
|
27
28
|
});
|
|
28
29
|
|
|
29
30
|
export const buttons = style({
|