flameresttable 1.0.96 → 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 +74 -69
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,82 +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
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
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>
|
|
53
55
|
</div>
|
|
54
|
-
</
|
|
55
|
-
|
|
56
|
+
</slot>
|
|
56
57
|
<!-- СТРОКИ-->
|
|
58
|
+
|
|
57
59
|
<div class="table-row-group text-left">
|
|
58
60
|
|
|
59
61
|
<template v-for="(row) in (Table.Rows.rows)">
|
|
60
|
-
<
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
<
|
|
66
|
-
<
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
<
|
|
84
|
-
|
|
85
|
-
|
|
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>
|
|
86
95
|
</div>
|
|
87
|
-
<div
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
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>
|
|
91
101
|
</div>
|
|
92
|
-
</
|
|
93
|
-
<div class="table-cell text-center relative" :key="'row_slot_' + (row as any).id"
|
|
94
|
-
v-if="opts.onRowClickOpenSlot && !isRowCollapsed(row)">
|
|
95
|
-
<div class=" mx-auto no-wrap-cell mobile:w-full text-center">
|
|
96
|
-
<slot name="RowSubSlot" :row="row" />
|
|
97
|
-
</div>
|
|
98
|
-
</div>
|
|
102
|
+
</slot>
|
|
99
103
|
</template>
|
|
104
|
+
|
|
100
105
|
</div>
|
|
101
106
|
|
|
102
107
|
</div>
|
|
@@ -120,7 +125,7 @@
|
|
|
120
125
|
<!-- Заголовок -->
|
|
121
126
|
<div class="text-left px-2 py-1 bg-slate-100" style="width: 110px">
|
|
122
127
|
<div>{{ Table.columns[column].Popup.title !== '' ? Table.columns[column].Popup.title === '' :
|
|
123
|
-
|
|
128
|
+
Table.columns[column].title !== '' ? Table.columns[column].title : Table.columns[column].name }}</div>
|
|
124
129
|
<div class="text-xs text-slate-400">{{ Table.columns[column].Popup.desc }}</div>
|
|
125
130
|
</div>
|
|
126
131
|
|
|
@@ -144,7 +149,7 @@
|
|
|
144
149
|
<option v-for="(selectorVal, selectorKey) in Table.columns[column].Popup.Selector.values"
|
|
145
150
|
:key="'sel_' + selectorKey"
|
|
146
151
|
:value="getSelector(Table.columns[column].Popup.Selector.values, selectorKey, selectorVal)[1]">{{
|
|
147
|
-
|
|
152
|
+
getSelector(Table.columns[column].Popup.Selector.values, selectorKey, selectorVal)[0] }}</option>
|
|
148
153
|
</select>
|
|
149
154
|
</div>
|
|
150
155
|
|