edvoyui-component-library-test-flight 0.0.113 → 0.0.115
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 +7 -7
- package/dist/library-vue-ts.css +1 -1
- package/dist/library-vue-ts.es.js +1914 -1879
- package/dist/library-vue-ts.umd.js +12 -12
- package/dist/tabs/EUITabs.vue.d.ts +1 -1
- package/package.json +1 -1
- package/src/assets/svg/ChevronDownStrokeSolid.vue +19 -0
- package/src/components/HelloWorld.vue +19 -4
- package/src/components/dropdown/EUIMultiDropdown.vue +2 -1
- package/src/components/table/UTable.vue +86 -58
- package/src/components/tabs/EUITabs.vue +18 -14
- package/src/data/tab.ts +11 -4
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export * from "/Users/rajmohan/Documents/Workspace/edvoy-ui-v2/src/components/tabs/EUITabs.vue?vue&type=script&setup=true&lang.ts";
|
|
2
|
-
import "/Users/rajmohan/Documents/Workspace/edvoy-ui-v2/src/components/tabs/EUITabs.vue?vue&type=style&index=0&scoped=
|
|
2
|
+
import "/Users/rajmohan/Documents/Workspace/edvoy-ui-v2/src/components/tabs/EUITabs.vue?vue&type=style&index=0&scoped=e35126f7&lang.css";
|
|
3
3
|
declare const _default: any;
|
|
4
4
|
export default _default;
|
|
5
5
|
//# sourceMappingURL=EUITabs.vue.d.ts.map
|
package/package.json
CHANGED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<svg
|
|
3
|
+
width="20"
|
|
4
|
+
height="20"
|
|
5
|
+
viewBox="0 0 20 20"
|
|
6
|
+
fill="none"
|
|
7
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
8
|
+
>
|
|
9
|
+
<path
|
|
10
|
+
d="M15.6766 7.98963C15.8673 7.72584 15.887 7.37513 15.727 7.09165C15.567 6.80817 15.2565 6.64383 14.9321 6.67086C11.6506 6.94432 8.35202 6.94432 5.07051 6.67086C4.7461 6.64382 4.43565 6.80817 4.27562 7.09165C4.11559 7.37513 4.13528 7.72584 4.32603 7.98963C5.68252 9.86546 7.27093 11.5485 9.05045 12.9955C9.60654 13.4477 10.3961 13.4477 10.9522 12.9955C12.7317 11.5485 14.3201 9.86547 15.6766 7.98963Z"
|
|
11
|
+
fill="#111827"
|
|
12
|
+
fill-opacity="0.8"
|
|
13
|
+
/>
|
|
14
|
+
</svg>
|
|
15
|
+
</template>
|
|
16
|
+
|
|
17
|
+
<script setup lang="ts"></script>
|
|
18
|
+
|
|
19
|
+
<style scoped></style>
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
2
|
+
<div class="max-w-screen-xl mx-auto bg-white">
|
|
3
|
+
<h1
|
|
3
4
|
class="my-10 text-2xl font-bold text-center text-gray-900 underline underline-offset-8 decoration-green-400 decoration-wavy"
|
|
4
5
|
>
|
|
5
6
|
Edvoy User Interface
|
|
6
7
|
</h1>
|
|
8
|
+
</div>
|
|
7
9
|
<!-- <div class="ml-[200px]">
|
|
8
|
-
<EUISearchExpand
|
|
9
|
-
|
|
10
|
-
v-model:model-value="searchInput"
|
|
10
|
+
<EUISearchExpand v-model:model-value="searchInput"
|
|
11
11
|
:search-sync="showSearch"
|
|
12
12
|
@input="seachStudent($event?.target?.value)"
|
|
13
13
|
@update:modelValue="seachStudent($event?.target?.value)"
|
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
|
|
16
16
|
</template>
|
|
17
17
|
<script setup lang="ts">
|
|
18
|
+
|
|
18
19
|
// import { ref } from 'vue';
|
|
19
20
|
|
|
20
21
|
// import EUISearchExpand from './searchexpand/EUISearchExpand.vue'
|
|
@@ -469,6 +470,20 @@
|
|
|
469
470
|
{{ activeTab }}
|
|
470
471
|
</template>
|
|
471
472
|
</EUITabs>
|
|
473
|
+
|
|
474
|
+
<div class="bg-white">
|
|
475
|
+
<EUITabs tab-style="design" :tabs="tabData" :defaultActiveIndex="0">
|
|
476
|
+
<template #title="{ tab,tabIndex, activeTab }">
|
|
477
|
+
{{ tab.name }}
|
|
478
|
+
<span class="rounded-3xl px-1.5 text-xss font-medium uppercase leading-none inline-flex items-center h-4 transition-colors duration-100 ease-in-out" :class="[tabIndex === activeTab ? 'text-gray-100 bg-gray-600' : 'bg-gray-300 text-gray-600']">{{ 28399 }}</span>
|
|
479
|
+
</template>
|
|
480
|
+
<template #content="{ activeTab }">
|
|
481
|
+
<div class="p-2 text-sm">
|
|
482
|
+
{{ activeTab }}
|
|
483
|
+
</div>
|
|
484
|
+
</template>
|
|
485
|
+
</EUITabs>
|
|
486
|
+
</div>
|
|
472
487
|
</div>
|
|
473
488
|
|
|
474
489
|
<div
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
>
|
|
14
14
|
<slot name="dropdownName" :open="isOpen">
|
|
15
15
|
{{ title }}
|
|
16
|
-
<
|
|
16
|
+
<ChevronDownStrokeSolid
|
|
17
17
|
:class="isOpen ? 'text-gray-900 rotate-180' : 'text-gray-500'"
|
|
18
18
|
class="transition duration-100 ease-in-out transform rotate-0 size-6 group-hover:text-opacity-80"
|
|
19
19
|
aria-hidden="true"
|
|
@@ -96,6 +96,7 @@
|
|
|
96
96
|
import { ref, defineProps, PropType } from "vue";
|
|
97
97
|
import { onClickOutside } from "@vueuse/core";
|
|
98
98
|
import ChevronDownStroke from "../../assets/svg/ChevronDownStroke.vue";
|
|
99
|
+
import ChevronDownStrokeSolid from "../../assets/svg/ChevronDownStrokeSolid.vue";
|
|
99
100
|
|
|
100
101
|
interface MenuItem {
|
|
101
102
|
text: string;
|
|
@@ -56,61 +56,72 @@
|
|
|
56
56
|
scope="col"
|
|
57
57
|
:class="[
|
|
58
58
|
'snap-start snap-always py-2',
|
|
59
|
-
header?.sortable
|
|
59
|
+
header?.sortable
|
|
60
|
+
? 'cursor-pointer hover:!text-gray-900 pr-8 pl-3'
|
|
61
|
+
: 'px-3',
|
|
60
62
|
isScrolled && headerIndex === 0 ? stickyClass.head : null,
|
|
61
63
|
{ '!bg-gray-200': currentSort === header.value },
|
|
62
|
-
|
|
63
64
|
]"
|
|
64
|
-
:style="
|
|
65
|
+
:style="
|
|
66
|
+
headers.length > 6
|
|
67
|
+
? headerStyle(header)
|
|
68
|
+
: 'width: 100%;min-width: 250px;background-color: rgb(243 244 246);'
|
|
69
|
+
"
|
|
65
70
|
@click="sortBy(header, $event)"
|
|
66
71
|
>
|
|
67
72
|
<div class="relative z-0 w-full">
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
>
|
|
71
|
-
<slot name="header" :header="header">
|
|
72
|
-
{{ capitalizeText(header?.text ?? header?.name ?? "") }}
|
|
73
|
-
</slot>
|
|
74
|
-
<slot v-if="headerOptional" name="headerOptionalItem" ></slot>
|
|
75
|
-
</div>
|
|
76
|
-
<div v-if="header?.sortable" class="absolute -top-0.5 -right-6 size-6 z-10">
|
|
77
|
-
<svg
|
|
78
|
-
width="24"
|
|
79
|
-
height="24"
|
|
80
|
-
viewBox="0 0 24 24"
|
|
81
|
-
fill="none"
|
|
82
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
83
|
-
class="size-6"
|
|
73
|
+
<div
|
|
74
|
+
class="w-full text-sm font-medium text-current truncate font-inter"
|
|
84
75
|
>
|
|
85
|
-
<
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
76
|
+
<slot name="header" :header="header">
|
|
77
|
+
{{ capitalizeText(header?.text ?? header?.name ?? "") }}
|
|
78
|
+
</slot>
|
|
79
|
+
<slot
|
|
80
|
+
v-if="headerOptional"
|
|
81
|
+
name="headerOptionalItem"
|
|
82
|
+
></slot>
|
|
83
|
+
</div>
|
|
84
|
+
<div
|
|
85
|
+
v-if="header?.sortable"
|
|
86
|
+
class="absolute -top-0.5 -right-6 size-6 z-10"
|
|
87
|
+
>
|
|
88
|
+
<svg
|
|
89
|
+
width="24"
|
|
90
|
+
height="24"
|
|
91
|
+
viewBox="0 0 24 24"
|
|
92
|
+
fill="none"
|
|
93
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
94
|
+
class="size-6"
|
|
95
|
+
>
|
|
96
|
+
<rect width="24" height="24" fill="none" />
|
|
97
|
+
<path
|
|
98
|
+
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"
|
|
99
|
+
:stroke="
|
|
100
|
+
currentSortDir === 'asc' &&
|
|
101
|
+
currentSort === header?.value
|
|
102
|
+
? '#111827'
|
|
103
|
+
: '#9ca3af'
|
|
104
|
+
"
|
|
105
|
+
stroke-opacity="0.8"
|
|
106
|
+
stroke-width="2"
|
|
107
|
+
stroke-linecap="round"
|
|
108
|
+
stroke-linejoin="round"
|
|
109
|
+
/>
|
|
110
|
+
<path
|
|
111
|
+
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"
|
|
112
|
+
:stroke="
|
|
113
|
+
currentSortDir === 'desc' &&
|
|
114
|
+
currentSort === header?.value
|
|
115
|
+
? '#111827'
|
|
116
|
+
: '#9ca3af'
|
|
117
|
+
"
|
|
118
|
+
stroke-opacity="0.8"
|
|
119
|
+
stroke-width="2"
|
|
120
|
+
stroke-linecap="round"
|
|
121
|
+
stroke-linejoin="round"
|
|
122
|
+
/>
|
|
123
|
+
</svg>
|
|
124
|
+
</div>
|
|
114
125
|
</div>
|
|
115
126
|
</th>
|
|
116
127
|
</tr>
|
|
@@ -122,7 +133,7 @@
|
|
|
122
133
|
:key="`table-row-${rowIndex}`"
|
|
123
134
|
>
|
|
124
135
|
<tr
|
|
125
|
-
|
|
136
|
+
:id="`row-${rowIndex}`"
|
|
126
137
|
@mouseenter="
|
|
127
138
|
$attrs.mouseenter
|
|
128
139
|
? $emit('mouseenter', row, rowIndex)
|
|
@@ -134,7 +145,7 @@
|
|
|
134
145
|
: null
|
|
135
146
|
"
|
|
136
147
|
class="group"
|
|
137
|
-
:class="{'bg-purple-100': activeRowIndex==rowIndex}"
|
|
148
|
+
:class="{ 'bg-purple-100': activeRowIndex == rowIndex }"
|
|
138
149
|
>
|
|
139
150
|
<td
|
|
140
151
|
v-if="checkable"
|
|
@@ -150,10 +161,13 @@
|
|
|
150
161
|
/>
|
|
151
162
|
</td>
|
|
152
163
|
<td
|
|
153
|
-
|
|
164
|
+
v-for="(header, headerIndex) in headers"
|
|
154
165
|
:key="headerIndex"
|
|
155
166
|
:style="bodyStyle(header)"
|
|
156
|
-
:class="[
|
|
167
|
+
:class="[
|
|
168
|
+
isScrolled && headerIndex === 0 ? stickyClass.body : null,
|
|
169
|
+
{ '!bg-purple-100': activeRowIndex == rowIndex },
|
|
170
|
+
]"
|
|
157
171
|
>
|
|
158
172
|
<slot
|
|
159
173
|
:name="`item.${header?.value}`"
|
|
@@ -161,7 +175,9 @@
|
|
|
161
175
|
:rowIndex="rowIndex"
|
|
162
176
|
:headerIndex="headerIndex"
|
|
163
177
|
>
|
|
164
|
-
<span class="block truncate">{{
|
|
178
|
+
<span class="block truncate">{{
|
|
179
|
+
getValueByPath(row, header?.value)
|
|
180
|
+
}}</span>
|
|
165
181
|
</slot>
|
|
166
182
|
</td>
|
|
167
183
|
</tr>
|
|
@@ -178,13 +194,23 @@
|
|
|
178
194
|
>
|
|
179
195
|
<div
|
|
180
196
|
class="flex items-center justify-center w-[calc(100vw-14rem)]"
|
|
181
|
-
:class="[
|
|
197
|
+
:class="[
|
|
198
|
+
tableHeight
|
|
199
|
+
? tableHeight
|
|
200
|
+
: 'h-[calc(100svh-12rem)] max-h-[calc(100svh-12rem)]',
|
|
201
|
+
]"
|
|
182
202
|
>
|
|
183
203
|
<div class="text-center">
|
|
184
204
|
<div class="mx-auto overflow-hidden rounded-md size-56">
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
205
|
+
<img
|
|
206
|
+
src="@/assets/images/search-nodata.png"
|
|
207
|
+
alt=""
|
|
208
|
+
class="block object-contain object-center h-auto max-w-full opacity-90"
|
|
209
|
+
/>
|
|
210
|
+
</div>
|
|
211
|
+
<div class="my-2 text-xl font-medium text-gray-500">
|
|
212
|
+
No matching records found
|
|
213
|
+
</div>
|
|
188
214
|
</div>
|
|
189
215
|
</div>
|
|
190
216
|
</td>
|
|
@@ -194,6 +220,7 @@
|
|
|
194
220
|
</table>
|
|
195
221
|
</div>
|
|
196
222
|
<div
|
|
223
|
+
v-if="stickyFooter"
|
|
197
224
|
class="sticky bottom-0 left-0 z-50 flex items-center justify-between px-2 py-1 bg-white border-t border-gray-300"
|
|
198
225
|
>
|
|
199
226
|
<slot name="tableCount">
|
|
@@ -267,6 +294,7 @@ const props = defineProps({
|
|
|
267
294
|
default: () => [],
|
|
268
295
|
required: true,
|
|
269
296
|
},
|
|
297
|
+
stickyFooter: { type: Boolean, default: true },
|
|
270
298
|
paginated: { type: Boolean, default: false },
|
|
271
299
|
tableExpanded: { type: Boolean, default: false },
|
|
272
300
|
search: { type: String, default: "" },
|
|
@@ -305,7 +333,7 @@ const {
|
|
|
305
333
|
headers,
|
|
306
334
|
paginated,
|
|
307
335
|
isRowCheckable,
|
|
308
|
-
activeRowIndex
|
|
336
|
+
activeRowIndex,
|
|
309
337
|
} = toRefs(props);
|
|
310
338
|
|
|
311
339
|
// Emits used
|
|
@@ -2,38 +2,37 @@
|
|
|
2
2
|
<div>
|
|
3
3
|
<div
|
|
4
4
|
v-if="tabStyle === 'design'"
|
|
5
|
-
class="flex flex-row items-center justify-
|
|
5
|
+
class="inline-flex flex-row items-center justify-start px-[0.25rem] min-h-[34px] mb-0.5 bg-gray-100 rounded-[0.625rem] ring-1 ring-gray-200/75 gap-2"
|
|
6
6
|
>
|
|
7
|
+
<template v-for="(tab, tabindex) in tabs" :key="tabindex">
|
|
7
8
|
<button
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
:class="[
|
|
9
|
+
type="button"
|
|
10
|
+
:id="`id-${tab.name}`"
|
|
11
|
+
:disabled="tab?.disabled"
|
|
12
|
+
:title="tab?.toolTipText"
|
|
13
|
+
class="[&:not(:focus-visible)]:focus:outline-none relative w-max inline-flex items-center transition-colors duration-100 h-7"
|
|
14
|
+
:class="[
|
|
15
15
|
tab?.disabled ? ' cursor-not-allowed ' : '',
|
|
16
16
|
isHighlighedActivetab ? ' rounded-t-lg !bg-[#EDE9FE] ' : '',
|
|
17
17
|
]"
|
|
18
18
|
role="tab"
|
|
19
19
|
tabindex="-1"
|
|
20
20
|
@click="selectTab(tabindex)"
|
|
21
|
-
:title="tab?.toolTipText"
|
|
22
21
|
>
|
|
23
22
|
<div
|
|
24
23
|
class="pointer-events-none absolute inset-0 transition-transform duration-200 transform z-[1] ease-in-out"
|
|
25
24
|
:class="{
|
|
26
25
|
'translate-x-full': tabindex < activeTabIndex,
|
|
27
26
|
'-translate-x-full': tabindex > activeTabIndex,
|
|
28
|
-
'translate-x-0 rounded-lg bg-gray-
|
|
27
|
+
'translate-x-0 rounded-lg bg-white ring-1 ring-gray-200/75': activeTabIndex === tabindex,
|
|
29
28
|
}"
|
|
30
29
|
/>
|
|
31
30
|
<span
|
|
32
31
|
:class="[
|
|
33
|
-
'w-full px-
|
|
34
|
-
activeTabIndex
|
|
35
|
-
? ' text-
|
|
36
|
-
: ' text-gray-
|
|
32
|
+
'w-full px-2 py-1 text-xs tracking-wide z-10 flex items-center justify-start gap-2',
|
|
33
|
+
activeTabIndex === tabindex
|
|
34
|
+
? ' text-gray-800 font-semibold'
|
|
35
|
+
: ' text-gray-600 font-medium hover:text-gray-600 rounded-lg bg-transparent z-0 transition-colors duration-300 ease-in origin-center',
|
|
37
36
|
]"
|
|
38
37
|
>
|
|
39
38
|
<slot
|
|
@@ -46,6 +45,11 @@
|
|
|
46
45
|
</slot>
|
|
47
46
|
</span>
|
|
48
47
|
</button>
|
|
48
|
+
|
|
49
|
+
<div v-if="tabindex !== tabs.length -1" :class="['self-stretch w-px h-4 my-2',
|
|
50
|
+
tabindex === activeTabIndex - 1 ? 'bg-transparent' : activeTabIndex === tabindex ? 'bg-transparent': 'bg-gray-300']"></div>
|
|
51
|
+
</template>
|
|
52
|
+
|
|
49
53
|
</div>
|
|
50
54
|
<div
|
|
51
55
|
v-else-if="tabStyle === 'border'"
|
package/src/data/tab.ts
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
export default [
|
|
2
2
|
{
|
|
3
|
-
name: "
|
|
3
|
+
name: "Supporting Documents",
|
|
4
4
|
active: true,
|
|
5
5
|
content:
|
|
6
6
|
"About Lorem ipsum dolor, sit amet consectetur adipisicing elit. In laudantium labore error repellendus similique, quibusdam et mollitia iure nesciunt? Impedit ut veniam repudiandae omnis eligendi quis dignissimos animi, rem officia!",
|
|
7
7
|
priority: "Choose the status and priority for this student",
|
|
8
8
|
},
|
|
9
9
|
{
|
|
10
|
-
name: "
|
|
10
|
+
name: "English Proofs",
|
|
11
11
|
active: false,
|
|
12
12
|
content:
|
|
13
13
|
"Application Lorem ipsum dolor, sit amet consectetur adipisicing elit. In laudantium labore error repellendus similique, quibusdam et mollitia iure nesciunt? Impedit ut veniam repudiandae omnis eligendi quis dignissimos animi, rem officia!",
|
|
@@ -17,17 +17,24 @@ export default [
|
|
|
17
17
|
},
|
|
18
18
|
},
|
|
19
19
|
{
|
|
20
|
-
name: "
|
|
20
|
+
name: "Deposits",
|
|
21
21
|
active: false,
|
|
22
22
|
content:
|
|
23
23
|
"Notes Lorem ipsum dolor, sit amet consectetur adipisicing elit. In laudantium labore error repellendus similique, quibusdam et mollitia iure nesciunt? Impedit ut veniam repudiandae omnis eligendi quis dignissimos animi, rem officia!",
|
|
24
24
|
notes: "Here you can add some notes for yourself!",
|
|
25
25
|
},
|
|
26
26
|
{
|
|
27
|
-
name: "
|
|
27
|
+
name: "Interview",
|
|
28
28
|
active: false,
|
|
29
29
|
content:
|
|
30
30
|
"Task Lorem ipsum dolor, sit amet consectetur adipisicing elit. In laudantium labore error repellendus similique, quibusdam et mollitia iure nesciunt? Impedit ut veniam repudiandae omnis eligendi quis dignissimos animi, rem officia!",
|
|
31
31
|
task: "You can add your tasks here!",
|
|
32
32
|
},
|
|
33
|
+
{
|
|
34
|
+
name: "Pre-requisite Course",
|
|
35
|
+
active: false,
|
|
36
|
+
content:
|
|
37
|
+
"Pre-requisite Course Lorem ipsum dolor, sit amet consectetur adipisicing elit. In laudantium labore error repellendus similique, quibusdam et mollitia iure nesciunt? Impedit ut veniam repudiandae omnis eligendi quis dignissimos animi, rem officia!",
|
|
38
|
+
task: "You can add your tasks here!",
|
|
39
|
+
},
|
|
33
40
|
];
|