edvoyui-component-library-test-flight 0.0.62 → 0.0.63
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 +4022 -4028
- 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/UTable.vue +168 -171
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,9 +20,10 @@
|
|
|
20
20
|
<div
|
|
21
21
|
id="euitable-comp"
|
|
22
22
|
:class="[
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
23
|
+
'ui-table scrollbar--thin overscroll-none',
|
|
24
|
+
computedItems.length === 0
|
|
25
|
+
? 'overflow-hidden pointer-events-none'
|
|
26
|
+
: 'overflow-auto',
|
|
26
27
|
tableHeight
|
|
27
28
|
? tableHeight
|
|
28
29
|
: 'h-[calc(100svh-12rem)] max-h-[calc(100svh-12rem)]',
|
|
@@ -30,172 +31,167 @@
|
|
|
30
31
|
ref="tableContainer"
|
|
31
32
|
@scroll="handleScroll"
|
|
32
33
|
>
|
|
33
|
-
|
|
34
|
-
<
|
|
35
|
-
<
|
|
36
|
-
<
|
|
37
|
-
|
|
34
|
+
<table class="table">
|
|
35
|
+
<thead>
|
|
36
|
+
<tr>
|
|
37
|
+
<th
|
|
38
|
+
v-if="checkable"
|
|
39
|
+
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"
|
|
47
|
+
>
|
|
48
|
+
<UCheckbox
|
|
49
|
+
:checked="isAllChecked"
|
|
50
|
+
:indeterminate="isIndeterminate"
|
|
51
|
+
:disabled="isAllUncheckable"
|
|
52
|
+
class="flex justify-center mt-0"
|
|
53
|
+
@change="checkAll"
|
|
54
|
+
/>
|
|
55
|
+
</th>
|
|
56
|
+
<th
|
|
57
|
+
v-for="(header, headerIndex) in headers"
|
|
58
|
+
:key="headerIndex"
|
|
59
|
+
scope="col"
|
|
60
|
+
:class="[
|
|
61
|
+
'snap-start snap-always',
|
|
62
|
+
isScrolled && headerIndex === 0 ? stickyClass.head : '',
|
|
63
|
+
{
|
|
64
|
+
'cursor-pointer hover:!text-gray-900': header?.sortable,
|
|
65
|
+
'!bg-gray-200': currentSort === header.value,
|
|
66
|
+
},
|
|
67
|
+
]"
|
|
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
|
+
>
|
|
142
|
+
<td
|
|
38
143
|
v-if="checkable"
|
|
39
144
|
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"
|
|
145
|
+
style="width: 45px; flex: 45 0 auto; max-width: 45px"
|
|
47
146
|
>
|
|
48
147
|
<UCheckbox
|
|
49
|
-
:
|
|
50
|
-
:
|
|
51
|
-
:disabled="isAllUncheckable"
|
|
148
|
+
:disabled="!isRowCheckable(row)"
|
|
149
|
+
:checked="isRowChecked(row)"
|
|
52
150
|
class="flex justify-center mt-0"
|
|
53
|
-
@change="
|
|
151
|
+
@change.prevent.stop="
|
|
152
|
+
($event) => checkRow(row, rowIndex, $event)
|
|
153
|
+
"
|
|
54
154
|
/>
|
|
55
|
-
</
|
|
56
|
-
<
|
|
155
|
+
</td>
|
|
156
|
+
<td
|
|
57
157
|
v-for="(header, headerIndex) in headers"
|
|
58
158
|
:key="headerIndex"
|
|
59
|
-
|
|
159
|
+
:style="bodyStyle(header)"
|
|
60
160
|
: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
|
-
},
|
|
161
|
+
isScrolled && headerIndex === 0 ? stickyClass.body : '',
|
|
67
162
|
]"
|
|
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
163
|
>
|
|
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
164
|
<slot
|
|
175
|
-
name="
|
|
165
|
+
:name="`item.${header?.value}`"
|
|
176
166
|
:row="row"
|
|
177
167
|
: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
|
-
"
|
|
168
|
+
:headerIndex="headerIndex"
|
|
187
169
|
>
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
</tr>
|
|
170
|
+
{{ getValueByPath(row, header?.value) }}
|
|
171
|
+
</slot>
|
|
172
|
+
</td>
|
|
173
|
+
</tr>
|
|
174
|
+
<template v-if="tableExpanded">
|
|
175
|
+
<slot name="expanded" :row="row" :rowIndex="rowIndex"></slot>
|
|
195
176
|
</template>
|
|
196
|
-
</
|
|
197
|
-
|
|
198
|
-
|
|
177
|
+
</template>
|
|
178
|
+
<template v-else-if="computedItems.length === 0">
|
|
179
|
+
<tr class="norecords">
|
|
180
|
+
<td
|
|
181
|
+
:colspan="
|
|
182
|
+
checkable === true ? headers.length + 1 : headers.length
|
|
183
|
+
"
|
|
184
|
+
>
|
|
185
|
+
<div
|
|
186
|
+
class="flex items-center justify-center text-xl font-medium text-gray-500 h-[calc(100svh-18rem)] max-w-screen-xl border"
|
|
187
|
+
>
|
|
188
|
+
No matching records found
|
|
189
|
+
</div>
|
|
190
|
+
</td>
|
|
191
|
+
</tr>
|
|
192
|
+
</template>
|
|
193
|
+
</tbody>
|
|
194
|
+
</table>
|
|
199
195
|
</div>
|
|
200
196
|
<div
|
|
201
197
|
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 +230,15 @@
|
|
|
234
230
|
</template>
|
|
235
231
|
|
|
236
232
|
<script lang="ts" setup>
|
|
237
|
-
import {
|
|
233
|
+
import {
|
|
234
|
+
ref,
|
|
235
|
+
computed,
|
|
236
|
+
watch,
|
|
237
|
+
toRefs,
|
|
238
|
+
PropType,
|
|
239
|
+
onMounted,
|
|
240
|
+
onUnmounted,
|
|
241
|
+
} from "vue";
|
|
238
242
|
import { getValueByPath, indexOf, defaultFilter } from "../../utils/helpers";
|
|
239
243
|
import UCheckbox from "./UCheckbox.vue";
|
|
240
244
|
import { capitalizeText } from "../../utils/lodash";
|
|
@@ -257,12 +261,14 @@ interface Item {
|
|
|
257
261
|
}
|
|
258
262
|
|
|
259
263
|
const props = defineProps({
|
|
260
|
-
items: { type: Array as PropType<Item[]>, default: () => [] },
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
264
|
+
items: { type: Array as PropType<Item[]>, default: () => [], required: true },
|
|
265
|
+
headers: {
|
|
266
|
+
type: Array as PropType<Header[]>,
|
|
267
|
+
default: () => [],
|
|
268
|
+
required: true,
|
|
269
|
+
},
|
|
270
|
+
paginated: { type: Boolean, default: false },
|
|
271
|
+
tableExpanded: { type: Boolean, default: false },
|
|
266
272
|
search: { type: String, default: "" },
|
|
267
273
|
perPage: { type: Number, default: 5 },
|
|
268
274
|
total: { type: Number, default: 0 },
|
|
@@ -272,21 +278,18 @@ const props = defineProps({
|
|
|
272
278
|
headerOptional: { type: Boolean, default: false },
|
|
273
279
|
checkedRows: { type: Array as PropType<Item[]>, default: () => [] },
|
|
274
280
|
checkable: { type: Boolean, default: false },
|
|
275
|
-
stickyHeader: { type: Boolean, default: true },
|
|
276
|
-
stickyColumn: { type: Boolean, default: true },
|
|
277
|
-
stickyColumnTwo: { type: Boolean, default: false },
|
|
278
281
|
isRowCheckable: {
|
|
279
282
|
type: Function as PropType<(row: Item) => boolean>,
|
|
280
283
|
default: () => true,
|
|
281
284
|
},
|
|
282
|
-
|
|
283
|
-
footerClass: { type: String, default: "" },
|
|
285
|
+
stickyColumn: { type: Boolean, default: true },
|
|
284
286
|
tableHeight: {
|
|
285
287
|
type: String,
|
|
286
288
|
required: false,
|
|
287
289
|
default: "",
|
|
288
290
|
},
|
|
289
291
|
tableLoading: { type: Boolean, default: false },
|
|
292
|
+
backendPagination: Boolean,
|
|
290
293
|
});
|
|
291
294
|
|
|
292
295
|
const {
|
|
@@ -325,12 +328,6 @@ const limit = ref(props.perPage);
|
|
|
325
328
|
const loading = computed(() => props.tableLoading);
|
|
326
329
|
|
|
327
330
|
// 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
331
|
|
|
335
332
|
const filteredItems = computed(() => {
|
|
336
333
|
let filteredItems = items.value.slice();
|