edvoyui-component-library-test-flight 0.0.67 → 0.0.69
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 +2 -2
- package/dist/library-vue-ts.css +1 -1
- package/dist/library-vue-ts.es.js +46 -46
- package/dist/library-vue-ts.umd.js +2 -2
- package/package.json +1 -1
- package/src/components/dropdown/EUIMultiDropdown.vue +1 -1
- package/src/components/table/UTable.scss +16 -22
- package/src/components/table/UTable.vue +14 -18
package/package.json
CHANGED
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
</div>
|
|
37
37
|
|
|
38
38
|
<!-- Sub-menu lists-->
|
|
39
|
-
<div v-if="item.subMenu && activeMenuItem === item.text" class="absolute top-0 z-10 transition-all duration-300 ease-in-out left-full min-w-
|
|
39
|
+
<div v-if="item.subMenu && activeMenuItem === item.text" class="absolute top-0 z-10 transition-all duration-300 ease-in-out left-full min-w-32 max-w-64 w-max">
|
|
40
40
|
<div class="bg-white border border-gray-200 border-solid rounded-lg shadow-2xl ms-2 shadow-gray-300">
|
|
41
41
|
<div v-if="item.enableAction" class="flex items-center justify-center w-full gap-1 px-6 py-3 text-sm font-medium text-gray-900 bg-purple-100 rounded-t-md" @click.prevent="$emit('actionItem', 'action')">
|
|
42
42
|
<slot name="actionName">{{ '+ Action Name' }}</slot>
|
|
@@ -2,53 +2,47 @@
|
|
|
2
2
|
@apply bg-white bg-no-repeat;
|
|
3
3
|
background-image: linear-gradient(to right, white, white),
|
|
4
4
|
linear-gradient(to right, white, white),
|
|
5
|
-
linear-gradient(to right, rgba(
|
|
6
|
-
linear-gradient(to left, rgba(
|
|
5
|
+
linear-gradient(to right, rgba(229, 231, 235, 0.5), rgba(255, 255, 255, 0)),
|
|
6
|
+
linear-gradient(to left, rgba(229, 231, 235, 0.5), rgba(255, 255, 255, 0)),
|
|
7
7
|
linear-gradient(to top, white, rgba(255, 255, 255, 0)),
|
|
8
|
-
linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(
|
|
9
|
-
background-position: left center, right center, left center, right center,
|
|
10
|
-
|
|
8
|
+
linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(229, 231, 235, 0.5));
|
|
9
|
+
background-position: left center, right center, left center, right center,
|
|
10
|
+
left bottom, left bottom;
|
|
11
|
+
background-size: 45px 100%, 32px 100%, 20px 100%, 20px 100%, 100% 100px,
|
|
12
|
+
100% 20px;
|
|
11
13
|
background-attachment: local, local, scroll, scroll, local, scroll;
|
|
12
14
|
|
|
13
|
-
|
|
14
|
-
@apply
|
|
15
|
-
border-spacing: 0;
|
|
15
|
+
table {
|
|
16
|
+
@apply table table-auto border-separate border-spacing-0 box-border w-full;
|
|
16
17
|
thead {
|
|
17
18
|
@apply sticky top-0 left-0 z-20 before:-bottom-px before:left-0 before:absolute before:h-px before:w-full before:bg-gray-300 rounded-xl;
|
|
18
19
|
tr {
|
|
19
|
-
@apply flex flex-grow;
|
|
20
20
|
th {
|
|
21
|
-
@apply bg-gray-50 px-3 py-2 text-sm text-gray-600 text-left first-letter:uppercase border border-l-0 border-solid border-gray-200/50 cursor-auto whitespace-nowrap
|
|
21
|
+
@apply bg-gray-50 px-3 py-2 text-sm text-gray-600 text-left first-letter:uppercase border border-b-0 border-l-0 border-solid border-gray-200/50 cursor-auto whitespace-nowrap last-of-type:rounded-tr-lg first-of-type:rounded-tl-lg first:border-l last:border-r font-medium snap-start snap-always h-10 pr-8;
|
|
22
22
|
transition: all 0.15s ease-out;
|
|
23
23
|
&:first-of-type.checkable {
|
|
24
|
-
|
|
25
|
-
}
|
|
26
|
-
&:last-of-type {
|
|
27
|
-
max-width: unset !important;
|
|
24
|
+
@apply min-h-10 px-2 max-w-[45px] w-[45px] sticky left-0 top-0 z-20 bg-gray-100 flex justify-center;
|
|
28
25
|
}
|
|
29
26
|
}
|
|
30
27
|
}
|
|
31
28
|
}
|
|
32
29
|
tbody {
|
|
33
30
|
tr:not(.norecords) {
|
|
34
|
-
@apply
|
|
31
|
+
@apply transition-all duration-100 ease-in-out last:mb-px;
|
|
35
32
|
&:hover {
|
|
36
33
|
transition: all 0.15s ease-out;
|
|
37
34
|
@apply bg-purple-50;
|
|
38
35
|
td {
|
|
39
36
|
@apply first:rounded-l-sm last:rounded-r-sm transition-colors duration-100 ease-in text-gray-900 bg-purple-50;
|
|
40
|
-
|
|
37
|
+
&:first-of-type.checkable {
|
|
41
38
|
@apply bg-purple-50;
|
|
42
39
|
}
|
|
43
40
|
}
|
|
44
41
|
}
|
|
45
42
|
td {
|
|
46
|
-
@apply relative text-sm font-medium text-gray-600 border-b border-solid break-words
|
|
47
|
-
|
|
48
|
-
@apply w-[45px] text-center sticky left-0 top-0 z-[11] bg-white;
|
|
49
|
-
}
|
|
50
|
-
&:last-of-type {
|
|
51
|
-
max-width: unset !important;
|
|
43
|
+
@apply border-0 first:border-l border-r relative text-sm font-medium text-gray-600 border-b border-solid break-words border-gray-100 py-1.5 px-3 h-12 truncate align-middle;
|
|
44
|
+
&:first-of-type.checkable {
|
|
45
|
+
@apply flex justify-center w-[45px] text-center sticky left-0 top-0 z-[11] bg-white overflow-visible;
|
|
52
46
|
}
|
|
53
47
|
}
|
|
54
48
|
}
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
ref="tableContainer"
|
|
31
31
|
@scroll="handleScroll"
|
|
32
32
|
>
|
|
33
|
-
<table
|
|
33
|
+
<table>
|
|
34
34
|
<thead>
|
|
35
35
|
<tr>
|
|
36
36
|
<th
|
|
@@ -38,7 +38,6 @@
|
|
|
38
38
|
class="checkable"
|
|
39
39
|
style="
|
|
40
40
|
width: 45px;
|
|
41
|
-
flex: 45 0 auto;
|
|
42
41
|
max-width: 45px;
|
|
43
42
|
background-color: rgb(243 244 246);
|
|
44
43
|
"
|
|
@@ -48,7 +47,6 @@
|
|
|
48
47
|
:checked="isAllChecked"
|
|
49
48
|
:indeterminate="isIndeterminate"
|
|
50
49
|
:disabled="isAllUncheckable"
|
|
51
|
-
class="flex justify-center mt-0"
|
|
52
50
|
@change="checkAll"
|
|
53
51
|
/>
|
|
54
52
|
</th>
|
|
@@ -67,18 +65,16 @@
|
|
|
67
65
|
:style="headerStyle(header)"
|
|
68
66
|
@click="sortBy(header, $event)"
|
|
69
67
|
>
|
|
70
|
-
<div
|
|
71
|
-
|
|
68
|
+
<div class="relative z-0 w-full">
|
|
69
|
+
<div
|
|
70
|
+
class="w-full text-sm font-medium text-current truncate font-inter"
|
|
72
71
|
>
|
|
73
72
|
<slot name="header" :header="header">
|
|
74
73
|
{{ capitalizeText(header?.text ?? header?.name ?? "") }}
|
|
75
74
|
</slot>
|
|
76
|
-
<slot
|
|
77
|
-
v-if="headerOptional"
|
|
78
|
-
name="headerOptionalItem"
|
|
79
|
-
></slot>
|
|
75
|
+
<slot v-if="headerOptional" name="headerOptionalItem" ></slot>
|
|
80
76
|
</div>
|
|
81
|
-
<div v-if="header?.sortable" class="
|
|
77
|
+
<div v-if="header?.sortable" class="absolute -top-0.5 -right-6 size-6 z-10">
|
|
82
78
|
<svg
|
|
83
79
|
width="24"
|
|
84
80
|
height="24"
|
|
@@ -116,6 +112,7 @@
|
|
|
116
112
|
/>
|
|
117
113
|
</svg>
|
|
118
114
|
</div>
|
|
115
|
+
</div>
|
|
119
116
|
</th>
|
|
120
117
|
</tr>
|
|
121
118
|
</thead>
|
|
@@ -141,19 +138,18 @@
|
|
|
141
138
|
<td
|
|
142
139
|
v-if="checkable"
|
|
143
140
|
class="checkable"
|
|
144
|
-
style="width: 45px;
|
|
141
|
+
style="width: 45px; max-width: 45px"
|
|
145
142
|
>
|
|
146
143
|
<UCheckbox
|
|
147
144
|
:disabled="!isRowCheckable(row)"
|
|
148
145
|
:checked="isRowChecked(row)"
|
|
149
|
-
class="flex justify-center mt-0"
|
|
150
146
|
@change.prevent.stop="
|
|
151
147
|
($event) => checkRow(row, rowIndex, $event)
|
|
152
148
|
"
|
|
153
149
|
/>
|
|
154
150
|
</td>
|
|
155
151
|
<td
|
|
156
|
-
|
|
152
|
+
v-for="(header, headerIndex) in headers"
|
|
157
153
|
:key="headerIndex"
|
|
158
154
|
:style="bodyStyle(header)"
|
|
159
155
|
:class="[
|
|
@@ -166,7 +162,7 @@
|
|
|
166
162
|
:rowIndex="rowIndex"
|
|
167
163
|
:headerIndex="headerIndex"
|
|
168
164
|
>
|
|
169
|
-
{{ getValueByPath(row, header?.value) }}
|
|
165
|
+
{{ getValueByPath(row, header?.value) }} Lorem ipsum dolor, sit amet consectetur adipisicing elit.
|
|
170
166
|
</slot>
|
|
171
167
|
</td>
|
|
172
168
|
</tr>
|
|
@@ -364,15 +360,15 @@ const computedItems = computed(() => {
|
|
|
364
360
|
|
|
365
361
|
const headerStyle = (header: Header) => ({
|
|
366
362
|
width: `${header.width || 300}px`,
|
|
367
|
-
flex: `${header.width || 300} 0 auto`,
|
|
368
363
|
maxWidth: `${header.width || 300}px`,
|
|
369
364
|
backgroundColor: header.color || "rgb(243 244 246)",
|
|
365
|
+
// flex: `${header.width || 300} 0 auto`,
|
|
370
366
|
});
|
|
371
367
|
|
|
372
368
|
const bodyStyle = (header: Header) => ({
|
|
373
369
|
width: `${header.width || 300}px`,
|
|
374
|
-
flex: `${header.width || 300} 0 auto`,
|
|
375
370
|
maxWidth: `${header.width || 300}px`,
|
|
371
|
+
// flex: `${header.width || 300} 0 auto`,
|
|
376
372
|
});
|
|
377
373
|
|
|
378
374
|
const searchData = (_data: any) => {
|
|
@@ -485,11 +481,11 @@ const stickyClass = computed(() => {
|
|
|
485
481
|
return props.checkable && props.stickyColumn
|
|
486
482
|
? {
|
|
487
483
|
head: "bg-gray-100 sticky left-[45px] top-0 z-20",
|
|
488
|
-
body: "bg-white !sticky left-[45px] top-0 z-10 after:absolute after:content-[''] after:bg-inherit after:w-2 after:h-[103%] after:inset-y-0 after:-right-2 after:bg-gradient-to-r after:from-gray-200 after:from-0% after:via-gray-50 after:via-60% after:z-
|
|
484
|
+
body: "bg-white !sticky left-[45px] top-0 z-10 !overflow-visible after:absolute after:content-[''] after:bg-inherit after:w-2 after:h-[103%] after:inset-y-0 after:-right-2 after:bg-gradient-to-r after:from-gray-200 after:from-0% after:via-gray-50 after:via-60% after:z-10",
|
|
489
485
|
}
|
|
490
486
|
: {
|
|
491
487
|
head: "bg-gray-100 sticky left-0 top-0 z-20",
|
|
492
|
-
body: "bg-white !sticky left-0 top-0 z-10 after:absolute after:content-[''] after:bg-inherit after:w-2 after:h-[103%] after:inset-y-0 after:-right-2 after:bg-gradient-to-r after:from-gray-200 after:from-0% after:via-gray-50 after:via-60% after:z-0
|
|
488
|
+
body: "bg-white !sticky left-0 top-0 z-10 !overflow-visible after:absolute after:content-[''] after:bg-inherit after:w-2 after:h-[103%] after:inset-y-0 after:-right-2 after:bg-gradient-to-r after:from-gray-200 after:from-0% after:via-gray-50 after:via-60% after:z-0",
|
|
493
489
|
};
|
|
494
490
|
});
|
|
495
491
|
|