classcard-ui 0.2.387 → 0.2.390

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 (173) hide show
  1. package/README.md +24 -24
  2. package/dist/classcard-ui.common.js +101 -61
  3. package/dist/classcard-ui.common.js.map +1 -1
  4. package/dist/classcard-ui.css +1 -1
  5. package/dist/classcard-ui.umd.js +101 -61
  6. package/dist/classcard-ui.umd.js.map +1 -1
  7. package/dist/classcard-ui.umd.min.js +1 -1
  8. package/dist/classcard-ui.umd.min.js.map +1 -1
  9. package/package.json +79 -79
  10. package/src/App.vue +16 -16
  11. package/src/components/CAlerts/CAlerts.vue +70 -70
  12. package/src/components/CAlerts/index.js +2 -2
  13. package/src/components/CAnchorTabs/CAnchorTabs.vue +98 -98
  14. package/src/components/CAnchorTabs/index.js +2 -2
  15. package/src/components/CAnchorTag/CAnchorTag.vue +62 -62
  16. package/src/components/CAnchorTag/index.js +2 -2
  17. package/src/components/CAvatar/CAvatar.vue +89 -89
  18. package/src/components/CAvatar/index.js +2 -2
  19. package/src/components/CAvatarGroup/CAvatarGroup.vue +145 -145
  20. package/src/components/CAvatarGroup/index.js +2 -2
  21. package/src/components/CBasicTable/CBasicTable.vue +184 -184
  22. package/src/components/CBasicTable/index.js +2 -2
  23. package/src/components/CBreadcrumbs/CBreadcrumbs.vue +38 -38
  24. package/src/components/CBreadcrumbs/index.js +2 -2
  25. package/src/components/CButton/CButton.vue +121 -121
  26. package/src/components/CButton/index.js +2 -2
  27. package/src/components/CButtonGroup/CButtonGroup.vue +100 -100
  28. package/src/components/CButtonGroup/index.js +2 -2
  29. package/src/components/CButtonIcon/CButtonIcon.vue +82 -82
  30. package/src/components/CButtonIcon/index.js +2 -2
  31. package/src/components/CButtonLink/CButtonLink.vue +39 -39
  32. package/src/components/CButtonLink/index.js +2 -2
  33. package/src/components/CButtonSelect/CButtonSelect.vue +103 -103
  34. package/src/components/CButtonSelect/index.js +2 -2
  35. package/src/components/CButtonWithDropdown/CButtonWithDropdown.vue +168 -168
  36. package/src/components/CButtonWithDropdown/index.js +2 -2
  37. package/src/components/CCard/CCard.vue +49 -49
  38. package/src/components/CCard/index.js +2 -2
  39. package/src/components/CCheckbox/CCheckbox.vue +61 -61
  40. package/src/components/CCheckbox/index.js +2 -2
  41. package/src/components/CCollapsibleSection/CCollapsibleSection.vue +99 -99
  42. package/src/components/CCollapsibleSection/index.js +2 -2
  43. package/src/components/CColorDots/CColorDots.vue +35 -35
  44. package/src/components/CColorDots/index.js +3 -3
  45. package/src/components/CConfirmActionModal/CConfirmActionModal.vue +116 -116
  46. package/src/components/CConfirmActionModal/index.js +3 -3
  47. package/src/components/CDatepicker/CDatepicker.vue +134 -134
  48. package/src/components/CDatepicker/index.js +2 -2
  49. package/src/components/CDualSelect/CDualSelect.vue +193 -193
  50. package/src/components/CDualSelect/index.js +2 -2
  51. package/src/components/CEditor/CEditor.vue +91 -91
  52. package/src/components/CEditor/index.js +2 -2
  53. package/src/components/CFormSectionHeading/CFormSectionHeading.vue +52 -52
  54. package/src/components/CFormSectionHeading/index.js +2 -2
  55. package/src/components/CGroupedSelect/CGroupedSelect.vue +212 -212
  56. package/src/components/CGroupedSelect/index.js +3 -3
  57. package/src/components/CIcon/CIcon.vue +70 -70
  58. package/src/components/CIcon/index.js +2 -2
  59. package/src/components/CIconDropdown/CIconDropdown.vue +90 -90
  60. package/src/components/CIconDropdown/index.js +2 -2
  61. package/src/components/CInput/CInput.vue +110 -110
  62. package/src/components/CInput/index.js +2 -2
  63. package/src/components/CInputAddon/CInputAddon.vue +199 -199
  64. package/src/components/CInputAddon/index.js +2 -2
  65. package/src/components/CInputEmail/CInputEmail.vue +84 -84
  66. package/src/components/CInputEmail/index.js +2 -2
  67. package/src/components/CModalHeading/CModalHeading.vue +22 -22
  68. package/src/components/CModalHeading/index.js +2 -2
  69. package/src/components/CModuleHelpLinks/CModuleHelpLinks.vue +39 -39
  70. package/src/components/CModuleHelpLinks/index.js +3 -3
  71. package/src/components/CMultiselect/CMultiselect.vue +318 -276
  72. package/src/components/CMultiselect/index.js +2 -2
  73. package/src/components/CMultiselectr/CMultiselectr.vue +44 -44
  74. package/src/components/CMultiselectr/index.js +2 -2
  75. package/src/components/CPageHeading/CPageHeading.vue +52 -52
  76. package/src/components/CPageHeading/index.js +2 -2
  77. package/src/components/CPagination/CPagination.vue +192 -192
  78. package/src/components/CPagination/index.js +2 -2
  79. package/src/components/CPhoneNumber/CPhoneNumber.vue +62 -62
  80. package/src/components/CPhoneNumber/index.js +2 -2
  81. package/src/components/CRadio/CRadio.vue +70 -70
  82. package/src/components/CRadio/index.js +2 -2
  83. package/src/components/CRangeSlider/CRangeSlider.vue +55 -55
  84. package/src/components/CRangeSlider/index.js +2 -2
  85. package/src/components/CReorderableStackedList/CReorderableStackedList.vue +89 -89
  86. package/src/components/CReorderableStackedList/index.js +2 -2
  87. package/src/components/CSelect/CSelect.vue +271 -271
  88. package/src/components/CSelect/index.js +2 -2
  89. package/src/components/CSmallTimeline/CSmallTimeline.vue +40 -40
  90. package/src/components/CSmallTimeline/index.js +2 -2
  91. package/src/components/CStackedList/CStackedList.vue +77 -77
  92. package/src/components/CStackedList/index.js +2 -2
  93. package/src/components/CStats/CStats.vue +88 -88
  94. package/src/components/CStats/index.js +2 -2
  95. package/src/components/CSwitch/CSwitch.vue +132 -132
  96. package/src/components/CSwitch/index.js +2 -2
  97. package/src/components/CTable/CTable.vue +448 -448
  98. package/src/components/CTable/index.js +2 -2
  99. package/src/components/CTabs/CTabs.vue +109 -109
  100. package/src/components/CTabs/index.js +2 -2
  101. package/src/components/CTag/CTag.vue +36 -36
  102. package/src/components/CTag/index.js +2 -2
  103. package/src/components/CTextarea/CTextarea.vue +85 -85
  104. package/src/components/CTextarea/index.js +2 -2
  105. package/src/components/CTimeline/CTimeline.vue +237 -237
  106. package/src/components/CTimeline/index.js +2 -2
  107. package/src/components/CUpload/CUpload.vue +122 -122
  108. package/src/components/CUpload/index.js +2 -2
  109. package/src/components/index.js +47 -47
  110. package/src/icons.js +231 -231
  111. package/src/main.js +17 -17
  112. package/src/stories/CAlerts.stories.js +37 -37
  113. package/src/stories/CAnchorTabs.stories.js +29 -29
  114. package/src/stories/CAnchorTag.stories.js +36 -36
  115. package/src/stories/CAvatar.stories.js +38 -38
  116. package/src/stories/CAvatarGroup.stories.js +100 -100
  117. package/src/stories/CBasicTable.stories.js +316 -316
  118. package/src/stories/CBreadcrumbs.stories.js +24 -24
  119. package/src/stories/CButton.stories.js +46 -46
  120. package/src/stories/CButtonGroup.stories.js +33 -33
  121. package/src/stories/CButtonIcon.stories.js +27 -27
  122. package/src/stories/CButtonLink.stories.js +24 -24
  123. package/src/stories/CButtonSelect.stories.js +32 -32
  124. package/src/stories/CButtonWithDropdown.stories.js +41 -41
  125. package/src/stories/CCard.stories.js +30 -30
  126. package/src/stories/CCheckbox.stories.js +29 -29
  127. package/src/stories/CCollapsibleSection.stories.js +28 -28
  128. package/src/stories/CColorDots.stories.js +28 -28
  129. package/src/stories/CConfirmActionModal.stories.js +59 -59
  130. package/src/stories/CDatepicker.stories.js +30 -30
  131. package/src/stories/CDualSelect.stories.js +29 -29
  132. package/src/stories/CEditor.stories.js +30 -30
  133. package/src/stories/CFormSectionHeading.stories.js +34 -34
  134. package/src/stories/CGroupedSelect.stories.js +69 -69
  135. package/src/stories/CIcon.stories.js +26 -26
  136. package/src/stories/CIconDropdown.stories.js +39 -39
  137. package/src/stories/CInput.stories.js +36 -36
  138. package/src/stories/CInputAddon.stories.js +37 -37
  139. package/src/stories/CInputEmail.stories.js +27 -27
  140. package/src/stories/CModalHeading.stories.js +25 -25
  141. package/src/stories/CModuleHelpLinks.stories.js +25 -25
  142. package/src/stories/CMultiselect.stories.js +97 -97
  143. package/src/stories/CMultiselectr.stories.js +23 -23
  144. package/src/stories/CPageHeading.stories.js +32 -32
  145. package/src/stories/CPagination.stories.js +30 -30
  146. package/src/stories/CPhoneNumber.stories.js +29 -29
  147. package/src/stories/CRadio.stories.js +36 -36
  148. package/src/stories/CRangeSlider.stories.js +23 -23
  149. package/src/stories/CReorderableStackedList.stories.js +23 -23
  150. package/src/stories/CSelect.stories.js +50 -50
  151. package/src/stories/CSmallTimeline.stories.js +26 -26
  152. package/src/stories/CStackedList.stories.js +25 -25
  153. package/src/stories/CStats.stories.js +33 -33
  154. package/src/stories/CSwitch.stories.js +28 -28
  155. package/src/stories/CTable.stories.js +77 -77
  156. package/src/stories/CTabs.stories.js +29 -29
  157. package/src/stories/CTag.stories.js +23 -23
  158. package/src/stories/CTextarea.stories.js +32 -32
  159. package/src/stories/CTimeline.stories.js +26 -26
  160. package/src/stories/CUpload.stories.js +36 -36
  161. package/src/stories/Introduction.stories.mdx +207 -207
  162. package/src/stories/Page.vue +88 -88
  163. package/src/stories/assets/code-brackets.svg +0 -0
  164. package/src/stories/assets/colors.svg +0 -0
  165. package/src/stories/assets/comments.svg +0 -0
  166. package/src/stories/assets/direction.svg +0 -0
  167. package/src/stories/assets/flow.svg +0 -0
  168. package/src/stories/assets/plugin.svg +0 -0
  169. package/src/stories/assets/repo.svg +0 -0
  170. package/src/stories/assets/stackalt.svg +0 -0
  171. package/src/stories/header.css +26 -26
  172. package/src/stories/page.css +69 -69
  173. package/src/stories/utils.css +17 -17
