edvoyui-component-library-test-flight 0.0.164 → 0.0.165
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 +28 -28
- package/dist/library-vue-ts.css +1 -1
- package/dist/library-vue-ts.es.js +1916 -1886
- package/dist/library-vue-ts.umd.js +32 -32
- package/dist/table/EUIDashboardTable.vue.d.ts +1 -1
- package/dist/table/EUITable.vue.d.ts +1 -1
- package/dist/table/GrowthTable.vue.d.ts +1 -1
- package/package.json +1 -1
- package/src/components/HelloWorld.vue +1 -1
- package/src/components/table/ColumnResizeTable.vue +50 -45
- package/src/components/table/EUIDashboardTable.vue +206 -188
- package/src/components/table/EUITable.vue +45 -29
- package/src/components/table/GrowthTable.vue +20 -16
- package/src/components/table/UTable.vue +78 -51
|
@@ -1,21 +1,25 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div>
|
|
3
3
|
<Transition name="fade" mode="out-in">
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
4
|
+
<template v-if="loading">
|
|
5
|
+
<slot name="loader" :loading="loading" :height="tableHeight">
|
|
6
|
+
<div
|
|
7
|
+
:class="[
|
|
8
|
+
'overflow-hidden relative z-0 isolate bg-white backdrop-blur transition-colors duration-150 ease-in-out rounded-xl border border-gray-50',
|
|
9
|
+
tableHeight
|
|
10
|
+
? tableHeight
|
|
11
|
+
: 'h-[calc(100svh-9rem)] max-h-[calc(100svh-9rem)]',
|
|
12
|
+
]"
|
|
13
|
+
>
|
|
14
|
+
<div
|
|
15
|
+
class="absolute flex items-center z-[calc(infinity)] w-full h-auto pointer-events-none inset-0"
|
|
16
|
+
>
|
|
17
|
+
<EUICircleLoader />
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
20
|
+
</slot>
|
|
21
|
+
</template>
|
|
22
|
+
|
|
19
23
|
<div v-else class="relative w-full mx-auto overflow-hidden">
|
|
20
24
|
<div
|
|
21
25
|
id="student-table"
|
|
@@ -116,8 +120,12 @@
|
|
|
116
120
|
:key="`table-row-${rowIndex}`"
|
|
117
121
|
>
|
|
118
122
|
<tr
|
|
119
|
-
|
|
120
|
-
|
|
123
|
+
:id="`row-${rowIndex}`"
|
|
124
|
+
:class="
|
|
125
|
+
activeRowIndex == rowIndex
|
|
126
|
+
? '!bg-purple-50 !ring-1 !ring-purple-100 !ring-inset'
|
|
127
|
+
: ''
|
|
128
|
+
"
|
|
121
129
|
@mouseenter="
|
|
122
130
|
$attrs.mouseenter
|
|
123
131
|
? $emit('mouseenter', row, rowIndex)
|
|
@@ -130,8 +138,14 @@
|
|
|
130
138
|
"
|
|
131
139
|
>
|
|
132
140
|
<template v-if="checkable">
|
|
133
|
-
<td
|
|
134
|
-
|
|
141
|
+
<td
|
|
142
|
+
class="checkable"
|
|
143
|
+
:class="
|
|
144
|
+
activeRowIndex == rowIndex
|
|
145
|
+
? '!bg-purple-50 !ring-1 !ring-purple-100 !ring-inset'
|
|
146
|
+
: ''
|
|
147
|
+
"
|
|
148
|
+
>
|
|
135
149
|
<EUITableCheckbox
|
|
136
150
|
:disabled="!isRowCheckable(row)"
|
|
137
151
|
:checked="isRowChecked(row)"
|
|
@@ -146,9 +160,10 @@
|
|
|
146
160
|
:key="headerIndex"
|
|
147
161
|
:class="[
|
|
148
162
|
isScrolled && headerIndex === 0 ? stickyClass.body : '',
|
|
149
|
-
activeRowIndex==rowIndex
|
|
163
|
+
activeRowIndex == rowIndex
|
|
164
|
+
? '!bg-purple-50 !ring-1 !ring-purple-100 !ring-inset'
|
|
165
|
+
: '',
|
|
150
166
|
]"
|
|
151
|
-
|
|
152
167
|
>
|
|
153
168
|
<slot
|
|
154
169
|
:name="`item.${header?.value}`"
|
|
@@ -171,12 +186,12 @@
|
|
|
171
186
|
checkable === true ? headers.length + 1 : headers.length
|
|
172
187
|
"
|
|
173
188
|
>
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
189
|
+
<slot name="no-records">
|
|
190
|
+
<div
|
|
191
|
+
class="flex items-center justify-center text-xl font-medium text-gray-500 h-[calc(100svh-18rem)] max-w-screen-xl"
|
|
192
|
+
>
|
|
193
|
+
No matching records found
|
|
194
|
+
</div>
|
|
180
195
|
</slot>
|
|
181
196
|
</td>
|
|
182
197
|
</tr>
|
|
@@ -293,7 +308,8 @@ const {
|
|
|
293
308
|
search,
|
|
294
309
|
headers,
|
|
295
310
|
paginated,
|
|
296
|
-
isRowCheckable,
|
|
311
|
+
isRowCheckable,
|
|
312
|
+
activeRowIndex,
|
|
297
313
|
} = toRefs(props);
|
|
298
314
|
|
|
299
315
|
const currentSort = ref(defaultSort.value);
|
|
@@ -382,7 +398,7 @@ const emit = defineEmits([
|
|
|
382
398
|
|
|
383
399
|
const changeLimit = (limitData: number) => {
|
|
384
400
|
limit.value = limitData;
|
|
385
|
-
newCurrentPage.value =
|
|
401
|
+
newCurrentPage.value = 0;
|
|
386
402
|
emit("update:currentPage", newCurrentPage.value);
|
|
387
403
|
emit("changeLimit", limitData);
|
|
388
404
|
};
|
|
@@ -1,21 +1,25 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div>
|
|
3
3
|
<Transition name="fade" mode="out-in">
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
4
|
+
<template v-if="loading">
|
|
5
|
+
<slot name="loader" :loading="loading" :height="tableHeight">
|
|
6
|
+
<div
|
|
7
|
+
:class="[
|
|
8
|
+
'overflow-hidden relative z-0 isolate bg-white backdrop-blur transition-colors duration-150 ease-in-out rounded-xl border border-gray-50',
|
|
9
|
+
tableHeight
|
|
10
|
+
? tableHeight
|
|
11
|
+
: 'h-[calc(100svh-9rem)] max-h-[calc(100svh-9rem)]',
|
|
12
|
+
]"
|
|
13
|
+
>
|
|
14
|
+
<div
|
|
15
|
+
class="absolute flex items-center z-[calc(infinity)] w-full h-auto pointer-events-none inset-0"
|
|
16
|
+
>
|
|
17
|
+
<EUICircleLoader />
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
20
|
+
</slot>
|
|
21
|
+
</template>
|
|
22
|
+
|
|
19
23
|
<div v-else class="relative w-full mx-auto overflow-hidden">
|
|
20
24
|
<div
|
|
21
25
|
id="growth-table"
|
|
@@ -397,7 +401,7 @@ const emit = defineEmits([
|
|
|
397
401
|
|
|
398
402
|
const changeLimit = (limitData: number) => {
|
|
399
403
|
limit.value = limitData;
|
|
400
|
-
newCurrentPage.value =
|
|
404
|
+
newCurrentPage.value = 0;
|
|
401
405
|
emit("update:currentPage", newCurrentPage.value);
|
|
402
406
|
emit("changeLimit", limitData);
|
|
403
407
|
};
|
|
@@ -1,21 +1,24 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div>
|
|
3
3
|
<Transition name="fade" mode="out-in">
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
4
|
+
<template v-if="loading">
|
|
5
|
+
<slot name="loader" :loading="loading" :height="tableHeight">
|
|
6
|
+
<div
|
|
7
|
+
:class="[
|
|
8
|
+
'overflow-hidden relative z-0 isolate bg-white backdrop-blur transition-colors duration-150 ease-in-out rounded-xl border border-gray-50',
|
|
9
|
+
tableHeight
|
|
10
|
+
? tableHeight
|
|
11
|
+
: 'h-[calc(100svh-9rem)] max-h-[calc(100svh-9rem)]',
|
|
12
|
+
]"
|
|
13
|
+
>
|
|
14
|
+
<div
|
|
15
|
+
class="absolute flex items-center z-[calc(infinity)] w-full h-auto pointer-events-none inset-0"
|
|
16
|
+
>
|
|
17
|
+
<EUICircleLoader />
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
20
|
+
</slot>
|
|
21
|
+
</template>
|
|
19
22
|
<div v-else class="relative max-w-full mx-auto overflow-hidden">
|
|
20
23
|
<div
|
|
21
24
|
:class="[
|
|
@@ -72,7 +75,7 @@
|
|
|
72
75
|
<div class="relative z-0 w-full">
|
|
73
76
|
<div
|
|
74
77
|
class="w-full text-sm font-bold text-current font-inter"
|
|
75
|
-
:class="{
|
|
78
|
+
:class="{ truncate: !header?.showHeaderInfoText }"
|
|
76
79
|
>
|
|
77
80
|
<slot name="header" :header="header" :index="headerIndex">
|
|
78
81
|
{{ capitalizeText(header?.text ?? header?.name ?? "") }}
|
|
@@ -81,14 +84,24 @@
|
|
|
81
84
|
v-if="headerOptional"
|
|
82
85
|
name="headerOptionalItem"
|
|
83
86
|
></slot>
|
|
84
|
-
<EUITooltip
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
87
|
+
<EUITooltip
|
|
88
|
+
v-if="header?.showInfoText"
|
|
89
|
+
placement="top"
|
|
90
|
+
class="inline-block ms-0.5"
|
|
91
|
+
>
|
|
92
|
+
<template v-slot:default>
|
|
93
|
+
<InformationCircleIcon
|
|
94
|
+
class="inline-block text-gray-500 size-4"
|
|
95
|
+
/>
|
|
96
|
+
</template>
|
|
97
|
+
<template v-slot:tooltip>
|
|
98
|
+
<div
|
|
99
|
+
class="z-50 max-w-xs break-words whitespace-normal min-w-max"
|
|
100
|
+
>
|
|
101
|
+
{{ header?.showHeaderInfoText }}
|
|
102
|
+
</div>
|
|
103
|
+
</template>
|
|
104
|
+
</EUITooltip>
|
|
92
105
|
</div>
|
|
93
106
|
<div
|
|
94
107
|
v-if="header?.sortable"
|
|
@@ -184,14 +197,27 @@
|
|
|
184
197
|
:rowIndex="rowIndex"
|
|
185
198
|
:headerIndex="headerIndex"
|
|
186
199
|
>
|
|
187
|
-
<span
|
|
200
|
+
<span
|
|
201
|
+
class="block"
|
|
202
|
+
:class="{ truncate: !header.showInfoText }"
|
|
203
|
+
>
|
|
188
204
|
{{ getValueByPath(row, header?.value) }}
|
|
189
|
-
<EUITooltip
|
|
205
|
+
<EUITooltip
|
|
206
|
+
v-if="header?.showInfoText"
|
|
207
|
+
placement="top"
|
|
208
|
+
class="inline-block ms-0.5"
|
|
209
|
+
>
|
|
190
210
|
<template v-slot:default>
|
|
191
|
-
<InformationCircleIcon
|
|
211
|
+
<InformationCircleIcon
|
|
212
|
+
class="inline-block text-gray-500 size-4"
|
|
213
|
+
/>
|
|
192
214
|
</template>
|
|
193
215
|
<template v-slot:tooltip>
|
|
194
|
-
<div
|
|
216
|
+
<div
|
|
217
|
+
class="z-50 max-w-xs break-words whitespace-normal min-w-max"
|
|
218
|
+
>
|
|
219
|
+
{{ header?.showInfoText }}
|
|
220
|
+
</div>
|
|
195
221
|
</template>
|
|
196
222
|
</EUITooltip>
|
|
197
223
|
</span>
|
|
@@ -214,30 +240,31 @@
|
|
|
214
240
|
checkable === true ? headers.length + 1 : headers.length
|
|
215
241
|
"
|
|
216
242
|
>
|
|
217
|
-
|
|
218
|
-
<div
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
243
|
+
<slot name="no-records">
|
|
244
|
+
<div
|
|
245
|
+
class="flex items-center justify-center w-[calc(100vw-14rem)]"
|
|
246
|
+
:class="[
|
|
247
|
+
tableHeight
|
|
248
|
+
? tableHeight
|
|
249
|
+
: 'h-[calc(100svh-12rem)] max-h-[calc(100svh-12rem)]',
|
|
250
|
+
]"
|
|
251
|
+
>
|
|
252
|
+
<div class="text-center">
|
|
253
|
+
<div
|
|
254
|
+
class="mx-auto overflow-hidden rounded-md size-56"
|
|
255
|
+
>
|
|
256
|
+
<img
|
|
257
|
+
src="@/assets/images/search-nodata.png"
|
|
258
|
+
alt=""
|
|
259
|
+
class="block object-contain object-center h-auto max-w-full opacity-90"
|
|
260
|
+
/>
|
|
261
|
+
</div>
|
|
262
|
+
<div class="my-2 text-xl font-medium text-gray-500">
|
|
263
|
+
No matching records found
|
|
264
|
+
</div>
|
|
236
265
|
</div>
|
|
237
266
|
</div>
|
|
238
|
-
</
|
|
239
|
-
</slot>
|
|
240
|
-
|
|
267
|
+
</slot>
|
|
241
268
|
</td>
|
|
242
269
|
</tr>
|
|
243
270
|
</template>
|
|
@@ -441,7 +468,7 @@ const searchData = (_data: any) => {
|
|
|
441
468
|
|
|
442
469
|
const changeLimit = (limitData: number) => {
|
|
443
470
|
limit.value = limitData;
|
|
444
|
-
newCurrentPage.value =
|
|
471
|
+
newCurrentPage.value = 0;
|
|
445
472
|
emit("update:currentPage", newCurrentPage.value);
|
|
446
473
|
emit("changeLimit", limitData);
|
|
447
474
|
};
|