@pocketprep/ui-kit 3.1.1 → 3.1.2
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/dist/@pocketprep/ui-kit.js +1070 -1053
- package/dist/@pocketprep/ui-kit.js.map +1 -1
- package/dist/@pocketprep/ui-kit.umd.cjs +7 -7
- package/dist/@pocketprep/ui-kit.umd.cjs.map +1 -1
- package/dist/style.css +1 -1
- package/lib/components/Pagination/TablePagination.vue +59 -15
- package/package.json +1 -1
|
@@ -1,11 +1,20 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div
|
|
3
|
-
|
|
2
|
+
<div
|
|
3
|
+
v-dark="isDarkMode"
|
|
4
|
+
class="uikit-table-pagination"
|
|
5
|
+
>
|
|
6
|
+
<div
|
|
7
|
+
ref="pagination_info"
|
|
8
|
+
v-dark="isDarkMode"
|
|
9
|
+
class="uikit-table-pagination__info"
|
|
10
|
+
tabindex="-1"
|
|
11
|
+
>
|
|
4
12
|
{{ (currentPage * perPage) + 1 }} -
|
|
5
13
|
{{ nextPageDisabled ? total : (currentPage * perPage) + perPage }}
|
|
6
14
|
of {{ total }} {{ unit }} <slot />
|
|
7
15
|
</div>
|
|
8
16
|
<div
|
|
17
|
+
v-dark="isDarkMode"
|
|
9
18
|
class="uikit-table-pagination__previous"
|
|
10
19
|
:class="{ 'uikit-table-pagination__previous--disabled': currentPage === 0 }"
|
|
11
20
|
:tabindex="currentPage === 0 ? -1 : 0"
|
|
@@ -13,10 +22,12 @@
|
|
|
13
22
|
:aria-disabled="currentPage === 0"
|
|
14
23
|
@keydown.enter="changePage('previous')"
|
|
15
24
|
@click="changePage('previous')"
|
|
25
|
+
@mousedown.prevent
|
|
16
26
|
>
|
|
17
|
-
<Icon type="accordionArrow"
|
|
27
|
+
<Icon type="accordionArrow" />
|
|
18
28
|
</div>
|
|
19
29
|
<div
|
|
30
|
+
v-dark="isDarkMode"
|
|
20
31
|
class="uikit-table-pagination__next"
|
|
21
32
|
:class="{ 'uikit-table-pagination__next--disabled': nextPageDisabled }"
|
|
22
33
|
:tabindex="nextPageDisabled ? -1 : 0"
|
|
@@ -24,8 +35,9 @@
|
|
|
24
35
|
:aria-disabled="nextPageDisabled"
|
|
25
36
|
@keydown.enter="changePage('next')"
|
|
26
37
|
@click="changePage('next')"
|
|
38
|
+
@mousedown.prevent
|
|
27
39
|
>
|
|
28
|
-
<Icon type="accordionArrow"
|
|
40
|
+
<Icon type="accordionArrow" />
|
|
29
41
|
</div>
|
|
30
42
|
</div>
|
|
31
43
|
</template>
|
|
@@ -33,17 +45,22 @@
|
|
|
33
45
|
<script lang="ts">
|
|
34
46
|
import { Vue, Component, Prop, Emit } from 'vue-facing-decorator'
|
|
35
47
|
import Icon from '../Icons/Icon.vue'
|
|
48
|
+
import { dark } from '../../directives'
|
|
36
49
|
|
|
37
50
|
@Component({
|
|
38
51
|
components: {
|
|
39
52
|
Icon,
|
|
40
53
|
},
|
|
54
|
+
directives: {
|
|
55
|
+
dark,
|
|
56
|
+
},
|
|
41
57
|
})
|
|
42
58
|
export default class TablePagination extends Vue {
|
|
43
59
|
@Prop({ default: 10 }) perPage!: number
|
|
44
60
|
@Prop({ default: 0 }) currentPage!: number
|
|
45
61
|
@Prop() total!: number
|
|
46
62
|
@Prop() unit!: string
|
|
63
|
+
@Prop({ default: false }) isDarkMode!: boolean
|
|
47
64
|
|
|
48
65
|
get nextPageDisabled () {
|
|
49
66
|
return this.currentPage >= Math.floor((this.total - 1) / this.perPage)
|
|
@@ -51,6 +68,8 @@ export default class TablePagination extends Vue {
|
|
|
51
68
|
|
|
52
69
|
@Emit('changePage')
|
|
53
70
|
changePage (direction: 'next' | 'previous') {
|
|
71
|
+
const paginationInfo = this.$refs['pagination_info'] as HTMLElement
|
|
72
|
+
paginationInfo.focus()
|
|
54
73
|
if (direction === 'next') {
|
|
55
74
|
return this.nextPageDisabled ? this.currentPage : this.currentPage + 1
|
|
56
75
|
} else {
|
|
@@ -70,9 +89,16 @@ export default class TablePagination extends Vue {
|
|
|
70
89
|
font-size: 13px;
|
|
71
90
|
line-height: 18px;
|
|
72
91
|
font-weight: 500;
|
|
92
|
+
outline: none;
|
|
73
93
|
|
|
74
94
|
&__info {
|
|
95
|
+
color: $slate;
|
|
75
96
|
margin-right: 12px;
|
|
97
|
+
outline: none;
|
|
98
|
+
|
|
99
|
+
&--dark {
|
|
100
|
+
color: $white;
|
|
101
|
+
}
|
|
76
102
|
}
|
|
77
103
|
|
|
78
104
|
&__previous,
|
|
@@ -80,29 +106,47 @@ export default class TablePagination extends Vue {
|
|
|
80
106
|
color: $brand-blue;
|
|
81
107
|
cursor: pointer;
|
|
82
108
|
user-select: none;
|
|
83
|
-
width:
|
|
109
|
+
width: 16px;
|
|
110
|
+
height: 10px;
|
|
111
|
+
outline: none;
|
|
112
|
+
position: relative;
|
|
113
|
+
|
|
114
|
+
&:focus::before {
|
|
115
|
+
content: '';
|
|
116
|
+
left: -3px;
|
|
117
|
+
top: -1px;
|
|
118
|
+
position: absolute;
|
|
119
|
+
width: calc(100% + 5px);
|
|
120
|
+
height: calc(100% + 7px);
|
|
121
|
+
border-radius: 6px;
|
|
122
|
+
border: 1px solid $brand-blue;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
&--dark {
|
|
126
|
+
color: $banana-bread;
|
|
127
|
+
|
|
128
|
+
&:focus::before {
|
|
129
|
+
border-color: $banana-bread;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
84
132
|
|
|
85
133
|
&--disabled {
|
|
86
134
|
opacity: 0.35;
|
|
87
135
|
cursor: default;
|
|
88
136
|
}
|
|
137
|
+
|
|
138
|
+
svg {
|
|
139
|
+
width: 100%;
|
|
140
|
+
height: 100%;
|
|
141
|
+
}
|
|
89
142
|
}
|
|
90
143
|
|
|
91
144
|
&__previous {
|
|
92
145
|
margin-right: 4px;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
&__previous-icon,
|
|
96
|
-
&__next-icon {
|
|
97
|
-
width: 16px;
|
|
98
|
-
height: 10px;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
&__previous-icon {
|
|
102
146
|
transform: rotate(90deg);
|
|
103
147
|
}
|
|
104
148
|
|
|
105
|
-
&__next
|
|
149
|
+
&__next {
|
|
106
150
|
transform: rotate(-90deg);
|
|
107
151
|
}
|
|
108
152
|
}
|