@@ -1,44 +1,44 @@
1
- <template>
2
- <div>
3
- <!-- <label class="text-sm text-gray-900">{{label}}</label>
4
- <multiselect class="mt-1" v-model="value" :options="options" :multiple="true">
5
- </multiselect> -->
6
- </div>
7
- </template>
8
- <script>
9
-
10
- export default {
11
- // name: "CMultiselect",
12
- // components: { Multiselect },
13
- // props: {
14
- // options: {
15
- // type: Array,
16
- // required: true,
17
- // },
18
- // label:String
19
- // },
20
- // computed: {},
21
- // data() {
22
- // return {
23
- // value: [],
24
- // };
25
- // },
26
- };
27
- </script>
28
- <style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
29
- <style>
30
- .multiselect__tags {
31
- border: 1px solid #d1d5db;
32
- }
33
- .multiselect__placeholder {
34
- color: #111827;
35
- }
36
- .multiselect__tag,
37
- .multiselect__tag-icon:after,
38
- .multiselect__tag-icon:hover,
39
- .multiselect__option--highlight,
40
- .multiselect__option--highlight::after {
41
- background: #0369A1;
42
- color: #fff;
43
- }
44
- </style>
1
+ <template>
2
+ <div>
3
+ <!-- <label class="text-sm text-gray-900">{{label}}</label>
4
+ <multiselect class="mt-1" v-model="value" :options="options" :multiple="true">
5
+ </multiselect> -->
6
+ </div>
7
+ </template>
8
+ <script>
9
+
10
+ export default {
11
+ // name: "CMultiselect",
12
+ // components: { Multiselect },
13
+ // props: {
14
+ // options: {
15
+ // type: Array,
16
+ // required: true,
17
+ // },
18
+ // label:String
19
+ // },
20
+ // computed: {},
21
+ // data() {
22
+ // return {
23
+ // value: [],
24
+ // };
25
+ // },
26
+ };
27
+ </script>
28
+ <style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
29
+ <style>
30
+ .multiselect__tags {
31
+ border: 1px solid #d1d5db;
32
+ }
33
+ .multiselect__placeholder {
34
+ color: #111827;
35
+ }
36
+ .multiselect__tag,
37
+ .multiselect__tag-icon:after,
38
+ .multiselect__tag-icon:hover,
39
+ .multiselect__option--highlight,
40
+ .multiselect__option--highlight::after {
41
+ background: #0369A1;
42
+ color: #fff;
43
+ }
44
+ </style>
@@ -1,3 +1,3 @@
1
- import CMultiselect from './CMultiselect.vue'
2
-
1
+ import CMultiselect from './CMultiselect.vue'
2
+
3
3
  export default CMultiselect
