@modeltables/fontawesome-vuetify 4.2.1 → 4.3.1
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 +5 -5
- package/components/dataSets/dataSetItems.ts +8 -22
- package/components/table/TableView.vue +11 -40
- package/dist/index.amd.ts +14 -14
- package/dist/index.esm.ts +1175 -1197
- package/package.json +5 -2
package/README.md
CHANGED
|
@@ -46,21 +46,21 @@ export class ExampleModel {
|
|
|
46
46
|
@search="search($event)"
|
|
47
47
|
@rowClick="rowClick($event)">
|
|
48
48
|
```
|
|
49
|
+
|
|
49
50
|
Documentation
|
|
50
51
|
|
|
51
52
|
Options data input key are required with optional attributes.
|
|
52
53
|
|
|
53
|
-
The table shows your data and lets you manage it easily. It has built-in
|
|
54
|
+
The table shows your data and lets you manage it easily. It has built-in load and search events for quick requests and updates.
|
|
54
55
|
|
|
55
56
|
Loading spinner appears while items and pagination changes.
|
|
56
57
|
|
|
57
|
-
Data items are organized in selections with two main events
|
|
58
|
+
Data items are organized in selections with two main events itemSelection and multiSelection to easy control your items.
|
|
58
59
|
|
|
59
|
-
Using
|
|
60
|
+
Using showFilters are essential with rowClick event when paginationModel mode is on for quick data changes.
|
|
60
61
|
|
|
61
62
|
CRUD features like add, edit, or delete are ready to use.
|
|
62
63
|
|
|
63
|
-
License
|
|
64
|
-
MIT
|
|
64
|
+
License MIT
|
|
65
65
|
|
|
66
66
|
|
|
@@ -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
|
|
|
@@ -220,8 +215,6 @@ export default {
|
|
|
220
215
|
dataSet.properties.rowClass = unSelectedRow;
|
|
221
216
|
}
|
|
222
217
|
|
|
223
|
-
this.multiSelectedItems = [];
|
|
224
|
-
this.multiSelectedItems = [item.dataItem];
|
|
225
218
|
changeActiveSets(dataSet.changeMultipleSet, item);
|
|
226
219
|
}]
|
|
227
220
|
|
|
@@ -234,9 +227,7 @@ export default {
|
|
|
234
227
|
|
|
235
228
|
this.dataSetItems = dataSetItems;
|
|
236
229
|
this.dataItems = dataItems;
|
|
237
|
-
|
|
238
|
-
this.changePageActiveSet(event);
|
|
239
|
-
}
|
|
230
|
+
|
|
240
231
|
},
|
|
241
232
|
initHeaders() {
|
|
242
233
|
let dataSetHeaders = [] as DataSetHeader[];
|
|
@@ -280,12 +271,13 @@ export default {
|
|
|
280
271
|
for(let dataSet of this.dataSetItems){
|
|
281
272
|
dataSet.properties.rowClass = unSelectedRow;
|
|
282
273
|
}
|
|
274
|
+
|
|
283
275
|
changeMultipleSets(item.changeItemSet, item, this.dataSetItems);
|
|
284
|
-
this.$emit(itemSelection,
|
|
285
|
-
this.lastSelectedItem = item.dataItem;
|
|
276
|
+
this.$emit(itemSelection, item.dataItem);
|
|
286
277
|
}
|
|
287
278
|
|
|
288
279
|
if(this.multiSelect){
|
|
280
|
+
|
|
289
281
|
if(!this.multiSelectedItems.length){
|
|
290
282
|
this.multiSelectedItems = [item.dataItem];
|
|
291
283
|
}else if(this.multiSelectedItems.some(element => isEqual(element, item.dataItem))){
|
|
@@ -295,7 +287,7 @@ export default {
|
|
|
295
287
|
}
|
|
296
288
|
|
|
297
289
|
changeActiveSets(item.changeMultipleSet, item);
|
|
298
|
-
this.$emit(multiSelection,
|
|
290
|
+
this.$emit(multiSelection, this.multiSelectedItems);
|
|
299
291
|
}
|
|
300
292
|
},
|
|
301
293
|
filterValue(event: any, dataItem: any){
|
|
@@ -350,6 +342,7 @@ export default {
|
|
|
350
342
|
this.search();
|
|
351
343
|
},
|
|
352
344
|
pageSize(event: any){
|
|
345
|
+
console.log(event);
|
|
353
346
|
this.perPage = event;
|
|
354
347
|
this.filters.PerPage = this.perPage;
|
|
355
348
|
this.search();
|
|
@@ -360,34 +353,12 @@ export default {
|
|
|
360
353
|
this.filters.SortDirection = window.Number(prop.sort);
|
|
361
354
|
this.search();
|
|
362
355
|
},
|
|
363
|
-
changePageActiveSet(event: any){
|
|
364
|
-
if(this.dataSetItems.length && this.multiSelectedItems.length){
|
|
365
|
-
for(let multiSelectItem of this.multiSelectedItems){
|
|
366
|
-
let dataSetItem = this.dataSetItems.find((dataSet) => isEqual(dataSet.dataItem, multiSelectItem));
|
|
367
|
-
if(dataSetItem != undefined){
|
|
368
|
-
changeActiveSets(dataSetItem.changeMultipleSet, dataSetItem);
|
|
369
|
-
}
|
|
370
|
-
}
|
|
371
|
-
this.changeCheckActiveSet(event);
|
|
372
|
-
}
|
|
373
|
-
},
|
|
374
|
-
changeCheckActiveSet(event: any){
|
|
375
|
-
for(let dataSetItem of this.dataSetItems){
|
|
376
|
-
if(this.multiSelectedItems.some(element => isEqual(element, dataSetItem.dataItem))){
|
|
377
|
-
this.multiSelected = true;
|
|
378
|
-
}else{
|
|
379
|
-
this.multiSelected = false;
|
|
380
|
-
}
|
|
381
|
-
}
|
|
382
|
-
},
|
|
383
356
|
selectItem(event){
|
|
384
357
|
console.log(event);
|
|
385
358
|
},
|
|
386
359
|
multiSelectItems(event){
|
|
360
|
+
changeSet(this.dataSetItems, this.multiSelected);
|
|
387
361
|
this.multiSelected = !this.multiSelected;
|
|
388
|
-
let result = changeSet(this.dataSetItems, this.multiSelected, this.multiSelectedItems);
|
|
389
|
-
this.multiSelectedItems = result.selectedItems;
|
|
390
|
-
this.$emit(multiSelection, result);
|
|
391
362
|
}
|
|
392
363
|
}
|
|
393
364
|
}
|