comand-component-library 4.1.75 → 4.1.76
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/comand-component-library.js +759 -749
- package/package.json +1 -1
- package/src/components/CmdTable.vue +36 -23
package/package.json
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
<div
|
|
3
3
|
:class="['cmd-table-wrapper', {'collapsed': !showTableData, 'full-width': fullWidth, 'has-caption': hasCaption, 'has-overflow': hasOverflow}]">
|
|
4
4
|
<div v-if="collapsible || userCanToggleWidth" class="button-wrapper">
|
|
5
|
+
<!-- begin button to toggle table-width -->
|
|
5
6
|
<a v-if="userCanToggleWidth" class="button"
|
|
6
7
|
href="#" @click.prevent="fullWidth = !fullWidth"
|
|
7
8
|
:title="iconToggleWidth.tooltip"
|
|
@@ -10,6 +11,9 @@
|
|
|
10
11
|
<CmdIcon :iconClass="iconToggleWidth.iconClass" :type="iconToggleWidth.iconType"/>
|
|
11
12
|
<!-- end CmdIcon -->
|
|
12
13
|
</a>
|
|
14
|
+
<!-- end button to toggle table-width -->
|
|
15
|
+
|
|
16
|
+
<!-- begin button to collapse table-content -->
|
|
13
17
|
<a v-if="collapsible" class="button"
|
|
14
18
|
href="#" @click.prevent="showTableData = !showTableData"
|
|
15
19
|
:title="showTableData ? iconCollapse.tooltip : iconExpand.tooltip"
|
|
@@ -19,6 +23,7 @@
|
|
|
19
23
|
:type="showTableData ? iconCollapse.iconType : iconExpand.iconType"/>
|
|
20
24
|
<!-- end CmdIcon -->
|
|
21
25
|
</a>
|
|
26
|
+
<!-- end button to collapse table-content -->
|
|
22
27
|
</div>
|
|
23
28
|
<div class="inner-wrapper" ref="innerWrapper" @scroll="updatePosition">
|
|
24
29
|
<!-- begin CmdSlideButton -->
|
|
@@ -31,32 +36,40 @@
|
|
|
31
36
|
|
|
32
37
|
<!-- begin table -->
|
|
33
38
|
<table ref="table" :class="{'full-width': fullWidth}">
|
|
34
|
-
<
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
39
|
+
<slot name="table-top">
|
|
40
|
+
<caption v-if="tableData.caption?.text || caption?.text" :class="{ hidden: hideCaption }">
|
|
41
|
+
{{ caption?.text || tableData.caption?.text }}
|
|
42
|
+
</caption>
|
|
43
|
+
</slot>
|
|
44
|
+
<slot name="table-head">
|
|
45
|
+
<thead>
|
|
46
|
+
<tr>
|
|
47
|
+
<th v-for="(tablehead, indexHead) in tableData.thead" :key="indexHead" v-html="tablehead"></th>
|
|
48
|
+
</tr>
|
|
49
|
+
</thead>
|
|
50
|
+
</slot>
|
|
42
51
|
<transition :name="useTransition ? 'fade' : null">
|
|
43
|
-
<
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
52
|
+
<slot name="table-body">
|
|
53
|
+
<tbody v-show="showTableData" aria-expanded="true">
|
|
54
|
+
<tr :class="{'active' : tableData.rowIndexHighlighted === indexRows}"
|
|
55
|
+
v-for="(tablerows, indexRows) in tableData.tbody" :key="indexRows">
|
|
56
|
+
<td :class="{'active' : tableData.columnIndexHighlighted === indexData}"
|
|
57
|
+
v-for="(tabledata, indexData) in tablerows" :key="indexData" v-html="tabledata">
|
|
58
|
+
</td>
|
|
59
|
+
</tr>
|
|
60
|
+
</tbody>
|
|
61
|
+
</slot>
|
|
51
62
|
</transition>
|
|
52
63
|
<transition :name="useTransition ? 'fade' : null">
|
|
53
|
-
<
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
64
|
+
<slot name="table-foot">
|
|
65
|
+
<tfoot v-if="tableData.tfoot && tableData.tfoot.length && showTableData" aria-expanded="true">
|
|
66
|
+
<tr>
|
|
67
|
+
<td :class="{'active' : tableData.columnIndexHighlighted === indexFoot}"
|
|
68
|
+
v-for="(tablefoot, indexFoot) in tableData.tfoot" :key="indexFoot" v-html="tablefoot">
|
|
69
|
+
</td>
|
|
70
|
+
</tr>
|
|
71
|
+
</tfoot>
|
|
72
|
+
</slot>
|
|
60
73
|
</transition>
|
|
61
74
|
</table>
|
|
62
75
|
<!-- end table -->
|