@@ -1,52 +1,52 @@
1
- <template>
2
- <div class="sticky top-0 z-10 bg-white">
3
- <div class="flex justify-between items-center pt-4 pb-1 w-full">
4
- <div>
5
- <h2 class="text-xl font-bold leading-7 text-gray-900 sm:text-xl sm:truncate">
6
- {{ title }}
7
- </h2>
8
- </div>
9
- <div class="justify-self-end">
10
- <slot></slot>
11
- <div v-if="buttonType" class="mt-5 flex lg:mt-0 lg:ml-4">
12
- <span class="sm:ml-3">
13
- <c-button
14
- :label="buttonType.label"
15
- :icon="buttonType.icon"
16
- :type="buttonType.type"
17
- @action="emitAction"
18
- ></c-button>
19
- </span>
20
- </div>
21
- </div>
22
- </div>
23
- </div>
24
- </template>
25
-
26
- <script>
27
- import CButton from "../CButton/CButton.vue";
28
- export default {
29
- name: "CPageHeading",
30
- components: { CButton },
31
- props: {
32
- title: {
33
- type: String,
34
- required: true,
35
- },
36
- description: { type: String },
37
- helpVideo: {
38
- type: String,
39
- },
40
- helpArticle: { type: String },
41
- buttonType: { type: Object },
42
- callAction: {
43
- type: Function,
44
- },
45
- },
46
- methods: {
47
- emitAction() {
48
- this.$emit("callAction");
49
- },
50
- },
51
- };
52
- </script>
1
+ <template>
2
+ <div class="sticky top-0 z-10 bg-white">
3
+ <div class="flex justify-between items-center pt-4 pb-1 w-full">
4
+ <div>
5
+ <h2 class="text-xl font-bold leading-7 text-gray-900 sm:text-xl sm:truncate">
6
+ {{ title }}
7
+ </h2>
8
+ </div>
9
+ <div class="justify-self-end">
10
+ <slot></slot>
11
+ <div v-if="buttonType" class="mt-5 flex lg:mt-0 lg:ml-4">
12
+ <span class="sm:ml-3">
13
+ <c-button
14
+ :label="buttonType.label"
15
+ :icon="buttonType.icon"
16
+ :type="buttonType.type"
17
+ @action="emitAction"
18
+ ></c-button>
19
+ </span>
20
+ </div>
21
+ </div>
22
+ </div>
23
+ </div>
24
+ </template>
25
+
26
+ <script>
27
+ import CButton from "../CButton/CButton.vue";
28
+ export default {
29
+ name: "CPageHeading",
30
+ components: { CButton },
31
+ props: {
32
+ title: {
33
+ type: String,
34
+ required: true,
35
+ },
36
+ description: { type: String },
37
+ helpVideo: {
38
+ type: String,
39
+ },
40
+ helpArticle: { type: String },
41
+ buttonType: { type: Object },
42
+ callAction: {
43
+ type: Function,
44
+ },
45
+ },
46
+ methods: {
47
+ emitAction() {
48
+ this.$emit("callAction");
49
+ },
50
+ },
51
+ };
52
+ </script>
@@ -1,3 +1,3 @@
1
- import CPageHeading from './CPageHeading.vue'
2
-
1
+ import CPageHeading from './CPageHeading.vue'
2
+
3
3
  export default CPageHeading
