@modeltables/fontawesome-vuetify 4.2.0 → 4.3.0
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 +14 -13
- package/components/dataSets/dataSetItems.ts +8 -22
- package/components/table/TableView.vue +10 -38
- package/dist/index.amd.ts +14 -14
- package/dist/index.esm.ts +1175 -1197
- package/package.json +6 -3
package/README.md
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
@modeltables/fontawesome-vuetify
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
--Install
|
|
4
4
|
|
|
5
5
|
```bash
|
|
6
6
|
pnpm add @modeltables/fontawesome-vuetify
|
|
7
7
|
```
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
--Quick start
|
|
10
10
|
|
|
11
11
|
1. Create Header and DataItem Model
|
|
12
12
|
|
|
@@ -33,9 +33,9 @@ export class ExampleModel {
|
|
|
33
33
|
<Table
|
|
34
34
|
v-if="dataItems.length"
|
|
35
35
|
:options="{
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
36
|
+
Key: 'Id',
|
|
37
|
+
Active: false,
|
|
38
|
+
ShowKey: true
|
|
39
39
|
}"
|
|
40
40
|
:dataheader="dataheader"
|
|
41
41
|
:showFilters="true"
|
|
@@ -46,19 +46,20 @@ export class ExampleModel {
|
|
|
46
46
|
@search="search($event)"
|
|
47
47
|
@rowClick="rowClick($event)">
|
|
48
48
|
```
|
|
49
|
-
Documentation
|
|
50
49
|
|
|
51
|
-
|
|
50
|
+
--Documentation
|
|
51
|
+
|
|
52
|
+
You should probably import main component and make a quick look at model table in your database.
|
|
52
53
|
|
|
53
|
-
|
|
54
|
+
Before populating table, think about right types and order of models.
|
|
55
|
+
Table should exsist with at least one virtual element at runtime with filter option enabled.
|
|
54
56
|
|
|
55
|
-
|
|
57
|
+
Default events for coordinated items are load and search with accompanying events for follow table data.
|
|
56
58
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
CRUD features like add, edit, or delete are ready to use.
|
|
59
|
+
Loading is mandatory while data items are retreving with option to use crud operation and right tool.
|
|
60
60
|
|
|
61
61
|
License
|
|
62
|
-
|
|
62
|
+
|
|
63
|
+
ISC
|
|
63
64
|
|
|
64
65
|
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { selectedRow, unSelectedRow } from "../helpers/resources";
|
|
2
|
-
import { isEqual } from "../helpers/instances";
|
|
3
2
|
|
|
4
3
|
export class DataSetItems{
|
|
5
4
|
id: number = 0;
|
|
@@ -27,27 +26,14 @@ export const changeMultipleSets = (method: any, item: DataSetItems, dataItems: D
|
|
|
27
26
|
}
|
|
28
27
|
}
|
|
29
28
|
|
|
30
|
-
export const changeSet = (dataSetItems: DataSetItems[], multiSelected: boolean
|
|
31
|
-
let next, before;
|
|
29
|
+
export const changeSet = (dataSetItems: DataSetItems[], multiSelected: boolean) => {
|
|
32
30
|
for(const value of dataSetItems){
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
}
|
|
41
|
-
}else{
|
|
42
|
-
value.properties.selected = true;
|
|
43
|
-
value.properties.rowClass = selectedRow;
|
|
44
|
-
if(!multiSelectedItems.some(element => isEqual(element, value.dataItem))){
|
|
45
|
-
multiSelectedItems = [...multiSelectedItems, value.dataItem];
|
|
46
|
-
next = value.dataItem;
|
|
47
|
-
before = multiSelected;
|
|
48
|
-
}
|
|
49
|
-
}
|
|
31
|
+
if(!multiSelected){
|
|
32
|
+
value.properties.selected = true;
|
|
33
|
+
value.properties.rowClass = selectedRow;
|
|
34
|
+
}else{
|
|
35
|
+
value.properties.selected = false;
|
|
36
|
+
value.properties.rowClass = unSelectedRow;
|
|
37
|
+
}
|
|
50
38
|
}
|
|
51
|
-
|
|
52
|
-
return { selectedItems: multiSelectedItems, beforeItem: before, afterItem: next };
|
|
53
39
|
}
|
|
@@ -164,7 +164,6 @@ export default {
|
|
|
164
164
|
showFilters: this.showFilters,
|
|
165
165
|
modelValue: ref([]),
|
|
166
166
|
firstChange: true,
|
|
167
|
-
lastSelectedItem: Object as any,
|
|
168
167
|
multiSelected: false,
|
|
169
168
|
perPage: this.pagination!.PerPage,
|
|
170
169
|
page: this.pagination!.CurrentPage,
|
|
@@ -203,15 +202,11 @@ export default {
|
|
|
203
202
|
|
|
204
203
|
dataSet.changeMultipleSet = [(item: DataSetItems) => {
|
|
205
204
|
if(this.multiSelectedItems.some(element => isEqual(element, item.dataItem))){
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
item.properties.selected = true;
|
|
209
|
-
}, 100)
|
|
205
|
+
item.properties.rowClass = unSelectedRow;
|
|
206
|
+
item.properties.selected = false;
|
|
210
207
|
}else{
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
item.properties.selected = false;
|
|
214
|
-
}, 100)
|
|
208
|
+
item.properties.rowClass = selectedRow;
|
|
209
|
+
item.properties.selected = true;
|
|
215
210
|
}
|
|
216
211
|
}];
|
|
217
212
|
|
|
@@ -232,9 +227,7 @@ export default {
|
|
|
232
227
|
|
|
233
228
|
this.dataSetItems = dataSetItems;
|
|
234
229
|
this.dataItems = dataItems;
|
|
235
|
-
|
|
236
|
-
this.changePageActiveSet(event);
|
|
237
|
-
}
|
|
230
|
+
|
|
238
231
|
},
|
|
239
232
|
initHeaders() {
|
|
240
233
|
let dataSetHeaders = [] as DataSetHeader[];
|
|
@@ -280,11 +273,11 @@ export default {
|
|
|
280
273
|
}
|
|
281
274
|
|
|
282
275
|
changeMultipleSets(item.changeItemSet, item, this.dataSetItems);
|
|
283
|
-
this.$emit(itemSelection,
|
|
284
|
-
this.lastSelectedItem = item.dataItem;
|
|
276
|
+
this.$emit(itemSelection, item.dataItem);
|
|
285
277
|
}
|
|
286
278
|
|
|
287
279
|
if(this.multiSelect){
|
|
280
|
+
|
|
288
281
|
if(!this.multiSelectedItems.length){
|
|
289
282
|
this.multiSelectedItems = [item.dataItem];
|
|
290
283
|
}else if(this.multiSelectedItems.some(element => isEqual(element, item.dataItem))){
|
|
@@ -294,7 +287,7 @@ export default {
|
|
|
294
287
|
}
|
|
295
288
|
|
|
296
289
|
changeActiveSets(item.changeMultipleSet, item);
|
|
297
|
-
this.$emit(multiSelection,
|
|
290
|
+
this.$emit(multiSelection, this.multiSelectedItems);
|
|
298
291
|
}
|
|
299
292
|
},
|
|
300
293
|
filterValue(event: any, dataItem: any){
|
|
@@ -349,6 +342,7 @@ export default {
|
|
|
349
342
|
this.search();
|
|
350
343
|
},
|
|
351
344
|
pageSize(event: any){
|
|
345
|
+
console.log(event);
|
|
352
346
|
this.perPage = event;
|
|
353
347
|
this.filters.PerPage = this.perPage;
|
|
354
348
|
this.search();
|
|
@@ -359,34 +353,12 @@ export default {
|
|
|
359
353
|
this.filters.SortDirection = window.Number(prop.sort);
|
|
360
354
|
this.search();
|
|
361
355
|
},
|
|
362
|
-
changePageActiveSet(event: any){
|
|
363
|
-
if(this.dataSetItems.length && this.multiSelectedItems.length){
|
|
364
|
-
for(let multiSelectItem of this.multiSelectedItems){
|
|
365
|
-
let dataSetItem = this.dataSetItems.find((dataSet) => isEqual(dataSet.dataItem, multiSelectItem));
|
|
366
|
-
if(dataSetItem != undefined){
|
|
367
|
-
changeActiveSets(dataSetItem.changeMultipleSet, dataSetItem);
|
|
368
|
-
}
|
|
369
|
-
}
|
|
370
|
-
this.changeCheckActiveSet(event);
|
|
371
|
-
}
|
|
372
|
-
},
|
|
373
|
-
changeCheckActiveSet(event: any){
|
|
374
|
-
for(let dataSetItem of this.dataSetItems){
|
|
375
|
-
if(this.multiSelectedItems.some(element => isEqual(element, dataSetItem.dataItem))){
|
|
376
|
-
this.multiSelected = true;
|
|
377
|
-
}else{
|
|
378
|
-
this.multiSelected = false;
|
|
379
|
-
}
|
|
380
|
-
}
|
|
381
|
-
},
|
|
382
356
|
selectItem(event){
|
|
383
357
|
console.log(event);
|
|
384
358
|
},
|
|
385
359
|
multiSelectItems(event){
|
|
360
|
+
changeSet(this.dataSetItems, this.multiSelected);
|
|
386
361
|
this.multiSelected = !this.multiSelected;
|
|
387
|
-
let result = changeSet(this.dataSetItems, this.multiSelected, this.multiSelectedItems);
|
|
388
|
-
this.multiSelectedItems = result.selectedItems;
|
|
389
|
-
this.$emit(multiSelection, result);
|
|
390
362
|
}
|
|
391
363
|
}
|
|
392
364
|
}
|