classcard-ui 0.2.391 → 0.2.394
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/classcard-ui.common.js +2877 -497
- package/dist/classcard-ui.common.js.map +1 -1
- package/dist/classcard-ui.css +1 -1
- package/dist/classcard-ui.umd.js +2877 -497
- package/dist/classcard-ui.umd.js.map +1 -1
- package/dist/classcard-ui.umd.min.js +7 -7
- package/dist/classcard-ui.umd.min.js.map +1 -1
- package/package.json +5 -5
- package/src/components/CMultiselect/CMultiselect.vue +1 -1
- package/src/components/CPagination/CPagination.vue +29 -19
- package/src/components/CTable/CTable.vue +34 -9
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "classcard-ui",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.394",
|
|
4
4
|
"main": "dist/classcard-ui.common.js",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"serve": "vue-cli-service serve",
|
|
@@ -37,10 +37,10 @@
|
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"@babel/core": "^7.15.5",
|
|
40
|
-
"@storybook/addon-actions": "^6.4.
|
|
41
|
-
"@storybook/addon-essentials": "^6.4.
|
|
42
|
-
"@storybook/addon-links": "^6.4.
|
|
43
|
-
"@storybook/vue": "^6.4.
|
|
40
|
+
"@storybook/addon-actions": "^6.4.21",
|
|
41
|
+
"@storybook/addon-essentials": "^6.4.21",
|
|
42
|
+
"@storybook/addon-links": "^6.4.21",
|
|
43
|
+
"@storybook/vue": "^6.4.21",
|
|
44
44
|
"@tailwindcss/postcss7-compat": "^2.2.14",
|
|
45
45
|
"@types/lodash-es": "^4.17.5",
|
|
46
46
|
"@vue/cli-plugin-babel": "^4.5.13",
|
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div
|
|
3
|
-
class="
|
|
3
|
+
class="flex items-center justify-between border-gray-200 bg-white px-4 py-3 sm:px-6"
|
|
4
4
|
>
|
|
5
|
-
<div class="flex-1
|
|
5
|
+
<div class="flex flex-1 justify-between sm:hidden">
|
|
6
6
|
<a
|
|
7
7
|
href="#"
|
|
8
|
-
class="relative inline-flex items-center
|
|
8
|
+
class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
|
|
9
9
|
>
|
|
10
10
|
Previous
|
|
11
11
|
</a>
|
|
12
12
|
<a
|
|
13
13
|
href="#"
|
|
14
|
-
class="ml-3
|
|
14
|
+
class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
|
|
15
15
|
>
|
|
16
16
|
Next
|
|
17
17
|
</a>
|
|
18
18
|
</div>
|
|
19
|
-
<div class="hidden sm:flex
|
|
19
|
+
<div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
|
|
20
20
|
<div>
|
|
21
21
|
<p class="text-sm text-gray-700">
|
|
22
22
|
Showing
|
|
@@ -24,24 +24,26 @@
|
|
|
24
24
|
to
|
|
25
25
|
<span class="font-medium">{{ setPaginationRecords.to }}</span>
|
|
26
26
|
of
|
|
27
|
-
<span class="font-medium">{{
|
|
27
|
+
<span class="font-medium">{{
|
|
28
|
+
setPaginationRecords.totalRecords
|
|
29
|
+
}}</span>
|
|
28
30
|
results
|
|
29
31
|
</p>
|
|
30
32
|
</div>
|
|
31
33
|
<div>
|
|
32
34
|
<nav
|
|
33
|
-
class="relative z-0 inline-flex rounded-md shadow-sm
|
|
35
|
+
class="relative z-0 inline-flex -space-x-px rounded-md shadow-sm"
|
|
34
36
|
aria-label="Pagination"
|
|
35
37
|
>
|
|
36
38
|
<div class="hidden md:-mt-px md:flex">
|
|
37
39
|
<div
|
|
38
40
|
href="#"
|
|
39
41
|
@click="currentPageNumber == '1' ? '' : goToPreviousPage()"
|
|
40
|
-
class="relative inline-flex items-center
|
|
42
|
+
class="relative inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
|
|
41
43
|
:class="
|
|
42
44
|
currentPageNumber == '1'
|
|
43
|
-
? 'text-gray-400
|
|
44
|
-
: 'text-gray-500 hover:text-gray-700
|
|
45
|
+
? 'pointer-events-none text-gray-400'
|
|
46
|
+
: 'group cursor-pointer text-gray-500 hover:text-gray-700'
|
|
45
47
|
"
|
|
46
48
|
>
|
|
47
49
|
<span class="sr-only">Previous</span>
|
|
@@ -66,17 +68,15 @@
|
|
|
66
68
|
class="cursor-pointer"
|
|
67
69
|
:class="[
|
|
68
70
|
page == currentPageNumber
|
|
69
|
-
? 'z-10
|
|
71
|
+
? 'relative z-10 inline-flex items-center border border-indigo-500 bg-indigo-50 px-4 py-2 text-sm font-medium text-indigo-600'
|
|
70
72
|
: '',
|
|
71
73
|
page === '...'
|
|
72
|
-
? '
|
|
74
|
+
? 'relative inline-flex items-center border border-r-0 border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50'
|
|
73
75
|
: '',
|
|
74
76
|
page !== currentPageNumber && page !== '...'
|
|
75
|
-
? '
|
|
76
|
-
: '',
|
|
77
|
-
page == currentPageNumber + 1
|
|
78
|
-
? 'border-l-0'
|
|
77
|
+
? 'relative inline-flex items-center border border-r-0 border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50'
|
|
79
78
|
: '',
|
|
79
|
+
page == currentPageNumber + 1 ? 'border-l-0' : '',
|
|
80
80
|
]"
|
|
81
81
|
@click="changePage(page)"
|
|
82
82
|
>
|
|
@@ -87,12 +87,12 @@
|
|
|
87
87
|
</div>
|
|
88
88
|
<div
|
|
89
89
|
href="#"
|
|
90
|
-
class="relative inline-flex items-center
|
|
90
|
+
class="relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
|
|
91
91
|
@click="currentPageNumber == lastPageNumber ? '' : goToNextPage()"
|
|
92
92
|
:class="
|
|
93
93
|
currentPageNumber == lastPageNumber
|
|
94
|
-
? 'text-gray-400
|
|
95
|
-
: 'text-gray-500 hover:text-gray-700
|
|
94
|
+
? 'pointer-events-none text-gray-400'
|
|
95
|
+
: 'group cursor-pointer text-gray-500 hover:text-gray-700'
|
|
96
96
|
"
|
|
97
97
|
>
|
|
98
98
|
<span class="sr-only">Next</span>
|
|
@@ -118,6 +118,8 @@
|
|
|
118
118
|
</div>
|
|
119
119
|
</template>
|
|
120
120
|
<script>
|
|
121
|
+
import { isEqual } from "lodash-es";
|
|
122
|
+
|
|
121
123
|
export default {
|
|
122
124
|
name: "CPagination",
|
|
123
125
|
props: {
|
|
@@ -188,5 +190,13 @@ export default {
|
|
|
188
190
|
this.$emit("setNextPage", nextPage);
|
|
189
191
|
},
|
|
190
192
|
},
|
|
193
|
+
watch: {
|
|
194
|
+
setPaginationRecords(newVal, oldVal) {
|
|
195
|
+
if (!isEqual(newVal, oldVal)) {
|
|
196
|
+
this.currentPageNumber = newVal.currentPage;
|
|
197
|
+
this.lastPageNumber = newVal.lastPage;
|
|
198
|
+
}
|
|
199
|
+
},
|
|
200
|
+
},
|
|
191
201
|
};
|
|
192
202
|
</script>
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div>
|
|
3
|
-
<div
|
|
3
|
+
<div
|
|
4
|
+
slot="table-actions"
|
|
5
|
+
v-if="tableActions"
|
|
6
|
+
class="mb-4 rounded-lg bg-gray-50 p-3"
|
|
7
|
+
>
|
|
4
8
|
<div class="flex justify-between">
|
|
5
9
|
<div v-if="searching">
|
|
6
10
|
<c-input
|
|
@@ -18,11 +22,15 @@
|
|
|
18
22
|
<div>
|
|
19
23
|
<button
|
|
20
24
|
@click="handleToggle"
|
|
21
|
-
class="
|
|
25
|
+
class="inline-flex w-full justify-center rounded-md border border-gray-200 bg-white px-2 py-2 text-sm font-medium shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
|
|
22
26
|
aria-haspopup="true"
|
|
23
27
|
aria-expanded="true"
|
|
24
28
|
>
|
|
25
|
-
<c-icon
|
|
29
|
+
<c-icon
|
|
30
|
+
name="view-board"
|
|
31
|
+
type="solid"
|
|
32
|
+
class="h-5 w-5 text-gray-400"
|
|
33
|
+
></c-icon>
|
|
26
34
|
<c-icon
|
|
27
35
|
name="chevron-down"
|
|
28
36
|
type="solid"
|
|
@@ -79,7 +87,9 @@
|
|
|
79
87
|
class="overflow-hidden rounded-lg border-2 border-solid border-gray-100"
|
|
80
88
|
mode="remote"
|
|
81
89
|
ref="my-table"
|
|
82
|
-
:styleClass="
|
|
90
|
+
:styleClass="
|
|
91
|
+
showLoader ? 'vgt-table opacity-50 pointer-events-none' : 'vgt-table'
|
|
92
|
+
"
|
|
83
93
|
row-style-class="focus:outline-none"
|
|
84
94
|
min-height="400px"
|
|
85
95
|
:globalSearch="true"
|
|
@@ -148,7 +158,12 @@
|
|
|
148
158
|
<template slot="table-row" slot-scope="props">
|
|
149
159
|
<!-- renders if drag and drop is present in table -->
|
|
150
160
|
<span v-if="props.column.field == 'drag'">
|
|
151
|
-
<c-icon
|
|
161
|
+
<c-icon
|
|
162
|
+
name="menu-solid"
|
|
163
|
+
type="solid"
|
|
164
|
+
class="handle h-5 w-5 text-gray-500"
|
|
165
|
+
:cursorType="'cursor-move'"
|
|
166
|
+
></c-icon>
|
|
152
167
|
</span>
|
|
153
168
|
<!-- if customization or adding another form element is required -->
|
|
154
169
|
<span v-else-if="props.column.customizeColumn">
|
|
@@ -206,6 +221,7 @@ import "vue-good-table/dist/vue-good-table.css";
|
|
|
206
221
|
import { VueGoodTable } from "vue-good-table";
|
|
207
222
|
import Sortable from "@shopify/draggable/lib/es5/sortable.js";
|
|
208
223
|
import CInput from "../CInput/CInput.vue";
|
|
224
|
+
import { debounce, isEqual } from "lodash-es";
|
|
209
225
|
|
|
210
226
|
export default {
|
|
211
227
|
name: "CTable",
|
|
@@ -333,8 +349,12 @@ export default {
|
|
|
333
349
|
},
|
|
334
350
|
// array of rows after drag and drop
|
|
335
351
|
rearrange(oldIndex, newIndex) {
|
|
336
|
-
const movedItem = this.reorderedArray.find(
|
|
337
|
-
|
|
352
|
+
const movedItem = this.reorderedArray.find(
|
|
353
|
+
(item, index) => index === oldIndex
|
|
354
|
+
);
|
|
355
|
+
const remainingItems = this.reorderedArray.filter(
|
|
356
|
+
(item, index) => index !== oldIndex
|
|
357
|
+
);
|
|
338
358
|
const reorderedItems = [
|
|
339
359
|
...remainingItems.slice(0, newIndex),
|
|
340
360
|
movedItem,
|
|
@@ -350,9 +370,9 @@ export default {
|
|
|
350
370
|
}
|
|
351
371
|
this.$emit("onSortChange", params);
|
|
352
372
|
},
|
|
353
|
-
onSearching(params) {
|
|
373
|
+
onSearching: debounce(function (params) {
|
|
354
374
|
this.$emit("onSearch", params);
|
|
355
|
-
},
|
|
375
|
+
}, 500),
|
|
356
376
|
setCurrentPageRecords(page) {
|
|
357
377
|
this.paginationRecords.currentPage = page;
|
|
358
378
|
this.$emit("pageChange", page);
|
|
@@ -377,6 +397,11 @@ export default {
|
|
|
377
397
|
isLoading() {
|
|
378
398
|
this.showLoader = this.isLoading;
|
|
379
399
|
},
|
|
400
|
+
paginationData(newValue, oldValue) {
|
|
401
|
+
if (!isEqual(newValue, oldValue)) {
|
|
402
|
+
this.paginationRecords = newValue;
|
|
403
|
+
}
|
|
404
|
+
},
|
|
380
405
|
},
|
|
381
406
|
};
|
|
382
407
|
</script>
|