vue-table2next 0.0.4 → 0.0.6
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
|
|
@@ -446,9 +469,9 @@ export default {
|
|
|
446
469
|
},
|
|
447
470
|
|
|
448
471
|
fields (newVal, oldVal) {
|
|
449
|
-
|
|
472
|
+
this.normalizeFields();
|
|
450
473
|
},
|
|
451
|
-
},
|
|
474
|
+
},
|
|
452
475
|
|
|
453
476
|
methods: {
|
|
454
477
|
|
|
@@ -596,8 +619,8 @@ export default {
|
|
|
596
619
|
|
|
597
620
|
renderNormalField (field, item) {
|
|
598
621
|
return this.hasFormatter(field)
|
|
599
|
-
|
|
600
|
-
|
|
622
|
+
? this.callFormatter(field, item)
|
|
623
|
+
: this.getObjectValue(item, field.name, '')
|
|
601
624
|
},
|
|
602
625
|
|
|
603
626
|
isFieldComponent (fieldName) {
|
|
@@ -607,7 +630,7 @@ export default {
|
|
|
607
630
|
}
|
|
608
631
|
|
|
609
632
|
return fieldName.slice(0, this.fieldPrefix.length) === this.fieldPrefix
|
|
610
|
-
|
|
633
|
+
|| fieldName.slice(0, 2) === '__'
|
|
611
634
|
},
|
|
612
635
|
|
|
613
636
|
isFieldSlot (fieldName) {
|
|
@@ -675,9 +698,9 @@ export default {
|
|
|
675
698
|
|
|
676
699
|
if (this.tablePagination === null) {
|
|
677
700
|
this.warn('vuetable: pagination-path "' + this.paginationPath + '" not found. '
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
701
|
+
+ 'It looks like the data returned from the server does not have pagination information '
|
|
702
|
+
+ "or you may have set it incorrectly.\n"
|
|
703
|
+
+ 'You can explicitly suppress this warning by setting pagination-path="".'
|
|
681
704
|
)
|
|
682
705
|
}
|
|
683
706
|
|
|
@@ -743,7 +766,7 @@ export default {
|
|
|
743
766
|
}
|
|
744
767
|
|
|
745
768
|
if ('offset' === this.paginationMode) {
|
|
746
|
-
|
|
769
|
+
params[this.queryParams.page] = this.currentPage
|
|
747
770
|
}
|
|
748
771
|
|
|
749
772
|
params[this.queryParams.perPage] = this.perPage
|
|
@@ -777,7 +800,7 @@ export default {
|
|
|
777
800
|
},
|
|
778
801
|
|
|
779
802
|
isSortable (field) {
|
|
780
|
-
return field.sortField
|
|
803
|
+
return field.sortField ?? false;
|
|
781
804
|
},
|
|
782
805
|
|
|
783
806
|
currentSortOrderPosition (field) {
|
|
@@ -879,7 +902,7 @@ export default {
|
|
|
879
902
|
if ( ! this.hasFormatter(field)) return
|
|
880
903
|
|
|
881
904
|
if (typeof(field.formatter) === 'function') {
|
|
882
|
-
|
|
905
|
+
return field.formatter(this.getObjectValue(item, field.name), this)
|
|
883
906
|
}
|
|
884
907
|
},
|
|
885
908
|
|
|
@@ -960,8 +983,8 @@ export default {
|
|
|
960
983
|
hideDetailRow (rowId) {
|
|
961
984
|
if (this.isVisibleDetailRow(rowId)) {
|
|
962
985
|
this.visibleDetailRows.splice(
|
|
963
|
-
|
|
964
|
-
|
|
986
|
+
this.visibleDetailRows.indexOf(rowId),
|
|
987
|
+
1
|
|
965
988
|
)
|
|
966
989
|
this.updateHeader()
|
|
967
990
|
}
|
|
@@ -1147,9 +1170,9 @@ export default {
|
|
|
1147
1170
|
this.gotoNextPage()
|
|
1148
1171
|
} else {
|
|
1149
1172
|
if (this.paginationMode === 'cursor') {
|
|
1150
|
-
|
|
1173
|
+
this.gotoCursor(page)
|
|
1151
1174
|
} else {
|
|
1152
|
-
|
|
1175
|
+
this.gotoPage(page)
|
|
1153
1176
|
}
|
|
1154
1177
|
}
|
|
1155
1178
|
},
|
|
@@ -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>
|
|
@@ -45,12 +58,12 @@ import VuetableColGutter from './VuetableColGutter'
|
|
|
45
58
|
|
|
46
59
|
export default {
|
|
47
60
|
components: {
|
|
48
|
-
'vuetable-field-checkbox': VuetableFieldCheckbox,
|
|
61
|
+
'vuetable-field-checkbox': VuetableFieldCheckbox,
|
|
49
62
|
'vuetable-field-handle' : VuetableFieldHandle,
|
|
50
63
|
'vuetable-field-sequence': VuetableFieldSequence,
|
|
51
64
|
VuetableColGutter
|
|
52
65
|
},
|
|
53
|
-
|
|
66
|
+
props: ['fields'],
|
|
54
67
|
computed: {
|
|
55
68
|
sortOrder() {
|
|
56
69
|
return this.$parent.sortOrder
|
|
@@ -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) {
|