classcard-ui 0.2.272 → 0.2.276
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 +171 -66
- package/dist/classcard-ui.common.js.map +1 -1
- package/dist/classcard-ui.umd.js +171 -66
- 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/CAvatar/CAvatar.vue +11 -2
- package/src/components/CIconDropdown/CIconDropdown.vue +37 -6
- package/src/components/CTable/CTable.vue +81 -17
- package/src/icons.js +2 -0
package/package.json
CHANGED
|
@@ -2,7 +2,13 @@
|
|
|
2
2
|
<div>
|
|
3
3
|
<div :class="description ? 'items-start' : 'items-center'" class="flex">
|
|
4
4
|
<div v-if="image">
|
|
5
|
-
<img
|
|
5
|
+
<img
|
|
6
|
+
@error="$emit('error', $event)"
|
|
7
|
+
:class="[classes, imageClasses]"
|
|
8
|
+
class="inline-block"
|
|
9
|
+
:src="image"
|
|
10
|
+
alt=""
|
|
11
|
+
/>
|
|
6
12
|
</div>
|
|
7
13
|
<div
|
|
8
14
|
v-else
|
|
@@ -22,7 +28,10 @@
|
|
|
22
28
|
<p v-if="name" class="text-sm text-gray-900">
|
|
23
29
|
{{ name }}
|
|
24
30
|
</p>
|
|
25
|
-
<p
|
|
31
|
+
<p
|
|
32
|
+
v-if="description"
|
|
33
|
+
class="text-xs text-gray-500 group-hover:text-gray-700"
|
|
34
|
+
>
|
|
26
35
|
{{ description }}
|
|
27
36
|
</p>
|
|
28
37
|
<slot></slot>
|
|
@@ -5,19 +5,42 @@
|
|
|
5
5
|
<div>
|
|
6
6
|
<button
|
|
7
7
|
type="white"
|
|
8
|
-
@click="toggleDropdown = !toggleDropdown"
|
|
8
|
+
@click.prevent="toggleDropdown = !toggleDropdown"
|
|
9
9
|
@blur="close()"
|
|
10
|
-
class="
|
|
10
|
+
class="
|
|
11
|
+
inline-flex
|
|
12
|
+
justify-center
|
|
13
|
+
w-full
|
|
14
|
+
rounded-full
|
|
15
|
+
border-none
|
|
16
|
+
p-2
|
|
17
|
+
focus:outline-none
|
|
18
|
+
focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600
|
|
19
|
+
"
|
|
11
20
|
aria-haspopup="true"
|
|
12
21
|
aria-expanded="true"
|
|
13
22
|
>
|
|
14
|
-
<c-icon
|
|
23
|
+
<c-icon
|
|
24
|
+
:name="icon.name"
|
|
25
|
+
:type="icon.type"
|
|
26
|
+
:class="icon.class"
|
|
27
|
+
></c-icon>
|
|
15
28
|
</button>
|
|
16
29
|
</div>
|
|
17
30
|
<div
|
|
18
31
|
v-show="toggleDropdown"
|
|
19
32
|
:class="classes"
|
|
20
|
-
class="
|
|
33
|
+
class="
|
|
34
|
+
origin-top-right
|
|
35
|
+
z-10
|
|
36
|
+
absolute
|
|
37
|
+
mt-2
|
|
38
|
+
-mr-1
|
|
39
|
+
rounded-md
|
|
40
|
+
shadow-lg
|
|
41
|
+
bg-white
|
|
42
|
+
ring-1 ring-gray-900 ring-opacity-5
|
|
43
|
+
"
|
|
21
44
|
>
|
|
22
45
|
<div
|
|
23
46
|
class="py-2 w-max"
|
|
@@ -28,8 +51,16 @@
|
|
|
28
51
|
<a
|
|
29
52
|
v-for="item in items"
|
|
30
53
|
v-bind:key="item.text"
|
|
31
|
-
@mousedown="dropdownAction(item)"
|
|
32
|
-
class="
|
|
54
|
+
@mousedown.prevent="dropdownAction(item)"
|
|
55
|
+
class="
|
|
56
|
+
flex
|
|
57
|
+
px-4
|
|
58
|
+
py-2
|
|
59
|
+
text-sm text-gray-700
|
|
60
|
+
hover:bg-gray-100
|
|
61
|
+
hover:text-gray-900
|
|
62
|
+
cursor-pointer
|
|
63
|
+
"
|
|
33
64
|
role="menuitem"
|
|
34
65
|
>
|
|
35
66
|
{{ item.text }}
|
|
@@ -1,10 +1,19 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div>
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
<div
|
|
4
|
+
slot="table-actions"
|
|
5
|
+
v-if="tableActions"
|
|
6
|
+
class="bg-gray-50 rounded-lg p-3 mb-4"
|
|
7
|
+
>
|
|
5
8
|
<div class="flex justify-between">
|
|
6
9
|
<div v-if="searching">
|
|
7
|
-
<c-input
|
|
10
|
+
<c-input
|
|
11
|
+
v-model="searchTerm"
|
|
12
|
+
:isValidate="searching"
|
|
13
|
+
:placeholder="searchPlaceholder"
|
|
14
|
+
class="-mt-1 w-56"
|
|
15
|
+
type="text"
|
|
16
|
+
></c-input>
|
|
8
17
|
</div>
|
|
9
18
|
<div class="flex">
|
|
10
19
|
<!-- dropdown icon on top right of table -->
|
|
@@ -13,11 +22,30 @@
|
|
|
13
22
|
<div>
|
|
14
23
|
<button
|
|
15
24
|
@click="handleToggle"
|
|
16
|
-
class="
|
|
25
|
+
class="
|
|
26
|
+
inline-flex
|
|
27
|
+
justify-center
|
|
28
|
+
w-full
|
|
29
|
+
rounded-md
|
|
30
|
+
border border-gray-200
|
|
31
|
+
shadow-sm
|
|
32
|
+
px-2
|
|
33
|
+
py-2
|
|
34
|
+
bg-white
|
|
35
|
+
text-sm
|
|
36
|
+
font-medium
|
|
37
|
+
hover:bg-gray-50
|
|
38
|
+
focus:outline-none focus:outline-none
|
|
39
|
+
focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600
|
|
40
|
+
"
|
|
17
41
|
aria-haspopup="true"
|
|
18
42
|
aria-expanded="true"
|
|
19
43
|
>
|
|
20
|
-
<c-icon
|
|
44
|
+
<c-icon
|
|
45
|
+
name="view-board"
|
|
46
|
+
type="solid"
|
|
47
|
+
class="text-gray-400 h-5 w-5"
|
|
48
|
+
></c-icon>
|
|
21
49
|
<c-icon
|
|
22
50
|
name="chevron-down"
|
|
23
51
|
type="solid"
|
|
@@ -28,10 +56,24 @@
|
|
|
28
56
|
<!-- dropdown having list of all columns to show hide -->
|
|
29
57
|
<div
|
|
30
58
|
v-if="toggleDropdown"
|
|
31
|
-
class="
|
|
59
|
+
class="
|
|
60
|
+
origin-top-right
|
|
61
|
+
absolute
|
|
62
|
+
right-0
|
|
63
|
+
mt-2
|
|
64
|
+
-mr-1
|
|
65
|
+
w-56
|
|
66
|
+
rounded-md
|
|
67
|
+
shadow-lg
|
|
68
|
+
bg-white
|
|
69
|
+
ring-1 ring-gray-900 ring-opacity-5
|
|
70
|
+
z-100
|
|
71
|
+
overflow-y-auto
|
|
72
|
+
max-h-96
|
|
73
|
+
"
|
|
32
74
|
tabindex="0"
|
|
33
75
|
@blur="handleToggle"
|
|
34
|
-
|
|
76
|
+
>
|
|
35
77
|
<div
|
|
36
78
|
class="py-1"
|
|
37
79
|
role="menu"
|
|
@@ -42,7 +84,15 @@
|
|
|
42
84
|
href="#"
|
|
43
85
|
v-for="column in showHideColumnList"
|
|
44
86
|
v-bind:key="column.field"
|
|
45
|
-
class="
|
|
87
|
+
class="
|
|
88
|
+
flex
|
|
89
|
+
block
|
|
90
|
+
px-4
|
|
91
|
+
py-2
|
|
92
|
+
text-sm text-gray-700
|
|
93
|
+
hover:bg-gray-100
|
|
94
|
+
hover:text-gray-900
|
|
95
|
+
"
|
|
46
96
|
role="menuitem"
|
|
47
97
|
>
|
|
48
98
|
<c-checkbox
|
|
@@ -58,7 +108,11 @@
|
|
|
58
108
|
<div>
|
|
59
109
|
<c-button-icon
|
|
60
110
|
type="white"
|
|
61
|
-
:icon="{
|
|
111
|
+
:icon="{
|
|
112
|
+
name: 'download-solid',
|
|
113
|
+
type: 'solid',
|
|
114
|
+
class: 'h-5 w-5 text-gray-400',
|
|
115
|
+
}"
|
|
62
116
|
class="ml-3"
|
|
63
117
|
></c-button-icon>
|
|
64
118
|
</div>
|
|
@@ -70,7 +124,9 @@
|
|
|
70
124
|
class="border-solid border-2 border-gray-100 rounded-lg overflow-hidden"
|
|
71
125
|
mode="remote"
|
|
72
126
|
ref="my-table"
|
|
73
|
-
:styleClass="
|
|
127
|
+
:styleClass="
|
|
128
|
+
showLoader ? 'vgt-table opacity-50 pointer-events-none' : 'vgt-table'
|
|
129
|
+
"
|
|
74
130
|
row-style-class="focus:outline-none"
|
|
75
131
|
min-height="400px"
|
|
76
132
|
:globalSearch="true"
|
|
@@ -139,7 +195,11 @@
|
|
|
139
195
|
<template slot="table-row" slot-scope="props">
|
|
140
196
|
<!-- renders if drag and drop is present in table -->
|
|
141
197
|
<span v-if="props.column.field == 'drag'">
|
|
142
|
-
<c-icon
|
|
198
|
+
<c-icon
|
|
199
|
+
name="menu-solid"
|
|
200
|
+
type="solid"
|
|
201
|
+
class="h-5 w-5 text-gray-500 handle"
|
|
202
|
+
></c-icon>
|
|
143
203
|
</span>
|
|
144
204
|
<!-- if customization or adding another form element is required -->
|
|
145
205
|
<span v-else-if="props.column.customizeColumn">
|
|
@@ -163,7 +223,7 @@
|
|
|
163
223
|
<!-- Custom loader for table -->
|
|
164
224
|
<template slot="loadingContent">
|
|
165
225
|
<svg
|
|
166
|
-
class="animate-spin h-
|
|
226
|
+
class="animate-spin h-7 w-7 text-white ml-auto mr-auto"
|
|
167
227
|
xmlns="http://www.w3.org/2000/svg"
|
|
168
228
|
fill="none"
|
|
169
229
|
viewBox="0 0 24 24"
|
|
@@ -196,7 +256,7 @@ import CButtonIcon from "../CButtonIcon/CButtonIcon.vue";
|
|
|
196
256
|
import "vue-good-table/dist/vue-good-table.css";
|
|
197
257
|
import { VueGoodTable } from "vue-good-table";
|
|
198
258
|
import Sortable from "@shopify/draggable/lib/es5/sortable.js";
|
|
199
|
-
import CInput from
|
|
259
|
+
import CInput from "../CInput/CInput.vue";
|
|
200
260
|
|
|
201
261
|
export default {
|
|
202
262
|
name: "CTable",
|
|
@@ -298,7 +358,7 @@ export default {
|
|
|
298
358
|
return {
|
|
299
359
|
toggleDropdown: false,
|
|
300
360
|
showLoader: this.isLoading,
|
|
301
|
-
searchTerm:
|
|
361
|
+
searchTerm: "",
|
|
302
362
|
paginationRecords: this.paginationData,
|
|
303
363
|
reorderedArray: [...this.rows],
|
|
304
364
|
};
|
|
@@ -316,15 +376,19 @@ export default {
|
|
|
316
376
|
},
|
|
317
377
|
// array of rows after drag and drop
|
|
318
378
|
rearrange(oldIndex, newIndex) {
|
|
319
|
-
const movedItem = this.reorderedArray.find(
|
|
320
|
-
|
|
379
|
+
const movedItem = this.reorderedArray.find(
|
|
380
|
+
(item, index) => index === oldIndex
|
|
381
|
+
);
|
|
382
|
+
const remainingItems = this.reorderedArray.filter(
|
|
383
|
+
(item, index) => index !== oldIndex
|
|
384
|
+
);
|
|
321
385
|
const reorderedItems = [
|
|
322
386
|
...remainingItems.slice(0, newIndex),
|
|
323
387
|
movedItem,
|
|
324
388
|
...remainingItems.slice(newIndex),
|
|
325
389
|
];
|
|
326
390
|
this.reorderedArray = [...reorderedItems];
|
|
327
|
-
this.$emit(
|
|
391
|
+
this.$emit("reordered", this.reorderedArray);
|
|
328
392
|
},
|
|
329
393
|
// listing functions
|
|
330
394
|
sortChange(params) {
|
package/src/icons.js
CHANGED
|
@@ -195,4 +195,6 @@ export default {
|
|
|
195
195
|
save: "M7.707 10.293a1 1 0 10-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 11.586V6h5a2 2 0 012 2v7a2 2 0 01-2 2H4a2 2 0 01-2-2V8a2 2 0 012-2h5v5.586l-1.293-1.293zM9 4a1 1 0 012 0v2H9V4z",
|
|
196
196
|
"clipboard-list-solid":
|
|
197
197
|
"M9 2a1 1 0 000 2h2a1 1 0 100-2H9z M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z",
|
|
198
|
+
"clipboard-check-outline":
|
|
199
|
+
"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4",
|
|
198
200
|
};
|