edvoyui-component-library-test-flight 0.0.62 → 0.0.64
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/library-vue-ts.cjs.js +11 -11
- package/dist/library-vue-ts.css +1 -1
- package/dist/library-vue-ts.es.js +4023 -4030
- package/dist/library-vue-ts.umd.js +12 -12
- package/package.json +1 -1
- package/src/components/index.ts +1 -0
- package/src/components/table/EUIStudentPagination.vue +1 -1
- package/src/components/table/UTable.scss +4 -6
- package/src/components/table/UTable.vue +169 -173
package/package.json
CHANGED
package/src/components/index.ts
CHANGED
|
@@ -31,6 +31,7 @@ export { default as EUIPagination } from "./table/EUIPagination.vue";
|
|
|
31
31
|
export { default as EUIPageLimit } from "./table/EUIPageLimit.vue";
|
|
32
32
|
export { default as EUITableCheckbox } from "./table/EUITableCheckbox.vue";
|
|
33
33
|
|
|
34
|
+
export { default as UCheckbox } from "./table/UCheckbox.vue";
|
|
34
35
|
export { default as UTable } from "./table/UTable.vue";
|
|
35
36
|
export { default as EUITable } from "./table/EUITable.vue";
|
|
36
37
|
export { default as EUIStudentPagination } from "./table/EUIStudentPagination.vue";
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
i === '…'
|
|
21
21
|
? 'select-none pointer-events-none'
|
|
22
22
|
: currentPage === i
|
|
23
|
-
? 'text-black bg-
|
|
23
|
+
? 'text-black bg-purple-50 ring-2 ring-inset ring-purple-600'
|
|
24
24
|
: 'bg-white text-black',
|
|
25
25
|
]"
|
|
26
26
|
@click="typeof i === 'number' && changePage(i - 1)"
|
|
@@ -6,10 +6,8 @@
|
|
|
6
6
|
linear-gradient(to left, rgba(223, 231, 242, 1), rgba(255, 255, 255, 0)),
|
|
7
7
|
linear-gradient(to top, white, rgba(255, 255, 255, 0)),
|
|
8
8
|
linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(223, 231, 242, 1));
|
|
9
|
-
background-position: left center, right center, left center, right center,
|
|
10
|
-
|
|
11
|
-
background-size: 30px 100%, 30px 100%, 20px 100%, 20px 100%, 100% 100px,
|
|
12
|
-
100% 20px;
|
|
9
|
+
background-position: left center, right center, left center, right center, left bottom, left bottom;
|
|
10
|
+
background-size: 30px 100%, 30px 100%, 20px 100%, 20px 100%, 100% 100px, 100% 20px;
|
|
13
11
|
background-attachment: local, local, scroll, scroll, local, scroll;
|
|
14
12
|
|
|
15
13
|
.table {
|
|
@@ -38,14 +36,14 @@
|
|
|
38
36
|
transition: all 0.15s ease-out;
|
|
39
37
|
@apply bg-purple-50;
|
|
40
38
|
td {
|
|
41
|
-
@apply border-purple-500 border-t first:rounded-l-sm last:rounded-r-sm border-r-gray-200 last:border-r-purple-500 transition-colors duration-100 ease-in
|
|
39
|
+
@apply border-purple-500 border-t first:rounded-l-sm last:rounded-r-sm border-r-gray-200 last:border-r-purple-500 transition-colors duration-100 ease-in text-gray-900 bg-purple-50;
|
|
42
40
|
&:first-of-type.checkable {
|
|
43
41
|
@apply bg-purple-50;
|
|
44
42
|
}
|
|
45
43
|
}
|
|
46
44
|
}
|
|
47
45
|
td {
|
|
48
|
-
@apply relative text-sm text-gray-
|
|
46
|
+
@apply relative text-sm font-medium text-gray-600 border-b border-solid break-words flex items-center border-0 first:border-l border-r border-gray-100 py-1.5 px-3 h-12;
|
|
49
47
|
&:first-of-type.checkable {
|
|
50
48
|
@apply w-[45px] text-center sticky left-0 top-0 z-[11] bg-white;
|
|
51
49
|
}
|
|
@@ -16,13 +16,13 @@
|
|
|
16
16
|
<EUICircleLoader />
|
|
17
17
|
</div>
|
|
18
18
|
</div>
|
|
19
|
-
<div v-else class="relative
|
|
19
|
+
<div v-else class="relative mx-auto overflow-hidden max-w-screen-2xl">
|
|
20
20
|
<div
|
|
21
|
-
id="euitable-comp"
|
|
22
21
|
:class="[
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
22
|
+
'ui-table scrollbar--hide overscroll-none',
|
|
23
|
+
computedItems.length === 0
|
|
24
|
+
? 'overflow-hidden pointer-events-none'
|
|
25
|
+
: 'overflow-auto',
|
|
26
26
|
tableHeight
|
|
27
27
|
? tableHeight
|
|
28
28
|
: 'h-[calc(100svh-12rem)] max-h-[calc(100svh-12rem)]',
|
|
@@ -30,172 +30,167 @@
|
|
|
30
30
|
ref="tableContainer"
|
|
31
31
|
@scroll="handleScroll"
|
|
32
32
|
>
|
|
33
|
-
|
|
34
|
-
<
|
|
35
|
-
<
|
|
36
|
-
<
|
|
37
|
-
|
|
33
|
+
<table class="table">
|
|
34
|
+
<thead>
|
|
35
|
+
<tr>
|
|
36
|
+
<th
|
|
37
|
+
v-if="checkable"
|
|
38
|
+
class="checkable"
|
|
39
|
+
style="
|
|
40
|
+
width: 45px;
|
|
41
|
+
flex: 45 0 auto;
|
|
42
|
+
max-width: 45px;
|
|
43
|
+
background-color: rgb(243 244 246);
|
|
44
|
+
"
|
|
45
|
+
scope="col"
|
|
46
|
+
>
|
|
47
|
+
<UCheckbox
|
|
48
|
+
:checked="isAllChecked"
|
|
49
|
+
:indeterminate="isIndeterminate"
|
|
50
|
+
:disabled="isAllUncheckable"
|
|
51
|
+
class="flex justify-center mt-0"
|
|
52
|
+
@change="checkAll"
|
|
53
|
+
/>
|
|
54
|
+
</th>
|
|
55
|
+
<th
|
|
56
|
+
v-for="(header, headerIndex) in headers"
|
|
57
|
+
:key="headerIndex"
|
|
58
|
+
scope="col"
|
|
59
|
+
:class="[
|
|
60
|
+
'snap-start snap-always',
|
|
61
|
+
isScrolled && headerIndex === 0 ? stickyClass.head : '',
|
|
62
|
+
{
|
|
63
|
+
'cursor-pointer hover:!text-gray-900': header?.sortable,
|
|
64
|
+
'!bg-gray-200': currentSort === header.value,
|
|
65
|
+
},
|
|
66
|
+
]"
|
|
67
|
+
:style="headerStyle(header)"
|
|
68
|
+
@click="sortBy(header, $event)"
|
|
69
|
+
>
|
|
70
|
+
<div
|
|
71
|
+
class="flex-1 w-full text-sm font-medium text-current truncate font-inter"
|
|
72
|
+
>
|
|
73
|
+
<slot name="header" :header="header">
|
|
74
|
+
{{ capitalizeText(header?.text ?? header?.name ?? "") }}
|
|
75
|
+
</slot>
|
|
76
|
+
<slot
|
|
77
|
+
v-if="headerOptional"
|
|
78
|
+
name="headerOptionalItem"
|
|
79
|
+
></slot>
|
|
80
|
+
</div>
|
|
81
|
+
<div v-if="header?.sortable" class="flex-none size-6">
|
|
82
|
+
<svg
|
|
83
|
+
width="24"
|
|
84
|
+
height="24"
|
|
85
|
+
viewBox="0 0 24 24"
|
|
86
|
+
fill="none"
|
|
87
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
88
|
+
class="size-6"
|
|
89
|
+
>
|
|
90
|
+
<rect width="24" height="24" fill="none" />
|
|
91
|
+
<path
|
|
92
|
+
d="M8 10C9.06206 8.5381 10.3071 7.2287 11.7021 6.1058C11.8774 5.9647 12.1226 5.9647 12.2979 6.1058C13.6929 7.2287 14.9379 8.5381 16 10"
|
|
93
|
+
:stroke="
|
|
94
|
+
currentSortDir === 'asc' &&
|
|
95
|
+
currentSort === header?.value
|
|
96
|
+
? '#111827'
|
|
97
|
+
: '#9ca3af'
|
|
98
|
+
"
|
|
99
|
+
stroke-opacity="0.8"
|
|
100
|
+
stroke-width="2"
|
|
101
|
+
stroke-linecap="round"
|
|
102
|
+
stroke-linejoin="round"
|
|
103
|
+
/>
|
|
104
|
+
<path
|
|
105
|
+
d="M8 14C9.06206 15.4619 10.3071 16.7713 11.7021 17.8942C11.8774 18.0353 12.1226 18.0353 12.2979 17.8942C13.6929 16.7713 14.9379 15.4619 16 14"
|
|
106
|
+
:stroke="
|
|
107
|
+
currentSortDir === 'desc' &&
|
|
108
|
+
currentSort === header?.value
|
|
109
|
+
? '#111827'
|
|
110
|
+
: '#9ca3af'
|
|
111
|
+
"
|
|
112
|
+
stroke-opacity="0.8"
|
|
113
|
+
stroke-width="2"
|
|
114
|
+
stroke-linecap="round"
|
|
115
|
+
stroke-linejoin="round"
|
|
116
|
+
/>
|
|
117
|
+
</svg>
|
|
118
|
+
</div>
|
|
119
|
+
</th>
|
|
120
|
+
</tr>
|
|
121
|
+
</thead>
|
|
122
|
+
<tbody>
|
|
123
|
+
<template
|
|
124
|
+
v-if="computedItems.length > 0"
|
|
125
|
+
v-for="(row, rowIndex) in computedItems"
|
|
126
|
+
:key="`table-row-${rowIndex}`"
|
|
127
|
+
>
|
|
128
|
+
<tr
|
|
129
|
+
@mouseenter="
|
|
130
|
+
$attrs.mouseenter
|
|
131
|
+
? $emit('mouseenter', row, rowIndex)
|
|
132
|
+
: null
|
|
133
|
+
"
|
|
134
|
+
@mouseleave="
|
|
135
|
+
$attrs.mouseleave
|
|
136
|
+
? $emit('mouseleave', row, rowIndex)
|
|
137
|
+
: null
|
|
138
|
+
"
|
|
139
|
+
class="group"
|
|
140
|
+
>
|
|
141
|
+
<td
|
|
38
142
|
v-if="checkable"
|
|
39
143
|
class="checkable"
|
|
40
|
-
style="
|
|
41
|
-
width: 45px;
|
|
42
|
-
flex: 45 0 auto;
|
|
43
|
-
max-width: 45px;
|
|
44
|
-
background-color: rgb(243 244 246);
|
|
45
|
-
"
|
|
46
|
-
scope="col"
|
|
144
|
+
style="width: 45px; flex: 45 0 auto; max-width: 45px"
|
|
47
145
|
>
|
|
48
146
|
<UCheckbox
|
|
49
|
-
:
|
|
50
|
-
:
|
|
51
|
-
:disabled="isAllUncheckable"
|
|
147
|
+
:disabled="!isRowCheckable(row)"
|
|
148
|
+
:checked="isRowChecked(row)"
|
|
52
149
|
class="flex justify-center mt-0"
|
|
53
|
-
@change="
|
|
150
|
+
@change.prevent.stop="
|
|
151
|
+
($event) => checkRow(row, rowIndex, $event)
|
|
152
|
+
"
|
|
54
153
|
/>
|
|
55
|
-
</
|
|
56
|
-
<
|
|
154
|
+
</td>
|
|
155
|
+
<td
|
|
57
156
|
v-for="(header, headerIndex) in headers"
|
|
58
157
|
:key="headerIndex"
|
|
59
|
-
|
|
158
|
+
:style="bodyStyle(header)"
|
|
60
159
|
:class="[
|
|
61
|
-
|
|
62
|
-
isScrolled && headerIndex === 0 ? stickyClass.head : '',
|
|
63
|
-
{
|
|
64
|
-
'cursor-pointer hover:!text-gray-900': header?.sortable,
|
|
65
|
-
'!bg-gray-200/75': currentSort === header.value,
|
|
66
|
-
},
|
|
160
|
+
isScrolled && headerIndex === 0 ? stickyClass.body : '',
|
|
67
161
|
]"
|
|
68
|
-
:style="headerStyle(header)"
|
|
69
|
-
@click="sortBy(header, $event)"
|
|
70
|
-
>
|
|
71
|
-
<div
|
|
72
|
-
class="flex-1 w-full text-sm font-medium text-current truncate font-inter"
|
|
73
|
-
>
|
|
74
|
-
<slot name="header" :header="header">
|
|
75
|
-
{{ capitalizeText(header?.text ?? header?.name ?? "") }}
|
|
76
|
-
</slot>
|
|
77
|
-
<slot
|
|
78
|
-
v-if="headerOptional"
|
|
79
|
-
name="headerOptionalItem"
|
|
80
|
-
></slot>
|
|
81
|
-
</div>
|
|
82
|
-
<div v-if="header?.sortable" class="flex-none size-6">
|
|
83
|
-
<svg
|
|
84
|
-
width="24"
|
|
85
|
-
height="24"
|
|
86
|
-
viewBox="0 0 24 24"
|
|
87
|
-
fill="none"
|
|
88
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
89
|
-
class="size-6"
|
|
90
|
-
>
|
|
91
|
-
<rect width="24" height="24" fill="none" />
|
|
92
|
-
<path
|
|
93
|
-
d="M8 10C9.06206 8.5381 10.3071 7.2287 11.7021 6.1058C11.8774 5.9647 12.1226 5.9647 12.2979 6.1058C13.6929 7.2287 14.9379 8.5381 16 10"
|
|
94
|
-
:stroke="
|
|
95
|
-
currentSortDir === 'asc' &&
|
|
96
|
-
currentSort === header?.value
|
|
97
|
-
? '#111827'
|
|
98
|
-
: '#9ca3af'
|
|
99
|
-
"
|
|
100
|
-
stroke-opacity="0.8"
|
|
101
|
-
stroke-width="2"
|
|
102
|
-
stroke-linecap="round"
|
|
103
|
-
stroke-linejoin="round"
|
|
104
|
-
/>
|
|
105
|
-
<path
|
|
106
|
-
d="M8 14C9.06206 15.4619 10.3071 16.7713 11.7021 17.8942C11.8774 18.0353 12.1226 18.0353 12.2979 17.8942C13.6929 16.7713 14.9379 15.4619 16 14"
|
|
107
|
-
:stroke="
|
|
108
|
-
currentSortDir === 'desc' &&
|
|
109
|
-
currentSort === header?.value
|
|
110
|
-
? '#111827'
|
|
111
|
-
: '#9ca3af'
|
|
112
|
-
"
|
|
113
|
-
stroke-opacity="0.8"
|
|
114
|
-
stroke-width="2"
|
|
115
|
-
stroke-linecap="round"
|
|
116
|
-
stroke-linejoin="round"
|
|
117
|
-
/>
|
|
118
|
-
</svg>
|
|
119
|
-
</div>
|
|
120
|
-
</th>
|
|
121
|
-
</tr>
|
|
122
|
-
</thead>
|
|
123
|
-
<tbody>
|
|
124
|
-
<template
|
|
125
|
-
v-if="computedItems.length > 0"
|
|
126
|
-
v-for="(row, rowIndex) in computedItems"
|
|
127
|
-
:key="`table-row-${rowIndex}`"
|
|
128
|
-
>
|
|
129
|
-
<tr
|
|
130
|
-
@mouseenter="
|
|
131
|
-
$attrs.mouseenter
|
|
132
|
-
? $emit('mouseenter', row, rowIndex)
|
|
133
|
-
: null
|
|
134
|
-
"
|
|
135
|
-
@mouseleave="
|
|
136
|
-
$attrs.mouseleave
|
|
137
|
-
? $emit('mouseleave', row, rowIndex)
|
|
138
|
-
: null
|
|
139
|
-
"
|
|
140
|
-
class="group"
|
|
141
162
|
>
|
|
142
|
-
<td
|
|
143
|
-
v-if="checkable"
|
|
144
|
-
class="checkable"
|
|
145
|
-
style="width: 45px; flex: 45 0 auto; max-width: 45px"
|
|
146
|
-
>
|
|
147
|
-
<UCheckbox
|
|
148
|
-
:disabled="!isRowCheckable(row)"
|
|
149
|
-
:checked="isRowChecked(row)"
|
|
150
|
-
class="flex justify-center mt-0"
|
|
151
|
-
@change.prevent.stop="
|
|
152
|
-
($event) => checkRow(row, rowIndex, $event)
|
|
153
|
-
"
|
|
154
|
-
/>
|
|
155
|
-
</td>
|
|
156
|
-
<td
|
|
157
|
-
v-for="(header, headerIndex) in headers"
|
|
158
|
-
:key="headerIndex"
|
|
159
|
-
:style="bodyStyle(header)"
|
|
160
|
-
:class="[isScrolled && headerIndex === 0 ? stickyClass.body : '',
|
|
161
|
-
]"
|
|
162
|
-
>
|
|
163
|
-
<slot
|
|
164
|
-
:name="`item.${header?.value}`"
|
|
165
|
-
:row="row"
|
|
166
|
-
:rowIndex="rowIndex"
|
|
167
|
-
:headerIndex="headerIndex"
|
|
168
|
-
>
|
|
169
|
-
{{ getValueByPath(row, header?.value) }}
|
|
170
|
-
</slot>
|
|
171
|
-
</td>
|
|
172
|
-
</tr>
|
|
173
|
-
<template v-if="tableExpanded">
|
|
174
163
|
<slot
|
|
175
|
-
name="
|
|
164
|
+
:name="`item.${header?.value}`"
|
|
176
165
|
:row="row"
|
|
177
166
|
:rowIndex="rowIndex"
|
|
178
|
-
|
|
179
|
-
</template>
|
|
180
|
-
</template>
|
|
181
|
-
<template v-else-if="computedItems.length === 0">
|
|
182
|
-
<tr class="norecords">
|
|
183
|
-
<td
|
|
184
|
-
:colspan="
|
|
185
|
-
checkable === true ? headers.length + 1 : headers.length
|
|
186
|
-
"
|
|
167
|
+
:headerIndex="headerIndex"
|
|
187
168
|
>
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
</tr>
|
|
169
|
+
{{ getValueByPath(row, header?.value) }}
|
|
170
|
+
</slot>
|
|
171
|
+
</td>
|
|
172
|
+
</tr>
|
|
173
|
+
<template v-if="tableExpanded">
|
|
174
|
+
<slot name="expanded" :row="row" :rowIndex="rowIndex"></slot>
|
|
195
175
|
</template>
|
|
196
|
-
</
|
|
197
|
-
|
|
198
|
-
|
|
176
|
+
</template>
|
|
177
|
+
<template v-else-if="computedItems.length === 0">
|
|
178
|
+
<tr class="norecords">
|
|
179
|
+
<td
|
|
180
|
+
:colspan="
|
|
181
|
+
checkable === true ? headers.length + 1 : headers.length
|
|
182
|
+
"
|
|
183
|
+
>
|
|
184
|
+
<div
|
|
185
|
+
class="flex items-center justify-center text-xl font-medium text-gray-500 h-[calc(100svh-18rem)] max-w-screen-xl border"
|
|
186
|
+
>
|
|
187
|
+
No matching records found
|
|
188
|
+
</div>
|
|
189
|
+
</td>
|
|
190
|
+
</tr>
|
|
191
|
+
</template>
|
|
192
|
+
</tbody>
|
|
193
|
+
</table>
|
|
199
194
|
</div>
|
|
200
195
|
<div
|
|
201
196
|
class="sticky bottom-0 left-0 z-50 flex items-center justify-between px-2 py-1 bg-white border-t border-gray-300"
|
|
@@ -234,7 +229,15 @@
|
|
|
234
229
|
</template>
|
|
235
230
|
|
|
236
231
|
<script lang="ts" setup>
|
|
237
|
-
import {
|
|
232
|
+
import {
|
|
233
|
+
ref,
|
|
234
|
+
computed,
|
|
235
|
+
watch,
|
|
236
|
+
toRefs,
|
|
237
|
+
PropType,
|
|
238
|
+
onMounted,
|
|
239
|
+
onUnmounted,
|
|
240
|
+
} from "vue";
|
|
238
241
|
import { getValueByPath, indexOf, defaultFilter } from "../../utils/helpers";
|
|
239
242
|
import UCheckbox from "./UCheckbox.vue";
|
|
240
243
|
import { capitalizeText } from "../../utils/lodash";
|
|
@@ -257,12 +260,14 @@ interface Item {
|
|
|
257
260
|
}
|
|
258
261
|
|
|
259
262
|
const props = defineProps({
|
|
260
|
-
items: { type: Array as PropType<Item[]>, default: () => [] },
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
263
|
+
items: { type: Array as PropType<Item[]>, default: () => [], required: true },
|
|
264
|
+
headers: {
|
|
265
|
+
type: Array as PropType<Header[]>,
|
|
266
|
+
default: () => [],
|
|
267
|
+
required: true,
|
|
268
|
+
},
|
|
269
|
+
paginated: { type: Boolean, default: false },
|
|
270
|
+
tableExpanded: { type: Boolean, default: false },
|
|
266
271
|
search: { type: String, default: "" },
|
|
267
272
|
perPage: { type: Number, default: 5 },
|
|
268
273
|
total: { type: Number, default: 0 },
|
|
@@ -272,21 +277,18 @@ const props = defineProps({
|
|
|
272
277
|
headerOptional: { type: Boolean, default: false },
|
|
273
278
|
checkedRows: { type: Array as PropType<Item[]>, default: () => [] },
|
|
274
279
|
checkable: { type: Boolean, default: false },
|
|
275
|
-
stickyHeader: { type: Boolean, default: true },
|
|
276
|
-
stickyColumn: { type: Boolean, default: true },
|
|
277
|
-
stickyColumnTwo: { type: Boolean, default: false },
|
|
278
280
|
isRowCheckable: {
|
|
279
281
|
type: Function as PropType<(row: Item) => boolean>,
|
|
280
282
|
default: () => true,
|
|
281
283
|
},
|
|
282
|
-
|
|
283
|
-
footerClass: { type: String, default: "" },
|
|
284
|
+
stickyColumn: { type: Boolean, default: true },
|
|
284
285
|
tableHeight: {
|
|
285
286
|
type: String,
|
|
286
287
|
required: false,
|
|
287
288
|
default: "",
|
|
288
289
|
},
|
|
289
290
|
tableLoading: { type: Boolean, default: false },
|
|
291
|
+
backendPagination: Boolean,
|
|
290
292
|
});
|
|
291
293
|
|
|
292
294
|
const {
|
|
@@ -325,12 +327,6 @@ const limit = ref(props.perPage);
|
|
|
325
327
|
const loading = computed(() => props.tableLoading);
|
|
326
328
|
|
|
327
329
|
// Computed Property
|
|
328
|
-
const tableClasses = computed(() => ({
|
|
329
|
-
"ui-table scrollbar--thin": true,
|
|
330
|
-
"ui-table--sticky-header": props.stickyHeader,
|
|
331
|
-
"ui-table--sticky-column": props.stickyColumn,
|
|
332
|
-
"ui-table--sticky-column-two": props.stickyColumnTwo,
|
|
333
|
-
}));
|
|
334
330
|
|
|
335
331
|
const filteredItems = computed(() => {
|
|
336
332
|
let filteredItems = items.value.slice();
|