edvoyui-component-library-test-flight 0.0.207 → 0.0.209
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/components/index.d.ts +1 -0
- package/dist/components/table/EUIDashboardPagination.d.ts +60 -0
- package/dist/components/table/EUIDashboardPagination.vue +134 -0
- package/dist/components/table/EUIDashboardTable.d.ts +10 -2
- package/dist/components/table/EUIDashboardTable.vue +27 -17
- package/dist/components/table/EUITable.vue +7 -7
- package/dist/components/table/UTable.vue +7 -7
- package/dist/edvoy-ui.cjs.js +17 -17
- package/dist/edvoy-ui.css +1 -1
- package/dist/edvoy-ui.es.js +4703 -4627
- package/dist/edvoy-ui.umd.js +14 -14
- package/package.json +1 -1
|
@@ -28,6 +28,7 @@ export { default as EUITableCheckbox } from './table/EUITableCheckbox';
|
|
|
28
28
|
export { default as UCheckbox } from './table/UCheckbox';
|
|
29
29
|
export { default as EUIPagination } from './table/EUIPagination';
|
|
30
30
|
export { default as EUIStudentPagination } from './table/EUIStudentPagination';
|
|
31
|
+
export { default as EUIDashboardPagination } from './table/EUIDashboardPagination';
|
|
31
32
|
export { default as EUIMultiDropdown } from './dropdown/EUIMultiDropdown';
|
|
32
33
|
export { default as EUIDashboardTable } from './table/EUIDashboardTable';
|
|
33
34
|
export { default as UTable } from './table/UTable';
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
declare const _default: import('../../../node_modules/vue').DefineComponent<import('../../../node_modules/vue').ExtractPropTypes<{
|
|
2
|
+
totalCount: {
|
|
3
|
+
type: NumberConstructor;
|
|
4
|
+
default: number;
|
|
5
|
+
required: true;
|
|
6
|
+
};
|
|
7
|
+
pageLimit: {
|
|
8
|
+
type: NumberConstructor;
|
|
9
|
+
default: number;
|
|
10
|
+
required: true;
|
|
11
|
+
};
|
|
12
|
+
activePage: {
|
|
13
|
+
type: NumberConstructor;
|
|
14
|
+
default: number;
|
|
15
|
+
};
|
|
16
|
+
divider: {
|
|
17
|
+
type: StringConstructor;
|
|
18
|
+
default: string;
|
|
19
|
+
};
|
|
20
|
+
max: {
|
|
21
|
+
type: NumberConstructor;
|
|
22
|
+
default: number;
|
|
23
|
+
validator: (value: number) => boolean;
|
|
24
|
+
};
|
|
25
|
+
}>, {}, {}, {}, {}, import('../../../node_modules/vue').ComponentOptionsMixin, import('../../../node_modules/vue').ComponentOptionsMixin, {
|
|
26
|
+
changePage: (...args: any[]) => void;
|
|
27
|
+
}, string, import('../../../node_modules/vue').PublicProps, Readonly<import('../../../node_modules/vue').ExtractPropTypes<{
|
|
28
|
+
totalCount: {
|
|
29
|
+
type: NumberConstructor;
|
|
30
|
+
default: number;
|
|
31
|
+
required: true;
|
|
32
|
+
};
|
|
33
|
+
pageLimit: {
|
|
34
|
+
type: NumberConstructor;
|
|
35
|
+
default: number;
|
|
36
|
+
required: true;
|
|
37
|
+
};
|
|
38
|
+
activePage: {
|
|
39
|
+
type: NumberConstructor;
|
|
40
|
+
default: number;
|
|
41
|
+
};
|
|
42
|
+
divider: {
|
|
43
|
+
type: StringConstructor;
|
|
44
|
+
default: string;
|
|
45
|
+
};
|
|
46
|
+
max: {
|
|
47
|
+
type: NumberConstructor;
|
|
48
|
+
default: number;
|
|
49
|
+
validator: (value: number) => boolean;
|
|
50
|
+
};
|
|
51
|
+
}>> & Readonly<{
|
|
52
|
+
onChangePage?: ((...args: any[]) => any) | undefined;
|
|
53
|
+
}>, {
|
|
54
|
+
max: number;
|
|
55
|
+
pageLimit: number;
|
|
56
|
+
totalCount: number;
|
|
57
|
+
activePage: number;
|
|
58
|
+
divider: string;
|
|
59
|
+
}, {}, {}, {}, string, import('../../../node_modules/vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
|
|
60
|
+
export default _default;
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="inline-flex flex-row items-center overflow-hidden gap-x-1">
|
|
3
|
+
<button
|
|
4
|
+
:class="[
|
|
5
|
+
'rounded capitalize box-border border-none focus:outline-none inline-flex flex-row gap-0 items-center transition duration-150 ease-in-out bg-white text-gray-500 cursor-pointer p-px justify-center size-6 ring-1 ring-gray-200 ring-inset',
|
|
6
|
+
currentPage === 1 &&
|
|
7
|
+
'disabled:opacity-50 disabled:select-none disabled:pointer-events-none disabled:cursor-default',
|
|
8
|
+
]"
|
|
9
|
+
:disabled="currentPage === 1"
|
|
10
|
+
@click="prev()"
|
|
11
|
+
>
|
|
12
|
+
<ChevronDownStroke class="text-current transform rotate-90 size-5" />
|
|
13
|
+
</button>
|
|
14
|
+
|
|
15
|
+
<button
|
|
16
|
+
v-for="i in displayedPages"
|
|
17
|
+
:key="`button-${i}`"
|
|
18
|
+
:class="[
|
|
19
|
+
'rounded capitalize box-border border-none focus:outline-none inline-flex flex-row gap-0 items-center transition-transform duration-100 ease-in-out cursor-pointer text-xs font-medium p-1 justify-center min-w-6 h-6',
|
|
20
|
+
i === '…'
|
|
21
|
+
? 'select-none pointer-events-none cursor-default'
|
|
22
|
+
: currentPage === i
|
|
23
|
+
? 'text-purple-700 bg-purple-50 ring-1 ring-inset ring-purple-500'
|
|
24
|
+
: 'bg-white text-gray-500 ring-1 ring-inset ring-gray-200',
|
|
25
|
+
]"
|
|
26
|
+
@click="typeof i === 'number' && changePage(i - 1)"
|
|
27
|
+
>
|
|
28
|
+
{{ i }}
|
|
29
|
+
</button>
|
|
30
|
+
|
|
31
|
+
<button
|
|
32
|
+
:class="[
|
|
33
|
+
'rounded capitalize box-border border-none focus:outline-none inline-flex flex-row gap-0 items-center transition duration-150 ease-in-out bg-white text-gray-500 cursor-pointer p-px justify-center size-6 ring-1 ring-gray-200 ring-inset',
|
|
34
|
+
totalPages === currentPage &&
|
|
35
|
+
'disabled:opacity-50 disabled:pointer-events-none disabled:cursor-default disabled:select-none',
|
|
36
|
+
]"
|
|
37
|
+
:disabled="totalPages === currentPage"
|
|
38
|
+
@click="next()"
|
|
39
|
+
>
|
|
40
|
+
<ChevronDownStroke class="text-current transform -rotate-90 size-5" />
|
|
41
|
+
</button>
|
|
42
|
+
</div>
|
|
43
|
+
</template>
|
|
44
|
+
|
|
45
|
+
<script setup lang="ts">
|
|
46
|
+
import { computed } from "vue";
|
|
47
|
+
import ChevronDownStroke from "../../assets/svg/ChevronDownStroke.vue";
|
|
48
|
+
|
|
49
|
+
const props = defineProps({
|
|
50
|
+
totalCount: { type: Number, default: 0, required: true },
|
|
51
|
+
pageLimit: { type: Number, default: 0, required: true },
|
|
52
|
+
activePage: { type: Number, default: 0 },
|
|
53
|
+
divider: { type: String, default: "…" },
|
|
54
|
+
max: {
|
|
55
|
+
type: Number,
|
|
56
|
+
default: 7,
|
|
57
|
+
validator: (value: number) => value >= 5 && value < Number.MAX_VALUE,
|
|
58
|
+
},
|
|
59
|
+
});
|
|
60
|
+
|
|
61
|
+
const emit = defineEmits(["changePage"]);
|
|
62
|
+
|
|
63
|
+
const currentPage = computed(() => props.activePage + 1);
|
|
64
|
+
|
|
65
|
+
const totalPages = computed(() =>
|
|
66
|
+
props.pageLimit > 0 ? Math.ceil(props.totalCount / props.pageLimit) : 1,
|
|
67
|
+
);
|
|
68
|
+
|
|
69
|
+
const prev = () => {
|
|
70
|
+
if (props.activePage > 0) changePage(props.activePage - 1);
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
const next = () => {
|
|
74
|
+
if (props.activePage < totalPages.value - 1) changePage(props.activePage + 1);
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
const changePage = (page: number) => emit("changePage", page);
|
|
78
|
+
|
|
79
|
+
const displayedPages = computed(() => {
|
|
80
|
+
const total = totalPages.value;
|
|
81
|
+
const current = currentPage.value;
|
|
82
|
+
const maxDisplayedPages = Math.max(props.max, 5);
|
|
83
|
+
|
|
84
|
+
const r = Math.floor((Math.min(maxDisplayedPages, total) - 5) / 2);
|
|
85
|
+
const r1 = current - r;
|
|
86
|
+
const r2 = current + r;
|
|
87
|
+
|
|
88
|
+
const beforeWrapped = r1 - 1 > 1;
|
|
89
|
+
const afterWrapped = r2 + 1 < total;
|
|
90
|
+
|
|
91
|
+
const items: Array<number | string> = [];
|
|
92
|
+
|
|
93
|
+
if (total <= maxDisplayedPages) {
|
|
94
|
+
return Array.from({ length: total }, (_, i) => i + 1);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
items.push(1);
|
|
98
|
+
|
|
99
|
+
if (beforeWrapped) items.push(props.divider);
|
|
100
|
+
|
|
101
|
+
if (!afterWrapped) {
|
|
102
|
+
const addedItems = current + r + 2 - total;
|
|
103
|
+
for (let i = current - r - addedItems; i <= current - r - 1; i++)
|
|
104
|
+
items.push(i);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
for (let i = Math.max(2, r1); i <= Math.min(total, r2); i++) items.push(i);
|
|
108
|
+
|
|
109
|
+
if (!beforeWrapped) {
|
|
110
|
+
const addedItems = 1 - (current - r - 2);
|
|
111
|
+
for (let i = current + r + 1; i <= current + r + addedItems; i++)
|
|
112
|
+
items.push(i);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
if (afterWrapped) items.push(props.divider);
|
|
116
|
+
|
|
117
|
+
if (r2 < total) items.push(total);
|
|
118
|
+
|
|
119
|
+
// Replace divider by number on start edge case [1, '…', 3, ...]
|
|
120
|
+
if (items.length >= 3 && items[1] === props.divider && items[2] === 3)
|
|
121
|
+
items[1] = 2;
|
|
122
|
+
|
|
123
|
+
// Replace divider by number on end edge case [..., 48, '…', 50]
|
|
124
|
+
if (
|
|
125
|
+
items.length >= 3 &&
|
|
126
|
+
items[items.length - 2] === props.divider &&
|
|
127
|
+
items[items.length - 1] === items.length
|
|
128
|
+
)
|
|
129
|
+
items[items.length - 2] = items.length - 1;
|
|
130
|
+
|
|
131
|
+
return items;
|
|
132
|
+
});
|
|
133
|
+
</script>
|
|
134
|
+
<style scoped></style>
|
|
@@ -26,8 +26,16 @@ declare function __VLS_template(): {
|
|
|
26
26
|
rowIndex: number;
|
|
27
27
|
}): any;
|
|
28
28
|
'no-records'?(_: {}): any;
|
|
29
|
-
tableCount?(_: {
|
|
30
|
-
|
|
29
|
+
tableCount?(_: {
|
|
30
|
+
currentPage: number;
|
|
31
|
+
from: number;
|
|
32
|
+
to: number;
|
|
33
|
+
}): any;
|
|
34
|
+
tablepagination?(_: {
|
|
35
|
+
activePage: number;
|
|
36
|
+
pageLimint: number;
|
|
37
|
+
totalCount: number;
|
|
38
|
+
}): any;
|
|
31
39
|
};
|
|
32
40
|
refs: {
|
|
33
41
|
tableContainer: HTMLDivElement;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div>
|
|
3
|
-
<Transition name="fade"
|
|
4
|
-
<
|
|
2
|
+
<div class="relative">
|
|
3
|
+
<Transition name="fade">
|
|
4
|
+
<div v-if="loading" class="absolute inset-0 z-50 pointer-events-none">
|
|
5
5
|
<slot name="loader" :loading="loading" :height="tableHeight">
|
|
6
6
|
<div
|
|
7
7
|
:class="[
|
|
8
|
-
'overflow-hidden relative
|
|
8
|
+
'overflow-hidden relative isolate bg-white/60 backdrop-blur transition-colors duration-150 ease-in-out rounded-xl',
|
|
9
9
|
tableHeight
|
|
10
10
|
? tableHeight
|
|
11
11
|
: 'h-[calc(100svh-9rem)] max-h-[calc(100svh-9rem)]',
|
|
@@ -18,9 +18,10 @@
|
|
|
18
18
|
</div>
|
|
19
19
|
</div>
|
|
20
20
|
</slot>
|
|
21
|
-
</
|
|
21
|
+
</div>
|
|
22
|
+
</Transition>
|
|
22
23
|
|
|
23
|
-
<div
|
|
24
|
+
<div class="relative w-full mx-auto overflow-hidden">
|
|
24
25
|
<div
|
|
25
26
|
id="dashboard-table"
|
|
26
27
|
:class="[
|
|
@@ -154,7 +155,12 @@
|
|
|
154
155
|
<div
|
|
155
156
|
class="sticky bottom-0 left-0 z-50 flex items-center justify-between px-2 py-2 bg-gray-100"
|
|
156
157
|
>
|
|
157
|
-
<slot
|
|
158
|
+
<slot
|
|
159
|
+
name="tableCount"
|
|
160
|
+
:currentPage="newCurrentPage"
|
|
161
|
+
:from="newCurrentPage * limit + 1"
|
|
162
|
+
:to="(newCurrentPage + 1) * limit"
|
|
163
|
+
>
|
|
158
164
|
<div class="inline-flex items-center gap-x-10">
|
|
159
165
|
<div class="text-sm font-normal text-gray-900">
|
|
160
166
|
{{ newCurrentPage * limit + 1 }} -
|
|
@@ -173,7 +179,12 @@
|
|
|
173
179
|
</div>
|
|
174
180
|
</slot>
|
|
175
181
|
<template v-if="paginated">
|
|
176
|
-
<slot
|
|
182
|
+
<slot
|
|
183
|
+
name="tablepagination"
|
|
184
|
+
:activePage="newCurrentPage"
|
|
185
|
+
:pageLimint="limit"
|
|
186
|
+
:totalCount="total"
|
|
187
|
+
>
|
|
177
188
|
<EUIPagination
|
|
178
189
|
:activePage="newCurrentPage"
|
|
179
190
|
:pageLimit="limit"
|
|
@@ -184,7 +195,6 @@
|
|
|
184
195
|
</template>
|
|
185
196
|
</div>
|
|
186
197
|
</div>
|
|
187
|
-
</Transition>
|
|
188
198
|
</div>
|
|
189
199
|
</template>
|
|
190
200
|
|
|
@@ -280,9 +290,9 @@ const filteredItems = computed(() => {
|
|
|
280
290
|
props.some((prop) =>
|
|
281
291
|
defaultFilter(
|
|
282
292
|
getValueByPath(item, prop),
|
|
283
|
-
search.value.toString().toLowerCase()
|
|
284
|
-
)
|
|
285
|
-
)
|
|
293
|
+
search.value.toString().toLowerCase(),
|
|
294
|
+
),
|
|
295
|
+
),
|
|
286
296
|
);
|
|
287
297
|
}
|
|
288
298
|
return filteredItems;
|
|
@@ -314,7 +324,7 @@ const sortClass = computed(() => (header: any) => {
|
|
|
314
324
|
|
|
315
325
|
const isIndeterminate = computed(() => {
|
|
316
326
|
const validVisibleData = computedItems.value.filter((row) =>
|
|
317
|
-
isRowCheckable.value(row)
|
|
327
|
+
isRowCheckable.value(row),
|
|
318
328
|
);
|
|
319
329
|
return (
|
|
320
330
|
newCheckedRows.value.length > 0 &&
|
|
@@ -331,7 +341,7 @@ const isAllChecked = computed(() => {
|
|
|
331
341
|
|
|
332
342
|
const isAllUncheckable = computed(() => {
|
|
333
343
|
const validVisibleData = computedItems.value?.filter((row) =>
|
|
334
|
-
isRowCheckable.value!(row)
|
|
344
|
+
isRowCheckable.value!(row),
|
|
335
345
|
);
|
|
336
346
|
return validVisibleData.length === 0;
|
|
337
347
|
});
|
|
@@ -389,7 +399,7 @@ const checkAll = () => {
|
|
|
389
399
|
} else {
|
|
390
400
|
// Check all rows
|
|
391
401
|
const rowsToCheck = computedItems.value.filter(
|
|
392
|
-
(row) => !newCheckedRows.value.includes(row)
|
|
402
|
+
(row) => !newCheckedRows.value.includes(row),
|
|
393
403
|
);
|
|
394
404
|
newCheckedRows.value.push(...rowsToCheck);
|
|
395
405
|
}
|
|
@@ -417,7 +427,7 @@ watch(
|
|
|
417
427
|
(newVal) => {
|
|
418
428
|
newCurrentPage.value = newVal;
|
|
419
429
|
},
|
|
420
|
-
{ immediate: true }
|
|
430
|
+
{ immediate: true },
|
|
421
431
|
);
|
|
422
432
|
|
|
423
433
|
watch(
|
|
@@ -427,7 +437,7 @@ watch(
|
|
|
427
437
|
},
|
|
428
438
|
{
|
|
429
439
|
immediate: true,
|
|
430
|
-
}
|
|
440
|
+
},
|
|
431
441
|
);
|
|
432
442
|
|
|
433
443
|
// table scroll to add class
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div>
|
|
3
|
-
<Transition name="fade"
|
|
4
|
-
<
|
|
2
|
+
<div class="relative">
|
|
3
|
+
<Transition name="fade">
|
|
4
|
+
<div v-if="loading" class="absolute inset-0 z-50 pointer-events-none">
|
|
5
5
|
<slot name="loader" :loading="loading" :height="tableHeight">
|
|
6
6
|
<div
|
|
7
7
|
:class="[
|
|
8
|
-
'overflow-hidden relative
|
|
8
|
+
'overflow-hidden relative isolate bg-white/60 backdrop-blur transition-colors duration-150 ease-in-out rounded-xl',
|
|
9
9
|
tableHeight
|
|
10
10
|
? tableHeight
|
|
11
11
|
: 'h-[calc(100svh-9rem)] max-h-[calc(100svh-9rem)]',
|
|
@@ -18,9 +18,10 @@
|
|
|
18
18
|
</div>
|
|
19
19
|
</div>
|
|
20
20
|
</slot>
|
|
21
|
-
</
|
|
21
|
+
</div>
|
|
22
|
+
</Transition>
|
|
22
23
|
|
|
23
|
-
<div
|
|
24
|
+
<div class="relative w-full mx-auto overflow-hidden">
|
|
24
25
|
<div
|
|
25
26
|
id="student-table"
|
|
26
27
|
:class="[
|
|
@@ -231,7 +232,6 @@
|
|
|
231
232
|
</template>
|
|
232
233
|
</div>
|
|
233
234
|
</div>
|
|
234
|
-
</Transition>
|
|
235
235
|
</div>
|
|
236
236
|
</template>
|
|
237
237
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div>
|
|
3
|
-
<Transition name="fade"
|
|
4
|
-
<
|
|
2
|
+
<div class="relative">
|
|
3
|
+
<Transition name="fade">
|
|
4
|
+
<div v-if="loading" class="absolute inset-0 z-50 pointer-events-none">
|
|
5
5
|
<slot name="loader" :loading="loading" :height="tableHeight">
|
|
6
6
|
<div
|
|
7
7
|
:class="[
|
|
8
|
-
'overflow-hidden relative
|
|
8
|
+
'overflow-hidden relative isolate bg-white/60 backdrop-blur transition-colors duration-150 ease-in-out rounded-xl',
|
|
9
9
|
tableHeight
|
|
10
10
|
? tableHeight
|
|
11
11
|
: 'h-[calc(100svh-9rem)] max-h-[calc(100svh-9rem)]',
|
|
@@ -18,8 +18,9 @@
|
|
|
18
18
|
</div>
|
|
19
19
|
</div>
|
|
20
20
|
</slot>
|
|
21
|
-
</
|
|
22
|
-
|
|
21
|
+
</div>
|
|
22
|
+
</Transition>
|
|
23
|
+
<div class="relative max-w-full mx-auto overflow-hidden">
|
|
23
24
|
<div
|
|
24
25
|
:class="[
|
|
25
26
|
'ui-table scrollbar--auto',
|
|
@@ -304,7 +305,6 @@
|
|
|
304
305
|
</template>
|
|
305
306
|
</div>
|
|
306
307
|
</div>
|
|
307
|
-
</Transition>
|
|
308
308
|
</div>
|
|
309
309
|
</template>
|
|
310
310
|
|