comand-component-library 4.1.75 → 4.1.76
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/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 -->
|