classcard-ui 0.2.213 → 0.2.214
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 +63 -55
- package/dist/classcard-ui.common.js.map +1 -1
- package/dist/classcard-ui.umd.js +63 -55
- package/dist/classcard-ui.umd.js.map +1 -1
- package/dist/classcard-ui.umd.min.js +1 -1
- package/dist/classcard-ui.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/components/CTable/CTable.vue +71 -64
package/package.json
CHANGED
|
@@ -1,18 +1,78 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div>
|
|
3
|
+
<div slot="table-actions" v-if="tableActions" class="bg-gray-50 rounded-lg p-3 mb-4">
|
|
4
|
+
<div class="flex justify-between">
|
|
5
|
+
<div v-if="searching">
|
|
6
|
+
<c-input v-model="searchTerm" :isValidate="searching" :placeholder="searchPlaceholder" class="-mt-1 w-56" type="text"></c-input>
|
|
7
|
+
</div>
|
|
8
|
+
<div class="flex">
|
|
9
|
+
<!-- dropdown icon on top right of table -->
|
|
10
|
+
<div class="relative inline-block text-left">
|
|
11
|
+
<!-- button to show list of columns to show hide in table -->
|
|
12
|
+
<div>
|
|
13
|
+
<button
|
|
14
|
+
@click="toggleDropdown = !toggleDropdown"
|
|
15
|
+
class="inline-flex justify-center w-full rounded-md border border-gray-200 shadow-sm px-2 py-2 bg-white text-sm font-medium hover:bg-gray-50 focus:outline-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
|
|
16
|
+
aria-haspopup="true"
|
|
17
|
+
aria-expanded="true"
|
|
18
|
+
@blur="toggleDropdown = false"
|
|
19
|
+
>
|
|
20
|
+
<c-icon name="view-board" type="solid" class="text-gray-400 h-5 w-5"></c-icon>
|
|
21
|
+
<c-icon
|
|
22
|
+
name="chevron-down"
|
|
23
|
+
type="solid"
|
|
24
|
+
class="ml-1 text-gray-400 h-5 w-5"
|
|
25
|
+
></c-icon>
|
|
26
|
+
</button>
|
|
27
|
+
</div>
|
|
28
|
+
<!-- dropdown having list of all columns to show hide -->
|
|
29
|
+
<div
|
|
30
|
+
v-show="toggleDropdown"
|
|
31
|
+
class="origin-top-right absolute right-0 mt-2 -mr-1 w-56 rounded-md shadow-lg bg-white ring-1 ring-gray-900 ring-opacity-5 z-100 overflow-y-auto max-h-96"
|
|
32
|
+
>
|
|
33
|
+
<div
|
|
34
|
+
class="py-1"
|
|
35
|
+
role="menu"
|
|
36
|
+
aria-orientation="vertical"
|
|
37
|
+
aria-labelledby="option-menu"
|
|
38
|
+
>
|
|
39
|
+
<a
|
|
40
|
+
href="#"
|
|
41
|
+
v-for="column in showHideColumnList"
|
|
42
|
+
v-bind:key="column.field"
|
|
43
|
+
class="flex block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
|
|
44
|
+
role="menuitem"
|
|
45
|
+
>
|
|
46
|
+
<c-checkbox
|
|
47
|
+
:label="column.label"
|
|
48
|
+
@onChange="showHideColumn($event, column.field)"
|
|
49
|
+
:value="!column.hidden"
|
|
50
|
+
></c-checkbox>
|
|
51
|
+
</a>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
|
|
56
|
+
<div>
|
|
57
|
+
<c-button-icon
|
|
58
|
+
type="white"
|
|
59
|
+
:icon="{ name: 'download-solid', type: 'solid', class: 'h-5 w-5 text-gray-400' }"
|
|
60
|
+
class="ml-3"
|
|
61
|
+
></c-button-icon>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
|
|
3
67
|
<vue-good-table
|
|
68
|
+
class="border-solid border-2 border-gray-100 rounded-lg overflow-hidden"
|
|
4
69
|
mode="remote"
|
|
5
70
|
ref="my-table"
|
|
6
71
|
:styleClass="showLoader ? 'vgt-table opacity-50 pointer-events-none' : 'vgt-table'"
|
|
7
|
-
row-style-class="focus:outline-none"
|
|
8
|
-
min-height="400px"
|
|
9
|
-
:globalSearch="true"
|
|
10
|
-
:isLoading="showLoader"
|
|
11
|
-
:totalRows="totalRecords"
|
|
12
|
-
:columns="cols"
|
|
13
72
|
:rows="rows"
|
|
14
73
|
:search-options="{
|
|
15
74
|
enabled: searching,
|
|
75
|
+
externalQuery: searchTerm,
|
|
16
76
|
placeholder: searchPlaceholder,
|
|
17
77
|
trigger: 'enter',
|
|
18
78
|
}"
|
|
@@ -82,63 +142,7 @@
|
|
|
82
142
|
{{ props.formattedRow[props.column.field] }}
|
|
83
143
|
</span>
|
|
84
144
|
</template>
|
|
85
|
-
|
|
86
|
-
<div class="flex flex-row-reverse">
|
|
87
|
-
<!-- dropdown icon on top right of table -->
|
|
88
|
-
<div>
|
|
89
|
-
<c-button-icon
|
|
90
|
-
type="white"
|
|
91
|
-
:icon="{ name: 'download', type: 'outline', class: 'h-5 w-5 text-gray-400' }"
|
|
92
|
-
class="ml-3"
|
|
93
|
-
></c-button-icon>
|
|
94
|
-
</div>
|
|
95
|
-
<div class="relative inline-block text-left">
|
|
96
|
-
<!-- button to show list of columns to show hide in table -->
|
|
97
|
-
<div>
|
|
98
|
-
<button
|
|
99
|
-
@click="toggleDropdown = !toggleDropdown"
|
|
100
|
-
class="inline-flex justify-center w-full rounded-md border border-gray-200 shadow-sm px-2 py-2 bg-white text-sm font-medium hover:bg-gray-50 focus:outline-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
|
|
101
|
-
aria-haspopup="true"
|
|
102
|
-
aria-expanded="true"
|
|
103
|
-
>
|
|
104
|
-
<c-icon name="view-board" type="solid" class="text-gray-400 h-5 w-5"></c-icon>
|
|
105
|
-
<c-icon
|
|
106
|
-
name="chevron-down"
|
|
107
|
-
type="solid"
|
|
108
|
-
class="ml-1 text-gray-400 h-5 w-5"
|
|
109
|
-
></c-icon>
|
|
110
|
-
</button>
|
|
111
|
-
</div>
|
|
112
|
-
<!-- dropdown having list of all columns to show hide -->
|
|
113
|
-
<div
|
|
114
|
-
v-show="toggleDropdown"
|
|
115
|
-
class="origin-top-right absolute right-0 mt-2 -mr-1 w-56 rounded-md shadow-lg bg-white ring-1 ring-gray-900 ring-opacity-5 z-100 overflow-y-auto max-h-96"
|
|
116
|
-
>
|
|
117
|
-
<div
|
|
118
|
-
class="py-1"
|
|
119
|
-
role="menu"
|
|
120
|
-
aria-orientation="vertical"
|
|
121
|
-
aria-labelledby="option-menu"
|
|
122
|
-
>
|
|
123
|
-
<a
|
|
124
|
-
href="#"
|
|
125
|
-
v-for="column in showHideColumnList"
|
|
126
|
-
v-bind:key="column.field"
|
|
127
|
-
class="flex block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
|
|
128
|
-
role="menuitem"
|
|
129
|
-
>
|
|
130
|
-
<c-checkbox
|
|
131
|
-
:label="column.label"
|
|
132
|
-
@onChange="showHideColumn($event, column.field)"
|
|
133
|
-
:value="!column.hidden"
|
|
134
|
-
></c-checkbox>
|
|
135
|
-
</a>
|
|
136
|
-
</div>
|
|
137
|
-
</div>
|
|
138
|
-
</div>
|
|
139
|
-
<slot name="action"></slot>
|
|
140
|
-
</div>
|
|
141
|
-
</div>
|
|
145
|
+
|
|
142
146
|
<!-- Custom pagination component -->
|
|
143
147
|
<template v-if="pagination" slot="pagination-bottom">
|
|
144
148
|
<c-pagination
|
|
@@ -147,6 +151,7 @@
|
|
|
147
151
|
@setCurrentPage="setCurrentPageRecords"
|
|
148
152
|
@setPreviousPage="setPreviousPageRecords"
|
|
149
153
|
@setNextPage="setNextPageRecords"
|
|
154
|
+
class="border-t-0"
|
|
150
155
|
></c-pagination>
|
|
151
156
|
</template>
|
|
152
157
|
<!-- Custom loader for table -->
|
|
@@ -185,6 +190,7 @@ import CButtonIcon from "../CButtonIcon/CButtonIcon.vue";
|
|
|
185
190
|
import "vue-good-table/dist/vue-good-table.css";
|
|
186
191
|
import { VueGoodTable } from "vue-good-table";
|
|
187
192
|
import Sortable from "@shopify/draggable/lib/es5/sortable.js";
|
|
193
|
+
import CInput from '../CInput/CInput.vue';
|
|
188
194
|
|
|
189
195
|
export default {
|
|
190
196
|
name: "CTable",
|
|
@@ -194,6 +200,7 @@ export default {
|
|
|
194
200
|
VueGoodTable,
|
|
195
201
|
CPagination,
|
|
196
202
|
CButtonIcon,
|
|
203
|
+
CInput
|
|
197
204
|
},
|
|
198
205
|
props: {
|
|
199
206
|
// To show or hide pagination section
|
|
@@ -285,7 +292,7 @@ export default {
|
|
|
285
292
|
return {
|
|
286
293
|
toggleDropdown: false,
|
|
287
294
|
showLoader: this.isLoading,
|
|
288
|
-
searchTerm:
|
|
295
|
+
searchTerm: '',
|
|
289
296
|
paginationRecords: this.paginationData,
|
|
290
297
|
reorderedArray: [...this.rows],
|
|
291
298
|
};
|