edvoyui-component-library-test-flight 0.0.136 → 0.0.137
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 +53 -53
- package/dist/library-vue-ts.css +1 -1
- package/dist/library-vue-ts.es.js +9538 -9115
- package/dist/library-vue-ts.umd.js +57 -57
- package/dist/table/ColumnResizeTable.vue.d.ts +5 -0
- package/dist/table/ColumnResizeTable.vue.d.ts.map +1 -0
- package/dist/table/GrowthTable.vue.d.ts +1 -1
- package/dist/tooltip/EUITooltip.vue.d.ts +1 -1
- package/package.json +1 -1
- package/src/components/index.ts +1 -0
- package/src/components/popover/EUIPopover.stories.ts +80 -21
- package/src/components/table/ColumnResizeTable.vue +733 -0
- package/src/components/table/GrowthTable.vue +4 -3
- package/src/components/table/GrowthTableView.vue +22 -22
- package/src/components/table/ResizeTableview.vue +198 -0
- package/src/components/tooltip/EUITooltip.vue +6 -3
- package/src/data/table.ts +4 -0
|
@@ -65,17 +65,18 @@
|
|
|
65
65
|
}}</template>
|
|
66
66
|
<div
|
|
67
67
|
v-else
|
|
68
|
-
class="bg-violet-600 text-white rounded-[0.625rem] px-3 py-2"
|
|
68
|
+
class="bg-violet-600 text-white rounded-[0.625rem] px-3 py-2 w-full"
|
|
69
69
|
>
|
|
70
70
|
<div class="mb-2">
|
|
71
71
|
{{
|
|
72
72
|
capitalizeText(header?.text ?? header.name ?? "")
|
|
73
73
|
}}
|
|
74
74
|
</div>
|
|
75
|
-
<div class="
|
|
75
|
+
<div class="flex items-center justify-start max-w-full gap-4">
|
|
76
76
|
<span
|
|
77
77
|
v-for="(data, idx) in header?.activeYear"
|
|
78
78
|
:key="`year_${idx}`"
|
|
79
|
+
class="min-w-8"
|
|
79
80
|
>{{ data }}</span
|
|
80
81
|
>
|
|
81
82
|
</div>
|
|
@@ -83,7 +84,7 @@
|
|
|
83
84
|
</slot>
|
|
84
85
|
<slot name="headerOptionalItem"></slot>
|
|
85
86
|
<SortArrow
|
|
86
|
-
v-if="header?.sortable"
|
|
87
|
+
v-if="header?.sortable && !header?.activeYear"
|
|
87
88
|
:class="[
|
|
88
89
|
'transform duration-100 transition-all',
|
|
89
90
|
currentSort === header.value
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<!-- <template>
|
|
2
2
|
<div class="max-w-screen-xl mx-auto">
|
|
3
|
-
<pre class="text-[0.5rem] p-2 border border-gray-300 rounded-lg max-h-72 overflow-y-auto">{{ selectedRows
|
|
3
|
+
<pre class="text-[0.5rem] p-2 border border-gray-300 rounded-lg max-h-72 overflow-y-auto">{{ selectedRows?.map(x => x?._id)}}</pre>
|
|
4
4
|
<GrowthTable
|
|
5
5
|
checkable
|
|
6
6
|
paginated
|
|
@@ -19,55 +19,55 @@
|
|
|
19
19
|
@mouseleave="(selectedIndex = null), (selected = null)"
|
|
20
20
|
>
|
|
21
21
|
|
|
22
|
-
|
|
23
|
-
<div class="
|
|
24
|
-
<span v-for="(data, idx) in row?.active_allagents" :key="`year_${idx}`">{{ data.value || '-' }}</span>
|
|
22
|
+
<template #[`item.active_allagents`]="{ row, rowIndex }">
|
|
23
|
+
<div class=" bg-violet-100 px-3 rounded-[0.625rem] w-full py-2 h-full flex items-center gap-4 justify-start">
|
|
24
|
+
<span v-for="(data, idx) in row?.active_allagents" :key="`year_${idx}`" class="min-w-8">{{ data.value || '-' }}</span>
|
|
25
25
|
</div>
|
|
26
26
|
</template>
|
|
27
27
|
<template #[`item.active_active_allagents`]="{ row, rowIndex }">
|
|
28
|
-
|
|
29
|
-
<span v-for="(data, idx) in row?.active_active_allagents" :key="`year_${idx}`">{{ data.value || '-' }}</span>
|
|
28
|
+
<div class="flex flex-row items-start gap-4 justify-between bg-violet-50 px-3 rounded-[0.625rem] py-2 h-full">
|
|
29
|
+
<span v-for="(data, idx) in row?.active_active_allagents" :key="`year_${idx}`" class="min-w-8">{{ data.value || '-' }}</span>
|
|
30
30
|
</div>
|
|
31
31
|
</template>
|
|
32
32
|
<template #[`item.active_dormant`]="{ row, rowIndex }">
|
|
33
|
-
<div class="flex flex-row items-
|
|
34
|
-
<span v-for="(data, idx) in row?.active_dormant" :key="`year_${idx}`">{{ data.value || '-' }}</span>
|
|
33
|
+
<div class="flex flex-row items-start gap-4 justify-between bg-violet-50 px-3 rounded-[0.625rem] py-2 h-full">
|
|
34
|
+
<span v-for="(data, idx) in row?.active_dormant" :key="`year_${idx}`" class="min-w-8">{{ data.value || '-' }}</span>
|
|
35
35
|
</div>
|
|
36
36
|
</template>
|
|
37
37
|
<template #[`item.totalDepositCount`]="{ row, rowIndex }">
|
|
38
|
-
<div class="flex flex-row items-
|
|
39
|
-
<span v-for="(data, idx) in row?.totalDepositCount" :key="`year_${idx}`">{{ data.value || '-' }}</span>
|
|
38
|
+
<div class="flex flex-row items-start gap-4 justify-between bg-violet-50 px-3 rounded-[0.625rem] py-2 h-full">
|
|
39
|
+
<span v-for="(data, idx) in row?.totalDepositCount" :key="`year_${idx}`" class="min-w-8">{{ data.value || '-' }}</span>
|
|
40
40
|
</div>
|
|
41
41
|
</template>
|
|
42
42
|
<template #[`item.totalStudentCount`]="{ row, rowIndex }">
|
|
43
|
-
<div class="flex flex-row items-
|
|
44
|
-
<span v-for="(data, idx) in row?.totalStudentCount" :key="`year_${idx}`">{{ data.value || '-' }}</span>
|
|
43
|
+
<div class="flex flex-row items-start gap-4 justify-between bg-violet-50 px-3 rounded-[0.625rem] py-2 h-full">
|
|
44
|
+
<span v-for="(data, idx) in row?.totalStudentCount" :key="`year_${idx}`" class="min-w-8">{{ data.value || '-' }}</span>
|
|
45
45
|
</div>
|
|
46
46
|
</template>
|
|
47
47
|
|
|
48
48
|
<template #[`footer.active_allagents`]="{ row, rowIndex }">
|
|
49
|
-
<div class="flex
|
|
50
|
-
<span v-for="(data, idx) in row?.active_allagents" :key="`year_${idx}`">{{ data.value || '-' }}</span>
|
|
49
|
+
<div class="flex items-center max-w-full gap-4 justify-start bg-[#FCD34D] px-3 rounded-[0.625rem] py-2 h-full">
|
|
50
|
+
<span v-for="(data, idx) in row?.active_allagents" :key="`year_${idx}`" class="min-w-8">{{ data.value || '-' }}</span>
|
|
51
51
|
</div>
|
|
52
52
|
</template>
|
|
53
53
|
<template #[`footer.active_active_allagents`]="{ row, rowIndex }">
|
|
54
|
-
<div class="flex
|
|
55
|
-
<span v-for="(data, idx) in row?.active_active_allagents" :key="`year_${idx}`">{{ data.value || '-' }}</span>
|
|
54
|
+
<div class="flex items-center max-w-full gap-4 justify-start bg-[#FCD34D] px-3 rounded-[0.625rem] py-2 h-full">
|
|
55
|
+
<span v-for="(data, idx) in row?.active_active_allagents" :key="`year_${idx}`" class="min-w-8">{{ data.value || '-' }}</span>
|
|
56
56
|
</div>
|
|
57
57
|
</template>
|
|
58
58
|
<template #[`footer.active_dormant`]="{ row, rowIndex }">
|
|
59
|
-
<div class="flex
|
|
60
|
-
<span v-for="(data, idx) in row?.active_dormant" :key="`year_${idx}`">{{ data.value || '-' }}</span>
|
|
59
|
+
<div class="flex items-center max-w-full gap-4 justify-start bg-[#FCD34D] px-3 rounded-[0.625rem] py-2 h-full">
|
|
60
|
+
<span v-for="(data, idx) in row?.active_dormant" :key="`year_${idx}`" class="min-w-8">{{ data.value || '-' }}</span>
|
|
61
61
|
</div>
|
|
62
62
|
</template>
|
|
63
63
|
<template #[`footer.totalDepositCount`]="{ row, rowIndex }">
|
|
64
|
-
<div class="flex
|
|
65
|
-
<span v-for="(data, idx) in row?.totalDepositCount" :key="`year_${idx}`">{{ data.value || '-' }}</span>
|
|
64
|
+
<div class="flex items-center max-w-full gap-4 justify-start bg-[#FCD34D] px-3 rounded-[0.625rem] py-2 h-full">
|
|
65
|
+
<span v-for="(data, idx) in row?.totalDepositCount" :key="`year_${idx}`" class="min-w-8">{{ data.value || '-' }}</span>
|
|
66
66
|
</div>
|
|
67
67
|
</template>
|
|
68
68
|
<template #[`footer.totalStudentCount`]="{ row, rowIndex }">
|
|
69
|
-
<div class="flex
|
|
70
|
-
<span v-for="(data, idx) in row?.totalStudentCount" :key="`year_${idx}`">{{ data.value || '-' }}</span>
|
|
69
|
+
<div class="flex items-center max-w-full gap-4 justify-start bg-[#FCD34D] px-3 rounded-[0.625rem] py-2 h-full">
|
|
70
|
+
<span v-for="(data, idx) in row?.totalStudentCount" :key="`year_${idx}`" class="min-w-8">{{ data.value || '-' }}</span>
|
|
71
71
|
</div>
|
|
72
72
|
</template>
|
|
73
73
|
</GrowthTable>
|
|
@@ -0,0 +1,198 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<!-- <pre class="text-[0.5rem] p-2 border border-gray-300 rounded-lg max-h-72 overflow-y-auto">{{ selectedRows.map(x => x?._id)}}</pre> -->
|
|
4
|
+
<ColumnResizeTable
|
|
5
|
+
:checkable="true"
|
|
6
|
+
:table-loading="loading"
|
|
7
|
+
v-model:selectedRows.sync="selectedRows"
|
|
8
|
+
paginated
|
|
9
|
+
:checked-rows.sync="checkedRows"
|
|
10
|
+
backend-pagination
|
|
11
|
+
:per-page="limit"
|
|
12
|
+
:headers="studentHeader"
|
|
13
|
+
:items="studentData"
|
|
14
|
+
:total="studentData.length"
|
|
15
|
+
:default-sort-direction="defaultSortOrder"
|
|
16
|
+
default-sort=""
|
|
17
|
+
:current-page="offset"
|
|
18
|
+
table-height="h-[calc(100svh-15rem)] max-h-[calc(100svh-15rem)]"
|
|
19
|
+
:table-expanded="true"
|
|
20
|
+
@changePage="onPageChange"
|
|
21
|
+
@sort="onSort"
|
|
22
|
+
@mouseenter="select"
|
|
23
|
+
@mouseleave="(selectedIndex = null), (selected = null)"
|
|
24
|
+
>
|
|
25
|
+
<template #[`item.firstName`]="{ row, rowIndex }">
|
|
26
|
+
<div class="space-y-0.5">
|
|
27
|
+
<div class="block text-sm font-medium leading-snug">
|
|
28
|
+
{{
|
|
29
|
+
rowIndex +
|
|
30
|
+
capitalizeText(row?.firstName) +
|
|
31
|
+
" " +
|
|
32
|
+
capitalizeText(row?.lastName)
|
|
33
|
+
}}
|
|
34
|
+
</div>
|
|
35
|
+
<div class="text-xs font-medium text-gray-900 leading-[normal]">
|
|
36
|
+
{{ row?.referenceId }}
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
</template>
|
|
40
|
+
<template #[`item.lifecycleStage`]="{ row, rowIndex }">
|
|
41
|
+
<div :key="rowIndex">
|
|
42
|
+
<div>{{ row?.lifecycleStage }}</div>
|
|
43
|
+
<button
|
|
44
|
+
type="button"
|
|
45
|
+
class="inline-flex items-center gap-2 py-0.5 text-xs font-medium text-gray-700 bg-gray-300 outline-none ps-2 pe-0.5 rounded-3xl focus:outline-none"
|
|
46
|
+
@click="rowToggle(rowIndex)"
|
|
47
|
+
>
|
|
48
|
+
Foundation
|
|
49
|
+
<span
|
|
50
|
+
class="inline-flex items-center text-xss font-bold gap-1 ps-2 pe-1 py-0.5 bg-gray-100 rounded-3xl min-w-7"
|
|
51
|
+
>2
|
|
52
|
+
<ChevronBigDown
|
|
53
|
+
class="transition-all duration-300 ease-in-out transform size-3"
|
|
54
|
+
:class="
|
|
55
|
+
activeRowIndex === rowIndex ? '-rotate-180' : 'rotate-0'
|
|
56
|
+
"
|
|
57
|
+
/>
|
|
58
|
+
</span>
|
|
59
|
+
</button>
|
|
60
|
+
</div>
|
|
61
|
+
</template>
|
|
62
|
+
|
|
63
|
+
<template #[`item.activeUser`]="{ row, rowIndex }">
|
|
64
|
+
{{ rowIndex }}
|
|
65
|
+
{{ row?.activeUser?.user?.firstName }}
|
|
66
|
+
{{ row?.activeUser?.user?.lastName }}
|
|
67
|
+
</template>
|
|
68
|
+
|
|
69
|
+
<template #expanded="{ row, rowIndex, headerLength }">
|
|
70
|
+
<tr
|
|
71
|
+
v-if="rowIndex === activeRowIndex"
|
|
72
|
+
class="row-expanded"
|
|
73
|
+
:key="`${row}-${rowIndex}-val`"
|
|
74
|
+
>
|
|
75
|
+
<td :colspan="headerLength">
|
|
76
|
+
<div>
|
|
77
|
+
<table
|
|
78
|
+
class="px-12 border-separate table-auto max-w-max border-spacing-x-0 border-spacing-y-2"
|
|
79
|
+
>
|
|
80
|
+
<tbody>
|
|
81
|
+
<tr
|
|
82
|
+
class="rounded-lg group bg-white hover:bg-violet-50 hover:ring-1 ring-violet-300 hover:shadow-[0px_1px_2px_0px_#4B55631A,0px_2px_2px_0px_#4B556314]"
|
|
83
|
+
>
|
|
84
|
+
<td
|
|
85
|
+
v-for="(data, idx) in sqlApplication"
|
|
86
|
+
:key="`data-${idx}`"
|
|
87
|
+
class="py-2.5 px-3 text-sm text-gray-700 w-40"
|
|
88
|
+
:class="
|
|
89
|
+
idx === 0
|
|
90
|
+
? 'rounded-l-lg'
|
|
91
|
+
: idx === sqlApplication.length - 1
|
|
92
|
+
? 'rounded-r-lg'
|
|
93
|
+
: ''
|
|
94
|
+
"
|
|
95
|
+
>
|
|
96
|
+
{{ data }}
|
|
97
|
+
</td>
|
|
98
|
+
</tr>
|
|
99
|
+
|
|
100
|
+
<tr
|
|
101
|
+
class="rounded-lg group bg-white hover:bg-violet-50 hover:ring-1 ring-violet-300 hover:shadow-[0px_1px_2px_0px_#4B55631A,0px_2px_2px_0px_#4B556314]"
|
|
102
|
+
>
|
|
103
|
+
<td
|
|
104
|
+
v-for="(data, idx) in sqlApplication"
|
|
105
|
+
:key="`data-${idx}`"
|
|
106
|
+
class="py-2.5 px-3 text-sm text-gray-700 w-40"
|
|
107
|
+
:class="
|
|
108
|
+
idx === 0
|
|
109
|
+
? 'rounded-l-lg'
|
|
110
|
+
: idx === sqlApplication.length - 1
|
|
111
|
+
? 'rounded-r-lg'
|
|
112
|
+
: ''
|
|
113
|
+
"
|
|
114
|
+
>
|
|
115
|
+
{{ data }}
|
|
116
|
+
</td>
|
|
117
|
+
</tr>
|
|
118
|
+
|
|
119
|
+
<tr
|
|
120
|
+
class="rounded-lg group bg-white hover:bg-violet-50 hover:ring-1 ring-violet-300 hover:shadow-[0px_1px_2px_0px_#4B55631A,0px_2px_2px_0px_#4B556314]"
|
|
121
|
+
>
|
|
122
|
+
<td
|
|
123
|
+
v-for="(data, idx) in sqlApplication"
|
|
124
|
+
:key="`data-${idx}`"
|
|
125
|
+
class="py-2.5 px-3 text-sm text-gray-700 w-40"
|
|
126
|
+
:class="
|
|
127
|
+
idx === 0
|
|
128
|
+
? 'rounded-l-lg'
|
|
129
|
+
: idx === sqlApplication.length - 1
|
|
130
|
+
? 'rounded-r-lg'
|
|
131
|
+
: ''
|
|
132
|
+
"
|
|
133
|
+
>
|
|
134
|
+
{{ data }}
|
|
135
|
+
</td>
|
|
136
|
+
</tr>
|
|
137
|
+
</tbody>
|
|
138
|
+
</table>
|
|
139
|
+
</div>
|
|
140
|
+
</td>
|
|
141
|
+
</tr>
|
|
142
|
+
</template>
|
|
143
|
+
</ColumnResizeTable>
|
|
144
|
+
</div>
|
|
145
|
+
</template>
|
|
146
|
+
|
|
147
|
+
<script setup lang="ts">
|
|
148
|
+
import { ref } from "vue";
|
|
149
|
+
import { studentData, studentHeader } from "../../data/table";
|
|
150
|
+
import { capitalizeText } from "../../utils/lodash";
|
|
151
|
+
import ChevronBigDown from "../../assets/svg/ChevronBigDown.vue";
|
|
152
|
+
import ColumnResizeTable from "./ColumnResizeTable.vue";
|
|
153
|
+
|
|
154
|
+
//TODO: Dashboard Table
|
|
155
|
+
const selectedRows = ref([]);
|
|
156
|
+
const loading = ref(false);
|
|
157
|
+
const checkedRows = ref([]);
|
|
158
|
+
const defaultSortOrder = ref("asc");
|
|
159
|
+
const limit = ref(5);
|
|
160
|
+
const offset = ref(1);
|
|
161
|
+
const selectedIndex = ref<{ index: string } | null>(null);
|
|
162
|
+
const selected = ref<{ index: string } | null>(null);
|
|
163
|
+
|
|
164
|
+
const select = (_item: any, index: any) => {
|
|
165
|
+
selectedIndex.value = index;
|
|
166
|
+
};
|
|
167
|
+
|
|
168
|
+
const onSort = (field: string, order: string) => {
|
|
169
|
+
const modifier = order === "desc" ? -1 : 1;
|
|
170
|
+
studentData.sort((a: any, b: any) => {
|
|
171
|
+
if (a[field] < b[field]) return -1 * modifier;
|
|
172
|
+
if (a[field] > b[field]) return 1 * modifier;
|
|
173
|
+
return 0;
|
|
174
|
+
});
|
|
175
|
+
};
|
|
176
|
+
|
|
177
|
+
const onPageChange = (offsetData: number) => {
|
|
178
|
+
offset.value = offsetData;
|
|
179
|
+
loading.value = true;
|
|
180
|
+
console.log("@changePage:", offsetData);
|
|
181
|
+
setTimeout(() => {
|
|
182
|
+
loading.value = false;
|
|
183
|
+
}, 1000);
|
|
184
|
+
};
|
|
185
|
+
|
|
186
|
+
const sqlApplication = ref(["Application 1", "Ready to Apply", "Mar 2025"]);
|
|
187
|
+
|
|
188
|
+
const activeRowIndex = ref();
|
|
189
|
+
const rowToggle = (index: any) => {
|
|
190
|
+
if (activeRowIndex.value === index) {
|
|
191
|
+
activeRowIndex.value = null;
|
|
192
|
+
} else {
|
|
193
|
+
activeRowIndex.value = index;
|
|
194
|
+
}
|
|
195
|
+
};
|
|
196
|
+
</script>
|
|
197
|
+
|
|
198
|
+
<style scoped></style>
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div ref="tooltipContainer" class="relative">
|
|
2
|
+
<div ref="tooltipContainer" class="relative cursor-default size-max">
|
|
3
3
|
<div @mouseover="showTooltip" @mouseleave="hideTooltip">
|
|
4
|
-
<slot
|
|
4
|
+
<slot>
|
|
5
|
+
<InformationCircleIcon class="text-current size-5" />
|
|
6
|
+
</slot>
|
|
5
7
|
</div>
|
|
6
8
|
|
|
7
9
|
<div v-if="isVisible" ref="tooltip" class="tooltip">
|
|
@@ -12,6 +14,7 @@
|
|
|
12
14
|
</template>
|
|
13
15
|
|
|
14
16
|
<script setup lang="ts">
|
|
17
|
+
import { InformationCircleIcon } from "@heroicons/vue/24/outline";
|
|
15
18
|
import { createPopper, Instance } from "@popperjs/core";
|
|
16
19
|
import { PropType, ref, nextTick } from "vue";
|
|
17
20
|
|
|
@@ -62,7 +65,7 @@ const createPopperInstance = () => {
|
|
|
62
65
|
|
|
63
66
|
<style lang="scss" scoped>
|
|
64
67
|
.tooltip {
|
|
65
|
-
@apply block z-50
|
|
68
|
+
@apply block z-50 px-3 py-2 text-sm font-light text-white/90 bg-gray-900 shadow-md ring-inset ring-1 ring-gray-950 rounded-lg shadow-gray-100 max-w-xs min-w-0 size-max text-start break-all max-h-96;
|
|
66
69
|
}
|
|
67
70
|
.arrow,
|
|
68
71
|
.arrow::before {
|
package/src/data/table.ts
CHANGED
|
@@ -566,6 +566,7 @@ export const studentHeader = [
|
|
|
566
566
|
name: "Student Name",
|
|
567
567
|
width: 250,
|
|
568
568
|
sortable: true,
|
|
569
|
+
resizable: true,
|
|
569
570
|
},
|
|
570
571
|
{
|
|
571
572
|
value: "country.name",
|
|
@@ -584,6 +585,7 @@ export const studentHeader = [
|
|
|
584
585
|
name: "Lifecycle",
|
|
585
586
|
width: 180,
|
|
586
587
|
sortable: true,
|
|
588
|
+
resizable: true,
|
|
587
589
|
},
|
|
588
590
|
{
|
|
589
591
|
value: "acquisition",
|
|
@@ -602,12 +604,14 @@ export const studentHeader = [
|
|
|
602
604
|
name: "Email",
|
|
603
605
|
width: 200,
|
|
604
606
|
sortable: false,
|
|
607
|
+
resizable: true,
|
|
605
608
|
},
|
|
606
609
|
{
|
|
607
610
|
value: "activeUser",
|
|
608
611
|
name: "Counselor",
|
|
609
612
|
width: 200,
|
|
610
613
|
sortable: false,
|
|
614
|
+
resizable: true,
|
|
611
615
|
},
|
|
612
616
|
];
|
|
613
617
|
|