@pocketprep/ui-kit 3.0.7 → 3.0.9
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 +3845 -3749
- 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/Forms/Radio.vue +2 -2
- package/lib/components/Loaders/SkeletonLoader.md +43 -0
- package/lib/components/Loaders/SkeletonLoader.vue +37 -0
- package/lib/components/Pagination/QuestionReviewPagination.md +19 -0
- package/lib/components/Pagination/QuestionReviewPagination.vue +120 -0
- package/lib/components/{Tables → Pagination}/TablePagination.md +1 -1
- package/lib/index.ts +5 -1
- package/package.json +1 -1
- /package/lib/components/{Tables → Pagination}/TablePagination.vue +0 -0
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
```vue
|
|
2
|
+
<template>
|
|
3
|
+
<div>
|
|
4
|
+
<div>
|
|
5
|
+
<SkeletonLoader class="skeletonLoader" />
|
|
6
|
+
</div>
|
|
7
|
+
<div>
|
|
8
|
+
<SkeletonLoader class="skeletonLoader2" />
|
|
9
|
+
</div>
|
|
10
|
+
<div>
|
|
11
|
+
<SkeletonLoader class="skeletonLoader3" />
|
|
12
|
+
</div>
|
|
13
|
+
<div>
|
|
14
|
+
<SkeletonLoader class="skeletonLoader4" />
|
|
15
|
+
</div>
|
|
16
|
+
</div>
|
|
17
|
+
</template>
|
|
18
|
+
<script>
|
|
19
|
+
|
|
20
|
+
export default {
|
|
21
|
+
}
|
|
22
|
+
</script>
|
|
23
|
+
|
|
24
|
+
<style>
|
|
25
|
+
.skeletonLoader,
|
|
26
|
+
.skeletonLoader2 {
|
|
27
|
+
height: 24px;
|
|
28
|
+
width: 60px;
|
|
29
|
+
margin-bottom: 20px;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.skeletonLoader3 {
|
|
33
|
+
height: 24px;
|
|
34
|
+
width: 80px;
|
|
35
|
+
margin-bottom: 20px;
|
|
36
|
+
}
|
|
37
|
+
.skeletonLoader4 {
|
|
38
|
+
height: 24px;
|
|
39
|
+
width: 100px;
|
|
40
|
+
margin-bottom: 20px;
|
|
41
|
+
}
|
|
42
|
+
</style>
|
|
43
|
+
```
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="uikit-skeleton-loader">
|
|
3
|
+
<slot />
|
|
4
|
+
</div>
|
|
5
|
+
</template>
|
|
6
|
+
|
|
7
|
+
<script lang="ts">
|
|
8
|
+
import { Vue, Component } from 'vue-facing-decorator'
|
|
9
|
+
|
|
10
|
+
@Component
|
|
11
|
+
export default class SkeletonLoader extends Vue {}
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<style lang="scss" scoped>
|
|
15
|
+
@import '../../styles/breakpoints';
|
|
16
|
+
@import '../../styles/colors';
|
|
17
|
+
|
|
18
|
+
.uikit-skeleton-loader {
|
|
19
|
+
// Using width and height of parent
|
|
20
|
+
border-radius: 2px;
|
|
21
|
+
animation: shimmer 2s infinite linear;
|
|
22
|
+
background: linear-gradient(to right, $fog 4%, $pearl 45%, $fog 90%);
|
|
23
|
+
|
|
24
|
+
// Can override these at parent level
|
|
25
|
+
background-size: 100px;
|
|
26
|
+
|
|
27
|
+
@keyframes shimmer {
|
|
28
|
+
0% {
|
|
29
|
+
background-position: -100px 0;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
100% {
|
|
33
|
+
background-position: 100px 0;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
</style>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
```vue
|
|
2
|
+
<template>
|
|
3
|
+
<QuestionReviewPagination :currentPage="currentPage" :total="10" @changePage="val => currentPage = val" />
|
|
4
|
+
</template>
|
|
5
|
+
<script>
|
|
6
|
+
import QuestionReviewPagination from '@/components/Pagination/QuestionReviewPagination.vue'
|
|
7
|
+
|
|
8
|
+
export default {
|
|
9
|
+
data () {
|
|
10
|
+
return {
|
|
11
|
+
currentPage: 0
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
components: {
|
|
15
|
+
QuestionReviewPagination,
|
|
16
|
+
},
|
|
17
|
+
}
|
|
18
|
+
</script>
|
|
19
|
+
```
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="uikit-question-review-pagination">
|
|
3
|
+
<div
|
|
4
|
+
class="uikit-question-review-pagination__previous"
|
|
5
|
+
:class="{
|
|
6
|
+
'uikit-question-review-pagination__previous--disabled': currentPage === 0,
|
|
7
|
+
}"
|
|
8
|
+
:tabindex="currentPage === 0 ? -1 : 0"
|
|
9
|
+
type="paginationArrow"
|
|
10
|
+
aria-label="Previous question"
|
|
11
|
+
:aria-disabled="currentPage === 0"
|
|
12
|
+
@keydown.enter="changePage('previous')"
|
|
13
|
+
@click="changePage('previous')"
|
|
14
|
+
>
|
|
15
|
+
<Icon
|
|
16
|
+
type="paginationArrow"
|
|
17
|
+
class="uikit-question-review-pagination__previous-icon"
|
|
18
|
+
/>
|
|
19
|
+
</div>
|
|
20
|
+
<span class="uikit-question-review-pagination__info">
|
|
21
|
+
{{ currentPage + 1 }} / {{ total }} <slot />
|
|
22
|
+
</span>
|
|
23
|
+
<div
|
|
24
|
+
class="uikit-question-review-pagination__next"
|
|
25
|
+
:class="{
|
|
26
|
+
'uikit-question-review-pagination__next--disabled': nextPageDisabled,
|
|
27
|
+
}"
|
|
28
|
+
:tabindex="nextPageDisabled ? -1 : 0"
|
|
29
|
+
type="paginationArrow"
|
|
30
|
+
aria-label="Next question"
|
|
31
|
+
:aria-disabled="nextPageDisabled"
|
|
32
|
+
@keydown.enter="changePage('next')"
|
|
33
|
+
@click="changePage('next')"
|
|
34
|
+
>
|
|
35
|
+
<Icon
|
|
36
|
+
type="paginationArrow"
|
|
37
|
+
class="uikit-question-review-pagination__next-icon"
|
|
38
|
+
/>
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
</template>
|
|
42
|
+
|
|
43
|
+
<script lang="ts">
|
|
44
|
+
import { Vue, Component, Prop, Emit } from 'vue-facing-decorator'
|
|
45
|
+
import Icon from '../Icons/Icon.vue'
|
|
46
|
+
|
|
47
|
+
@Component({
|
|
48
|
+
components: {
|
|
49
|
+
Icon,
|
|
50
|
+
},
|
|
51
|
+
})
|
|
52
|
+
export default class QuestionReviewPagination extends Vue {
|
|
53
|
+
@Prop({ default: 0 }) currentPage!: number
|
|
54
|
+
@Prop() total!: number
|
|
55
|
+
|
|
56
|
+
get nextPageDisabled () {
|
|
57
|
+
return this.currentPage >= Math.floor(this.total - 1)
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
@Emit('changePage')
|
|
61
|
+
changePage (direction: 'next' | 'previous') {
|
|
62
|
+
if (direction === 'next') {
|
|
63
|
+
return this.nextPageDisabled ? this.currentPage : this.currentPage + 1
|
|
64
|
+
} else {
|
|
65
|
+
return Math.max(0, this.currentPage - 1)
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
</script>
|
|
70
|
+
|
|
71
|
+
<style lang="scss" scoped>
|
|
72
|
+
@import '../../styles/breakpoints';
|
|
73
|
+
@import '../../styles/colors';
|
|
74
|
+
|
|
75
|
+
.uikit-question-review-pagination {
|
|
76
|
+
display: flex;
|
|
77
|
+
align-items: center;
|
|
78
|
+
|
|
79
|
+
&__previous-icon {
|
|
80
|
+
transform: rotate(180deg);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
&__info {
|
|
84
|
+
margin: 0 7px;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
&__previous,
|
|
88
|
+
&__next {
|
|
89
|
+
width: 24px;
|
|
90
|
+
height: 24px;
|
|
91
|
+
user-select: none;
|
|
92
|
+
|
|
93
|
+
&--disabled {
|
|
94
|
+
opacity: 0.35;
|
|
95
|
+
cursor: default;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
&:not(&--disabled) {
|
|
99
|
+
cursor: pointer;
|
|
100
|
+
|
|
101
|
+
@media (hover: hover) {
|
|
102
|
+
&:hover {
|
|
103
|
+
color: $banana-bread;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
&:focus {
|
|
108
|
+
outline: none;
|
|
109
|
+
color: $banana-bread;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
&__previous-icon,
|
|
115
|
+
&__next-icon {
|
|
116
|
+
width: 24px;
|
|
117
|
+
height: 24px;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
</style>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<TablePagination :perPage="10" unit="things" :currentPage="currentPage" :total="45" @changePage="val => currentPage = val" />
|
|
4
4
|
</template>
|
|
5
5
|
<script>
|
|
6
|
-
import TablePagination from '
|
|
6
|
+
import TablePagination from '@/components/Pagination/TablePagination.vue'
|
|
7
7
|
|
|
8
8
|
export default {
|
|
9
9
|
data () {
|
package/lib/index.ts
CHANGED
|
@@ -21,7 +21,9 @@ import Icon from './components/Icons/Icon.vue'
|
|
|
21
21
|
import BundleIcon from './components/BundleIcons/BundleIcon.vue'
|
|
22
22
|
import Table from './components/Tables/Table.vue'
|
|
23
23
|
import TableActions from './components/Tables/TableActions.vue'
|
|
24
|
-
import TablePagination from './components/
|
|
24
|
+
import TablePagination from './components/Pagination/TablePagination.vue'
|
|
25
|
+
import QuestionReviewPagination from './components/Pagination/QuestionReviewPagination.vue'
|
|
26
|
+
import SkeletonLoader from './components/Loaders/SkeletonLoader.vue'
|
|
25
27
|
import Search from './components/Search/Search.vue'
|
|
26
28
|
import Pill from './components/Search/Pill.vue'
|
|
27
29
|
import PhonePerson from './components/PhonePerson/PhonePerson.vue'
|
|
@@ -75,6 +77,8 @@ const components = {
|
|
|
75
77
|
Table,
|
|
76
78
|
TableActions,
|
|
77
79
|
TablePagination,
|
|
80
|
+
QuestionReviewPagination,
|
|
81
|
+
SkeletonLoader,
|
|
78
82
|
Search,
|
|
79
83
|
Pill,
|
|
80
84
|
PhonePerson,
|
package/package.json
CHANGED
|
File without changes
|