@@ -1,192 +1,192 @@
1
- <template>
2
- <div
3
- class="bg-white px-4 py-3 flex items-center justify-between border-gray-200 sm:px-6"
4
- >
5
- <div class="flex-1 flex justify-between sm:hidden">
6
- <a
7
- href="#"
8
- class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
9
- >
10
- Previous
11
- </a>
12
- <a
13
- href="#"
14
- class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
15
- >
16
- Next
17
- </a>
18
- </div>
19
- <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
20
- <div>
21
- <p class="text-sm text-gray-700">
22
- Showing
23
- <span class="font-medium">{{ setPaginationRecords.from }}</span>
24
- to
25
- <span class="font-medium">{{ setPaginationRecords.to }}</span>
26
- of
27
- <span class="font-medium">{{ setPaginationRecords.totalRecords }}</span>
28
- results
29
- </p>
30
- </div>
31
- <div>
32
- <nav
33
- class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
34
- aria-label="Pagination"
35
- >
36
- <div class="hidden md:-mt-px md:flex">
37
- <div
38
- href="#"
39
- @click="currentPageNumber == '1' ? '' : goToPreviousPage()"
40
- class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-r-0 border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
41
- :class="
42
- currentPageNumber == '1'
43
- ? 'text-gray-400 pointer-events-none'
44
- : 'text-gray-500 hover:text-gray-700 group cursor-pointer'
45
- "
46
- >
47
- <span class="sr-only">Previous</span>
48
- <!-- Heroicon name: solid/chevron-left -->
49
- <svg
50
- class="h-5 w-5"
51
- xmlns="http://www.w3.org/2000/svg"
52
- viewBox="0 0 20 20"
53
- fill="currentColor"
54
- aria-hidden="true"
55
- >
56
- <path
57
- fill-rule="evenodd"
58
- d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
59
- clip-rule="evenodd"
60
- />
61
- </svg>
62
- </div>
63
- <div
64
- v-for="page in pageRange"
65
- :key="page"
66
- class="cursor-pointer"
67
- :class="[
68
- page == currentPageNumber
69
- ? 'z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium'
70
- : '',
71
- page === '...'
72
- ? 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border border-r-0 text-sm font-medium'
73
- : '',
74
- page !== currentPageNumber && page !== '...'
75
- ? 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border border-r-0 text-sm font-medium'
76
- : '',
77
- page == currentPageNumber + 1
78
- ? 'border-l-0'
79
- : '',
80
- ]"
81
- @click="changePage(page)"
82
- >
83
- <div v-if="page === '...'">...</div>
84
- <div v-else>
85
- {{ page }}
86
- </div>
87
- </div>
88
- <div
89
- href="#"
90
- class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
91
- @click="currentPageNumber == lastPageNumber ? '' : goToNextPage()"
92
- :class="
93
- currentPageNumber == lastPageNumber
94
- ? 'text-gray-400 pointer-events-none'
95
- : 'text-gray-500 hover:text-gray-700 group cursor-pointer'
96
- "
97
- >
98
- <span class="sr-only">Next</span>
99
- <!-- Heroicon name: solid/chevron-right -->
100
- <svg
101
- class="h-5 w-5"
102
- xmlns="http://www.w3.org/2000/svg"
103
- viewBox="0 0 20 20"
104
- fill="currentColor"
105
- aria-hidden="true"
106
- >
107
- <path
108
- fill-rule="evenodd"
109
- d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
110
- clip-rule="evenodd"
111
- />
112
- </svg>
113
- </div>
114
- </div>
115
- </nav>
116
- </div>
117
- </div>
118
- </div>
119
- </template>
120
- <script>
121
- export default {
122
- name: "CPagination",
123
- props: {
124
- setPaginationRecords: {
125
- type: Object,
126
- },
127
- setCurrentPage: {
128
- type: Function,
129
- },
130
- setPreviousPage: {
131
- type: Function,
132
- },
133
- setNextPage: {
134
- type: Function,
135
- },
136
- },
137
- components: {},
138
- data() {
139
- return {
140
- currentPageNumber: this.setPaginationRecords.currentPage,
141
- lastPageNumber: this.setPaginationRecords.lastPage,
142
- };
143
- },
144
- computed: {
145
- pageRange() {
146
- var current = this.setPaginationRecords.currentPage,
147
- last = this.setPaginationRecords.lastPage,
148
- delta = 2,
149
- left = current - delta,
150
- right = current + delta + 1,
151
- range = [],
152
- rangeWithDots = [],
153
- l;
154
- for (let i = 1; i <= last; i++) {
155
- if (i == 1 || i == last || (i >= left && i < right)) {
156
- range.push(i);
157
- }
158
- }
159
- for (let i of range) {
160
- if (l) {
161
- if (i - l === 2) {
162
- rangeWithDots.push(l + 1);
163
- } else if (i - l !== 1) {
164
- rangeWithDots.push("...");
165
- }
166
- }
167
- rangeWithDots.push(i);
168
- l = i;
169
- }
170
- return rangeWithDots;
171
- },
172
- },
173
- methods: {
174
- changePage(page) {
175
- if (page !== "...") {
176
- this.$emit("setCurrentPage", page);
177
- this.currentPageNumber = page;
178
- }
179
- },
180
- goToPreviousPage() {
181
- var previousPage = this.currentPageNumber - 1;
182
- this.currentPageNumber = previousPage;
183
- this.$emit("setPreviousPage", previousPage);
184
- },
185
- goToNextPage() {
186
- var nextPage = this.currentPageNumber + 1;
187
- this.currentPageNumber = nextPage;
188
- this.$emit("setNextPage", nextPage);
189
- },
190
- },
191
- };
192
- </script>
1
+ <template>
2
+ <div
3
+ class="bg-white px-4 py-3 flex items-center justify-between border-gray-200 sm:px-6"
4
+ >
5
+ <div class="flex-1 flex justify-between sm:hidden">
6
+ <a
7
+ href="#"
8
+ class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
9
+ >
10
+ Previous
11
+ </a>
12
+ <a
13
+ href="#"
14
+ class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
15
+ >
16
+ Next
17
+ </a>
18
+ </div>
19
+ <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
20
+ <div>
21
+ <p class="text-sm text-gray-700">
22
+ Showing
23
+ <span class="font-medium">{{ setPaginationRecords.from }}</span>
24
+ to
25
+ <span class="font-medium">{{ setPaginationRecords.to }}</span>
26
+ of
27
+ <span class="font-medium">{{ setPaginationRecords.totalRecords }}</span>
28
+ results
29
+ </p>
30
+ </div>
31
+ <div>
32
+ <nav
33
+ class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
34
+ aria-label="Pagination"
35
+ >
36
+ <div class="hidden md:-mt-px md:flex">
37
+ <div
38
+ href="#"
39
+ @click="currentPageNumber == '1' ? '' : goToPreviousPage()"
40
+ class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-r-0 border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
41
+ :class="
42
+ currentPageNumber == '1'
43
+ ? 'text-gray-400 pointer-events-none'
44
+ : 'text-gray-500 hover:text-gray-700 group cursor-pointer'
45
+ "
46
+ >
47
+ <span class="sr-only">Previous</span>
48
+ <!-- Heroicon name: solid/chevron-left -->
49
+ <svg
50
+ class="h-5 w-5"
51
+ xmlns="http://www.w3.org/2000/svg"
52
+ viewBox="0 0 20 20"
53
+ fill="currentColor"
54
+ aria-hidden="true"
55
+ >
56
+ <path
57
+ fill-rule="evenodd"
58
+ d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
59
+ clip-rule="evenodd"
60
+ />
61
+ </svg>
62
+ </div>
63
+ <div
64
+ v-for="page in pageRange"
65
+ :key="page"
66
+ class="cursor-pointer"
67
+ :class="[
68
+ page == currentPageNumber
69
+ ? 'z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium'
70
+ : '',
71
+ page === '...'
72
+ ? 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border border-r-0 text-sm font-medium'
73
+ : '',
74
+ page !== currentPageNumber && page !== '...'
75
+ ? 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border border-r-0 text-sm font-medium'
76
+ : '',
77
+ page == currentPageNumber + 1
78
+ ? 'border-l-0'
79
+ : '',
80
+ ]"
81
+ @click="changePage(page)"
82
+ >
83
+ <div v-if="page === '...'">...</div>
84
+ <div v-else>
85
+ {{ page }}
86
+ </div>
87
+ </div>
88
+ <div
89
+ href="#"
90
+ class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
91
+ @click="currentPageNumber == lastPageNumber ? '' : goToNextPage()"
92
+ :class="
93
+ currentPageNumber == lastPageNumber
94
+ ? 'text-gray-400 pointer-events-none'
95
+ : 'text-gray-500 hover:text-gray-700 group cursor-pointer'
96
+ "
97
+ >
98
+ <span class="sr-only">Next</span>
99
+ <!-- Heroicon name: solid/chevron-right -->
100
+ <svg
101
+ class="h-5 w-5"
102
+ xmlns="http://www.w3.org/2000/svg"
103
+ viewBox="0 0 20 20"
104
+ fill="currentColor"
105
+ aria-hidden="true"
106
+ >
107
+ <path
108
+ fill-rule="evenodd"
109
+ d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
110
+ clip-rule="evenodd"
111
+ />
112
+ </svg>
113
+ </div>
114
+ </div>
115
+ </nav>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ </template>
120
+ <script>
121
+ export default {
122
+ name: "CPagination",
123
+ props: {
124
+ setPaginationRecords: {
125
+ type: Object,
126
+ },
127
+ setCurrentPage: {
128
+ type: Function,
129
+ },
130
+ setPreviousPage: {
131
+ type: Function,
132
+ },
133
+ setNextPage: {
134
+ type: Function,
135
+ },
136
+ },
137
+ components: {},
138
+ data() {
139
+ return {
140
+ currentPageNumber: this.setPaginationRecords.currentPage,
141
+ lastPageNumber: this.setPaginationRecords.lastPage,
142
+ };
143
+ },
144
+ computed: {
145
+ pageRange() {
146
+ var current = this.setPaginationRecords.currentPage,
147
+ last = this.setPaginationRecords.lastPage,
148
+ delta = 2,
149
+ left = current - delta,
150
+ right = current + delta + 1,
151
+ range = [],
152
+ rangeWithDots = [],
153
+ l;
154
+ for (let i = 1; i <= last; i++) {
155
+ if (i == 1 || i == last || (i >= left && i < right)) {
156
+ range.push(i);
157
+ }
158
+ }
159
+ for (let i of range) {
160
+ if (l) {
161
+ if (i - l === 2) {
162
+ rangeWithDots.push(l + 1);
163
+ } else if (i - l !== 1) {
164
+ rangeWithDots.push("...");
165
+ }
166
+ }
167
+ rangeWithDots.push(i);
168
+ l = i;
169
+ }
170
+ return rangeWithDots;
171
+ },
172
+ },
173
+ methods: {
174
+ changePage(page) {
175
+ if (page !== "...") {
176
+ this.$emit("setCurrentPage", page);
177
+ this.currentPageNumber = page;
178
+ }
179
+ },
180
+ goToPreviousPage() {
181
+ var previousPage = this.currentPageNumber - 1;
182
+ this.currentPageNumber = previousPage;
183
+ this.$emit("setPreviousPage", previousPage);
184
+ },
185
+ goToNextPage() {
186
+ var nextPage = this.currentPageNumber + 1;
187
+ this.currentPageNumber = nextPage;
188
+ this.$emit("setNextPage", nextPage);
189
+ },
190
+ },
191
+ };
192
+ </script>
@@ -1,3 +1,3 @@
1
- import CPagination from './CPagination.vue'
2
-
1
+ import CPagination from './CPagination.vue'
2
+
3
3
  export default CPagination