flameresttable 1.0.95 → 1.0.97
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/README.md +8 -0
- package/package.json +1 -1
- package/src/Table/Table.vue +73 -66
package/README.md
CHANGED
|
@@ -9,6 +9,14 @@
|
|
|
9
9
|
opts.Popup.beforeEdit = async (row: any, table: typeof FlameTable.prototype): Promise<boolean> => {
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
+
# Row slot
|
|
13
|
+
Слот для цельной строки таблицы
|
|
14
|
+
Передан параметр с данными строки `row`
|
|
15
|
+
|
|
16
|
+
# TableHeaders slot
|
|
17
|
+
Слот для строки заголовков
|
|
18
|
+
Передан параметр `columns`
|
|
19
|
+
|
|
12
20
|
### RowSubSlot
|
|
13
21
|
Это слот для клика по строке таблицы, если включён параметр `opts.onRowClickOpenSlot`
|
|
14
22
|
|
package/package.json
CHANGED
package/src/Table/Table.vue
CHANGED
|
@@ -21,80 +21,87 @@
|
|
|
21
21
|
<div ref="MainTableElement" class="mt-2 table table-fixed w-full ">
|
|
22
22
|
|
|
23
23
|
<!-- ЗАГОЛОВКИ СТОЛБЦОВ-->
|
|
24
|
-
<
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
<
|
|
29
|
-
<
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
24
|
+
<slot name="TableHeaders" :columns="Table.columns">
|
|
25
|
+
<div class="table-header-group">
|
|
26
|
+
|
|
27
|
+
<!-- ЧЕКБОКСЫ -->
|
|
28
|
+
<div class="table-cell w-[21px] align-middle">
|
|
29
|
+
<label class="checkbox" v-if="Table.opts.rowSelectors">
|
|
30
|
+
<input type='checkbox' @change="CheckboxSelectionChanged($event, true)">
|
|
31
|
+
<span class='indicator'></span>
|
|
32
|
+
</label>
|
|
33
|
+
</div>
|
|
33
34
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
column.
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
<
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
<
|
|
50
|
-
|
|
51
|
-
|
|
35
|
+
<div v-for="column in Table.columns" v-show="column.Table.isShow" :key="'cheader_' + column.name"
|
|
36
|
+
:class="' defaultHeader ' + column.Table.classesHeader"
|
|
37
|
+
class=" table-cell align-middle border-r border-r-slate-100 px-2"
|
|
38
|
+
:style="(column.Table.width === null ? '' : 'width:' + column.Table.width + 'px')">
|
|
39
|
+
<span>{{ column.Table.titleCustom !== null ? (column as any).Table.titleCustom(column) : column.Table.title
|
|
40
|
+
!==
|
|
41
|
+
'' ?
|
|
42
|
+
column.Table.title : column.title !== '' ? column.title :
|
|
43
|
+
column.name }}</span>
|
|
44
|
+
</div>
|
|
45
|
+
<div v-if="opts.Edit.can" class="table-cell w-[93px] border-r border-r-slate-100 px-2">
|
|
46
|
+
<button class="bg-green-600 invisible">
|
|
47
|
+
Изменить
|
|
48
|
+
</button>
|
|
49
|
+
</div>
|
|
50
|
+
<div v-if="opts.Remove.can" class="table-cell w-[93px] border-r border-r-slate-100 px-2">
|
|
51
|
+
<button class="bg-green-600 invisible">
|
|
52
|
+
Удалить
|
|
53
|
+
</button>
|
|
54
|
+
</div>
|
|
52
55
|
</div>
|
|
53
|
-
</
|
|
54
|
-
|
|
56
|
+
</slot>
|
|
55
57
|
<!-- СТРОКИ-->
|
|
58
|
+
|
|
56
59
|
<div class="table-row-group text-left">
|
|
57
60
|
|
|
58
61
|
<template v-for="(row) in (Table.Rows.rows)">
|
|
59
|
-
<
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
62
|
+
<slot name="Row" :row="row">
|
|
63
|
+
<div :key="'row_' + (row as any).id" class="defaultRow table-row cursor-pointer hover:bg-slate-100"
|
|
64
|
+
v-if="true">
|
|
65
|
+
|
|
66
|
+
<!-- ЧЕКБОКСЫ -->
|
|
67
|
+
<div class="table-cell align-middle w-[21px]">
|
|
68
|
+
<label class="checkbox" v-if="Table.opts.rowSelectors">
|
|
69
|
+
<input type='checkbox' v-model="Table.RowsParams[(row as any)[primaryKey]].selected"
|
|
70
|
+
@change="CheckboxSelectionChanged($event, false)">
|
|
71
|
+
<span class='indicator'></span>
|
|
72
|
+
</label>
|
|
73
|
+
</div>
|
|
74
|
+
|
|
75
|
+
<div v-for="column in Table.columns" v-show="column.Table.isShow" :key="'tc_' + column.name"
|
|
76
|
+
:class="' defaultCell ' + column.Table.classes"
|
|
77
|
+
class="table-cell align-middle border-r border-r-slate-100 px-2 last:border-r-0 last:pr-0"
|
|
78
|
+
@click="columnClick(row, column)"
|
|
79
|
+
:style="(column.Table.width === null ? '' : 'width:' + column.Table.width + 'px')">
|
|
80
|
+
|
|
81
|
+
<span v-if="!column.Table.isRawValue">{{
|
|
82
|
+
column.Table.value(row, column) }}</span>
|
|
83
|
+
<span v-else v-html="column.Table.value(row, column)"></span>
|
|
84
|
+
</div>
|
|
85
|
+
<div v-if="opts.Edit.can" class="table-cell w-[93px] border-r border-r-slate-100 px-2 text-center">
|
|
86
|
+
<button class="px-2 py-1 bg-green-600 text-white my-1" @click="edit(row)">
|
|
87
|
+
Изменить
|
|
88
|
+
</button>
|
|
89
|
+
</div>
|
|
90
|
+
<div v-if="opts.Remove.can" class="table-cell w-[93px] border-r border-r-slate-100 px-2 text-center">
|
|
91
|
+
<button class="px-2 py-1 bg-gray-600 opacity-30 text-white my-1" @click="deleteRow(row)">
|
|
92
|
+
Удалить
|
|
93
|
+
</button>
|
|
94
|
+
</div>
|
|
84
95
|
</div>
|
|
85
|
-
<div
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
96
|
+
<div class="table-cell text-center relative" :key="'row_slot_' + (row as any).id"
|
|
97
|
+
v-if="opts.onRowClickOpenSlot && !isRowCollapsed(row)">
|
|
98
|
+
<div class=" mx-auto no-wrap-cell mobile:w-full text-center">
|
|
99
|
+
<slot name="RowSubSlot" :row="row" />
|
|
100
|
+
</div>
|
|
89
101
|
</div>
|
|
90
|
-
</
|
|
91
|
-
<div class="table-cell text-center relative" :key="'row_slot_' + (row as any).id"
|
|
92
|
-
v-if="opts.onRowClickOpenSlot && !isRowCollapsed(row)">
|
|
93
|
-
<div class=" mx-auto no-wrap-cell mobile:w-full text-center">
|
|
94
|
-
<slot name="RowSubSlot" :row="row" />
|
|
95
|
-
</div>
|
|
96
|
-
</div>
|
|
102
|
+
</slot>
|
|
97
103
|
</template>
|
|
104
|
+
|
|
98
105
|
</div>
|
|
99
106
|
|
|
100
107
|
</div>
|
|
@@ -420,7 +427,7 @@ export default defineComponent({
|
|
|
420
427
|
// Проверяем, достиг ли скролл нижней грани элемента
|
|
421
428
|
if (bottom <= windowHeight) {
|
|
422
429
|
// Грузим на одну страницу дальше
|
|
423
|
-
this.Table.update({ page: this.Table.Pager.page + 1, perPage:
|
|
430
|
+
this.Table.update({ page: this.Table.Pager.page + 1, perPage: this.Table.Pager.perPage });
|
|
424
431
|
}
|
|
425
432
|
|
|
426
433
|
},
|