@mptw/skylens-ui 1.2.15 → 1.2.16
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/components/SLTable.vue +10 -7
- package/package.json +1 -1
package/components/SLTable.vue
CHANGED
|
@@ -22,11 +22,11 @@
|
|
|
22
22
|
:key="field.key"
|
|
23
23
|
)
|
|
24
24
|
.inline-flex.items-center.space-x-1
|
|
25
|
-
component(:is='field.sortable ? "a" : "div"', href='javascript:;' class='inline-flex items-center', @click="field.sortable && sort(field.key)")
|
|
26
|
-
span {{ field.label }}
|
|
27
|
-
SLIcon.sort-icon.ml-2(v-if="field.sortable" icon="sort-up")
|
|
28
25
|
SLElementWithTitle(v-if='field.info', :title="field.info")
|
|
29
26
|
SLIcon.text-primary(icon='info-circle')
|
|
27
|
+
component(:is='field.sortable ? "a" : "div"', href='javascript:;' class='inline-flex items-center', @click="field.sortable && sort(field.key)")
|
|
28
|
+
span {{ field.label }}
|
|
29
|
+
SLIcon.sort-icon.ml-2(v-if="field.sortable" :icon="sortDesc ? 'descending' : 'ascending'")
|
|
30
30
|
tbody(:class="{ 'hoverable': hoverableRows, 'clickable': clickableRows }")
|
|
31
31
|
template(v-for="(item, itemIndex) in bodyHeaderItems" :key="itemIndex")
|
|
32
32
|
tr.body-header-row(
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
v-else
|
|
48
48
|
:colspan="columnSpans[index]"
|
|
49
49
|
:key="`${itemIndex}-${field.key}`"
|
|
50
|
-
:class='[tdBorderColor, field._class]'
|
|
50
|
+
:class='[tdBorderColor, field._class, { sortable: field.sortable }]'
|
|
51
51
|
) {{ item[field.key] }}
|
|
52
52
|
template(v-for="(item, itemIndex) in items" :key="itemIndex")
|
|
53
53
|
tr(
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
v-else
|
|
69
69
|
:colspan="columnSpans[index]"
|
|
70
70
|
:key="`${itemIndex}-${field.key}`"
|
|
71
|
-
:class='[tdBorderColor, field._class]'
|
|
71
|
+
:class='[tdBorderColor, field._class, { sortable: field.sortable }]'
|
|
72
72
|
) {{ item[field.key] }}
|
|
73
73
|
tr(v-if="items.length === 0")
|
|
74
74
|
td(:colspan="fields.length")
|
|
@@ -224,10 +224,9 @@
|
|
|
224
224
|
|
|
225
225
|
th
|
|
226
226
|
@apply px-2 pb-2 text-base font-normal text-primary whitespace-nowrap
|
|
227
|
+
|
|
227
228
|
&.sortable
|
|
228
229
|
cursor pointer
|
|
229
|
-
&.sort-desc .sort-icon
|
|
230
|
-
transform rotate(180deg)
|
|
231
230
|
.sort-icon
|
|
232
231
|
opacity 0
|
|
233
232
|
transition transform 0.2s ease, opacity 0.1s ease
|
|
@@ -245,7 +244,11 @@
|
|
|
245
244
|
&.body-header-row
|
|
246
245
|
td
|
|
247
246
|
@apply bg-bg-middle text-lg font-bold shadow-inline
|
|
247
|
+
|
|
248
248
|
td
|
|
249
249
|
@apply p-2 border-b border-opacity-50 text-base text-gray-2
|
|
250
|
+
|
|
251
|
+
&.text-right.sortable
|
|
252
|
+
@apply pr-8
|
|
250
253
|
</style>
|
|
251
254
|
|