vue-table2next 0.0.5 → 0.0.7
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/package.json
CHANGED
|
@@ -4,71 +4,94 @@
|
|
|
4
4
|
<table :class="['vuetable', $_css.tableClass, $_css.tableHeaderClass]">
|
|
5
5
|
<vuetable-col-group :is-header="true"/>
|
|
6
6
|
<thead>
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
7
|
+
<slot name="tableHeader" :fields="tableFields">
|
|
8
|
+
<template v-for="(header, headerIndex) in headerRows">
|
|
9
|
+
<component :is="header" :key="headerIndex" :fields="tableFields"
|
|
10
|
+
@vuetable:header-event="onHeaderEvent"
|
|
11
|
+
></component>
|
|
12
|
+
</template>
|
|
13
|
+
</slot>
|
|
14
14
|
</thead>
|
|
15
15
|
</table>
|
|
16
16
|
</div>
|
|
17
17
|
|
|
18
18
|
<div class="vuetable-body-wrapper" :class="{'fixed-header' : isFixedHeader}" :style="{height: tableHeight}">
|
|
19
19
|
<table :class="['vuetable', isFixedHeader ? 'fixed-header' : '', $_css.tableClass, $_css.tableBodyClass]">
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
20
|
+
<vuetable-col-group/>
|
|
21
|
+
<thead v-if="!isFixedHeader">
|
|
22
|
+
<slot name="tableHeader" :fields="tableFields">
|
|
23
|
+
<template v-for="(header, headerIndex) in headerRows">
|
|
24
|
+
<component :is="header" :key="headerIndex" :fields="tableFields"
|
|
25
|
+
@vuetable:header-event="onHeaderEvent"
|
|
26
|
+
></component>
|
|
27
|
+
</template>
|
|
28
|
+
</slot>
|
|
29
|
+
</thead>
|
|
30
|
+
<tfoot>
|
|
31
31
|
<slot name="tableFooter" :fields="tableFields"></slot>
|
|
32
|
-
|
|
33
|
-
|
|
32
|
+
</tfoot>
|
|
33
|
+
<tbody v-cloak class="vuetable-body">
|
|
34
34
|
<template v-for="(item, itemIndex) in tableData">
|
|
35
35
|
<tr :item-index="itemIndex"
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
36
|
+
:key="itemIndex"
|
|
37
|
+
:class="onRowClass(item, itemIndex)"
|
|
38
|
+
@click="onRowClicked(item, itemIndex, $event)"
|
|
39
|
+
@dblclick="onRowDoubleClicked(item, itemIndex, $event)"
|
|
40
|
+
@mouseover="onMouseOver(item, itemIndex, $event)"
|
|
41
41
|
>
|
|
42
42
|
<template v-for="(field, fieldIndex) in tableFields">
|
|
43
43
|
<template v-if="field.visible">
|
|
44
44
|
<template v-if="isFieldComponent(field.name)">
|
|
45
|
-
<
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
45
|
+
<template v-if="field.children && Array.isArray(field.children)">
|
|
46
|
+
<component v-for="(fieldChildren, fieldChildrenIndex) in field.children"
|
|
47
|
+
:is="fieldChildren.name"
|
|
48
|
+
:key="'child_td_'+ fieldChildrenIndex"
|
|
49
|
+
:row-data="item" :row-index="itemIndex" :row-field="field"
|
|
50
|
+
:vuetable="vuetable"
|
|
51
|
+
:class="bodyClass('vuetable-component', field)"
|
|
52
|
+
:style="{width: field.width}"
|
|
53
|
+
@vuetable:field-event="onFieldEvent"
|
|
54
|
+
></component>
|
|
55
|
+
</template>
|
|
56
|
+
<component v-else
|
|
57
|
+
:is="field.name"
|
|
58
|
+
:key="fieldIndex"
|
|
59
|
+
:row-data="item" :row-index="itemIndex" :row-field="field"
|
|
60
|
+
:vuetable="vuetable"
|
|
61
|
+
:class="bodyClass('vuetable-component', field)"
|
|
62
|
+
:style="{width: field.width}"
|
|
63
|
+
@vuetable:field-event="onFieldEvent"
|
|
52
64
|
></component>
|
|
53
65
|
</template>
|
|
54
66
|
<template v-else-if="isFieldSlot(field.name)">
|
|
55
67
|
<td :class="bodyClass('vuetable-slot', field)"
|
|
56
|
-
|
|
57
|
-
|
|
68
|
+
:key="fieldIndex"
|
|
69
|
+
:style="{width: field.width}"
|
|
58
70
|
>
|
|
59
71
|
<slot :name="field.name"
|
|
60
|
-
|
|
72
|
+
:row-data="item" :row-index="itemIndex" :row-field="field"
|
|
61
73
|
></slot>
|
|
62
74
|
</td>
|
|
63
75
|
</template>
|
|
64
76
|
<template v-else>
|
|
65
|
-
<
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
77
|
+
<template v-if="field.children && Array.isArray(field.children)">
|
|
78
|
+
<td v-for="(fieldChildren, fieldChildrenIndex) in field.children"
|
|
79
|
+
:class="bodyClass('vuetable-td-'+fieldChildren.name, fieldChildren)"
|
|
80
|
+
:key="'child_td_'+ fieldChildrenIndex"
|
|
81
|
+
:style="{width: fieldChildren.width}"
|
|
82
|
+
v-html="renderNormalField(fieldChildren, item)"
|
|
83
|
+
@click="onCellClicked(item, itemIndex, fieldChildren, $event)"
|
|
84
|
+
@dblclick="onCellDoubleClicked(item, itemIndex, fieldChildren, $event)"
|
|
85
|
+
@contextmenu="onCellRightClicked(item, itemIndex, fieldChildren, $event)"
|
|
86
|
+
></td>
|
|
87
|
+
</template>
|
|
88
|
+
<td v-else :class="bodyClass('vuetable-td-'+field.name, field)"
|
|
89
|
+
:key="fieldIndex"
|
|
90
|
+
:style="{width: field.width}"
|
|
91
|
+
v-html="renderNormalField(field, item)"
|
|
92
|
+
@click="onCellClicked(item, itemIndex, field, $event)"
|
|
93
|
+
@dblclick="onCellDoubleClicked(item, itemIndex, field, $event)"
|
|
94
|
+
@contextmenu="onCellRightClicked(item, itemIndex, field, $event)"
|
|
72
95
|
></td>
|
|
73
96
|
</template>
|
|
74
97
|
</template>
|
|
@@ -77,14 +100,14 @@
|
|
|
77
100
|
<template v-if="useDetailRow">
|
|
78
101
|
<transition :name="detailRowTransition" :key="itemIndex">
|
|
79
102
|
<tr v-if="isVisibleDetailRow(item[trackBy])"
|
|
80
|
-
|
|
81
|
-
|
|
103
|
+
@click="onDetailRowClick(item, itemIndex, $event)"
|
|
104
|
+
:class="onDetailRowClass(item, itemIndex)"
|
|
82
105
|
>
|
|
83
106
|
<td :colspan="countVisibleFields">
|
|
84
107
|
<component :is="detailRowComponent"
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
108
|
+
:row-data="item"
|
|
109
|
+
:row-index="itemIndex"
|
|
110
|
+
:options="detailRowOptions"
|
|
88
111
|
></component>
|
|
89
112
|
</td>
|
|
90
113
|
</tr>
|
|
@@ -94,8 +117,8 @@
|
|
|
94
117
|
<template v-if="displayEmptyDataRow">
|
|
95
118
|
<tr>
|
|
96
119
|
<td :colspan="countVisibleFields"
|
|
97
|
-
|
|
98
|
-
|
|
120
|
+
class="vuetable-empty-result"
|
|
121
|
+
v-html="noDataTemplate"
|
|
99
122
|
></td>
|
|
100
123
|
</tr>
|
|
101
124
|
</template>
|
|
@@ -106,7 +129,7 @@
|
|
|
106
129
|
</template>
|
|
107
130
|
</tr>
|
|
108
131
|
</template>
|
|
109
|
-
|
|
132
|
+
</tbody>
|
|
110
133
|
</table>
|
|
111
134
|
</div>
|
|
112
135
|
</div>
|
|
@@ -201,8 +224,8 @@ export default {
|
|
|
201
224
|
default: null
|
|
202
225
|
},
|
|
203
226
|
perPage: {
|
|
204
|
-
|
|
205
|
-
|
|
227
|
+
type: Number,
|
|
228
|
+
default: 10
|
|
206
229
|
},
|
|
207
230
|
/**
|
|
208
231
|
* Page that should be displayed when the table is first displayed
|
|
@@ -350,9 +373,17 @@ export default {
|
|
|
350
373
|
return this.tableData && typeof(this.tableData[0][this.trackBy]) !== 'undefined'
|
|
351
374
|
},
|
|
352
375
|
countVisibleFields () {
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
376
|
+
let count = 0;
|
|
377
|
+
|
|
378
|
+
this.tableFields.forEach(field => {
|
|
379
|
+
if (field.children && Array.isArray(field.children)) {
|
|
380
|
+
count += field.children.length;
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
count++;
|
|
384
|
+
})
|
|
385
|
+
|
|
386
|
+
return count;
|
|
356
387
|
},
|
|
357
388
|
countTableData () {
|
|
358
389
|
if (this.tableData === null) {
|
|
@@ -446,9 +477,9 @@ export default {
|
|
|
446
477
|
},
|
|
447
478
|
|
|
448
479
|
fields (newVal, oldVal) {
|
|
449
|
-
|
|
480
|
+
this.normalizeFields();
|
|
450
481
|
},
|
|
451
|
-
},
|
|
482
|
+
},
|
|
452
483
|
|
|
453
484
|
methods: {
|
|
454
485
|
|
|
@@ -596,8 +627,8 @@ export default {
|
|
|
596
627
|
|
|
597
628
|
renderNormalField (field, item) {
|
|
598
629
|
return this.hasFormatter(field)
|
|
599
|
-
|
|
600
|
-
|
|
630
|
+
? this.callFormatter(field, item)
|
|
631
|
+
: this.getObjectValue(item, field.name, '')
|
|
601
632
|
},
|
|
602
633
|
|
|
603
634
|
isFieldComponent (fieldName) {
|
|
@@ -607,7 +638,7 @@ export default {
|
|
|
607
638
|
}
|
|
608
639
|
|
|
609
640
|
return fieldName.slice(0, this.fieldPrefix.length) === this.fieldPrefix
|
|
610
|
-
|
|
641
|
+
|| fieldName.slice(0, 2) === '__'
|
|
611
642
|
},
|
|
612
643
|
|
|
613
644
|
isFieldSlot (fieldName) {
|
|
@@ -675,9 +706,9 @@ export default {
|
|
|
675
706
|
|
|
676
707
|
if (this.tablePagination === null) {
|
|
677
708
|
this.warn('vuetable: pagination-path "' + this.paginationPath + '" not found. '
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
709
|
+
+ 'It looks like the data returned from the server does not have pagination information '
|
|
710
|
+
+ "or you may have set it incorrectly.\n"
|
|
711
|
+
+ 'You can explicitly suppress this warning by setting pagination-path="".'
|
|
681
712
|
)
|
|
682
713
|
}
|
|
683
714
|
|
|
@@ -743,7 +774,7 @@ export default {
|
|
|
743
774
|
}
|
|
744
775
|
|
|
745
776
|
if ('offset' === this.paginationMode) {
|
|
746
|
-
|
|
777
|
+
params[this.queryParams.page] = this.currentPage
|
|
747
778
|
}
|
|
748
779
|
|
|
749
780
|
params[this.queryParams.perPage] = this.perPage
|
|
@@ -777,7 +808,7 @@ export default {
|
|
|
777
808
|
},
|
|
778
809
|
|
|
779
810
|
isSortable (field) {
|
|
780
|
-
return field.sortField
|
|
811
|
+
return field.sortField ?? false;
|
|
781
812
|
},
|
|
782
813
|
|
|
783
814
|
currentSortOrderPosition (field) {
|
|
@@ -879,7 +910,7 @@ export default {
|
|
|
879
910
|
if ( ! this.hasFormatter(field)) return
|
|
880
911
|
|
|
881
912
|
if (typeof(field.formatter) === 'function') {
|
|
882
|
-
|
|
913
|
+
return field.formatter(this.getObjectValue(item, field.name), this)
|
|
883
914
|
}
|
|
884
915
|
},
|
|
885
916
|
|
|
@@ -960,8 +991,8 @@ export default {
|
|
|
960
991
|
hideDetailRow (rowId) {
|
|
961
992
|
if (this.isVisibleDetailRow(rowId)) {
|
|
962
993
|
this.visibleDetailRows.splice(
|
|
963
|
-
|
|
964
|
-
|
|
994
|
+
this.visibleDetailRows.indexOf(rowId),
|
|
995
|
+
1
|
|
965
996
|
)
|
|
966
997
|
this.updateHeader()
|
|
967
998
|
}
|
|
@@ -1147,9 +1178,9 @@ export default {
|
|
|
1147
1178
|
this.gotoNextPage()
|
|
1148
1179
|
} else {
|
|
1149
1180
|
if (this.paginationMode === 'cursor') {
|
|
1150
|
-
|
|
1181
|
+
this.gotoCursor(page)
|
|
1151
1182
|
} else {
|
|
1152
|
-
|
|
1183
|
+
this.gotoPage(page)
|
|
1153
1184
|
}
|
|
1154
1185
|
}
|
|
1155
1186
|
},
|
|
@@ -4,15 +4,15 @@
|
|
|
4
4
|
<template v-if="field.visible">
|
|
5
5
|
<template v-if="vuetable.isFieldComponent(field.name)">
|
|
6
6
|
<component :is="field.name"
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
7
|
+
:row-field="field"
|
|
8
|
+
:is-header="true"
|
|
9
|
+
:title="renderTitle(field)"
|
|
10
|
+
:vuetable="vuetable"
|
|
11
|
+
:key="fieldIndex"
|
|
12
|
+
:class="headerClass('vuetable-th-component', field)"
|
|
13
|
+
:style="{width: field.width}"
|
|
14
|
+
@vuetable:header-event="vuetable.onHeaderEvent"
|
|
15
|
+
@click="onColumnHeaderClicked(field, $event)"
|
|
16
16
|
></component>
|
|
17
17
|
</template>
|
|
18
18
|
<template v-else-if="vuetable.isFieldSlot(field.name)">
|
|
@@ -24,13 +24,26 @@
|
|
|
24
24
|
></th>
|
|
25
25
|
</template>
|
|
26
26
|
<template v-else>
|
|
27
|
-
<
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
27
|
+
<template v-if="field.children && Array.isArray(field.children)">
|
|
28
|
+
<th v-for="(fieldChildren, fieldChildrenIndex) in field.children"
|
|
29
|
+
@click="onColumnHeaderClicked(fieldChildren, $event)"
|
|
30
|
+
:key="'child_th_'+fieldChildrenIndex"
|
|
31
|
+
:id="'_' + fieldChildren.name"
|
|
32
|
+
:class="headerClass('vuetable-th', fieldChildren)"
|
|
33
|
+
:style="{width: fieldChildren.width}"
|
|
34
|
+
v-html="renderTitle(fieldChildren)"
|
|
35
|
+
></th>
|
|
36
|
+
</template>
|
|
37
|
+
<template v-else>
|
|
38
|
+
<th v-if="isHeaderVisible(field)"
|
|
39
|
+
@click="onColumnHeaderClicked(field, $event)"
|
|
40
|
+
:key="fieldIndex"
|
|
41
|
+
:id="'_' + field.name"
|
|
42
|
+
:class="headerClass('vuetable-th', field)"
|
|
43
|
+
:style="{width: field.width}"
|
|
44
|
+
v-html="renderTitle(field)"
|
|
45
|
+
></th>
|
|
46
|
+
</template>
|
|
34
47
|
</template>
|
|
35
48
|
</template>
|
|
36
49
|
</template>
|
|
@@ -70,6 +83,14 @@ export default {
|
|
|
70
83
|
return name.replace(this.vuetable.fieldPrefix, '')
|
|
71
84
|
},
|
|
72
85
|
|
|
86
|
+
isHeaderVisible (field) {
|
|
87
|
+
if (field.header) {
|
|
88
|
+
return field.header.visible ?? true
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
return true;
|
|
92
|
+
},
|
|
93
|
+
|
|
73
94
|
headerClass (base, field) {
|
|
74
95
|
return [
|
|
75
96
|
base + '-' + this.toSnakeCase(field.name),
|
|
@@ -81,8 +102,8 @@ export default {
|
|
|
81
102
|
|
|
82
103
|
toSnakeCase (str) {
|
|
83
104
|
return typeof(str) === 'string' && str.replace(/([A-Z])/g, (chr) => "_"+chr.toLowerCase())
|
|
84
|
-
|
|
85
|
-
|
|
105
|
+
.replace(' ', '_')
|
|
106
|
+
.replace('.', '_')
|
|
86
107
|
},
|
|
87
108
|
|
|
88
109
|
sortClass (field) {
|
|
@@ -149,8 +170,8 @@ export default {
|
|
|
149
170
|
if (typeof(field.title) === 'function') return field.title()
|
|
150
171
|
|
|
151
172
|
return typeof(field.title) === 'undefined'
|
|
152
|
-
|
|
153
|
-
|
|
173
|
+
? field.name.replace('.', ' ')
|
|
174
|
+
: field.title
|
|
154
175
|
},
|
|
155
176
|
|
|
156
177
|
sortIconOpacity (field) {
|
|
@@ -182,8 +203,8 @@ export default {
|
|
|
182
203
|
|
|
183
204
|
renderIconTag (classes, options = '') {
|
|
184
205
|
return typeof(this.css.renderIcon) === 'undefined'
|
|
185
|
-
|
|
186
|
-
|
|
206
|
+
? `<i class="${classes.join(' ')}" ${options}></i>`
|
|
207
|
+
: this.css.renderIcon(classes, options)
|
|
187
208
|
},
|
|
188
209
|
|
|
189
210
|
onColumnHeaderClicked (field, event) {
|