Skip to content

Commit 2552ba5

Browse files
Cleaning
1 parent fd92084 commit 2552ba5

File tree

5 files changed

+119
-103
lines changed

5 files changed

+119
-103
lines changed

src/playground/configs/database.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
}
1717
},
1818
"phone": "1-770-736-8031 x56442",
19+
"selectable": false,
1920
"website": "hildegard.org",
2021
"company": {
2122
"name": "Romaguera-Crona",
@@ -62,6 +63,7 @@
6263
}
6364
},
6465
"phone": "1-463-123-4447",
66+
"selectable": false,
6567
"website": "ramiro.info",
6668
"company": {
6769
"name": "Romaguera-Jacobson",
@@ -131,6 +133,7 @@
131133
}
132134
},
133135
"phone": "1-477-935-8478 x6430",
136+
"selectable": false,
134137
"website": "ola.org",
135138
"company": {
136139
"name": "Considine-Lockman",
@@ -177,6 +180,7 @@
177180
}
178181
},
179182
"phone": "586.493.6943 x140",
183+
"selectable": false,
180184
"website": "jacynthe.com",
181185
"company": {
182186
"name": "Abernathy Group",

src/playground/configs/templates/tableDefaults.ts

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export default {
2-
color: 'primary', // ? Not sure what this does. Needs Testing
2+
// color: 'primary', // ? Doesn't seem to work
33
colors: {
44
body: {
55
base: '--v-theme-surface',
@@ -30,22 +30,27 @@ export default {
3030
percentageChange: 25,
3131
percentageDirection: 'desc',
3232
},
33+
// customFilter: undefined, // ? Needs Testing
34+
// customKeyFilter: undefined, // ? Needs Testing
3335
density: 'compact',
3436
drilldownKey: 'id',
3537
elevation: 5,
38+
// expanded: () => [], // ? Needs Testing
3639
expandOnClick: false,
40+
// filterKeys: undefined, // ? Needs Testing
41+
// filterMode: 'some', // ? Needs Testing
3742
firstIcon: '$first',
38-
fixedFooter: true, // ? Not sure what this does. Needs Testing
39-
fixedHeader: true, // ? Not sure what this does. Needs Testing
43+
// firstPageLabel: '', // ? Doesn't seem to work
44+
// fixedFooter: true, // ? Doesn't seem to work
45+
// fixedHeader: true, // ? Doesn't seem to work
4046
footers: [],
4147
headers: [],
4248
height: 'auto',
4349
hideDrilldownWhenLoading: true,
4450
hideNoData: false,
4551
hover: false,
4652
itemChildrenKey: 'child',
47-
itemProps: [], // ? Not sure what this does. Needs Testing
48-
itemTitle: 'title', // ? Not sure what this does. Needs Testing
53+
itemSelectable: undefined,
4954
itemValue: 'id',
5055
items: [],
5156
itemsLength: 0,
@@ -78,7 +83,7 @@ export default {
7883
],
7984
itemsPerPageText: '$vuetify.dataFooter.itemsPerPageText',
8085
lastIcon: '$last',
81-
lastPageLabel: '$vuetify.dataFooter.lastPage', // ? Not sure what this does. Needs Testing
86+
// lastPageLabel: '$vuetify.dataFooter.lastPage', // ? Doesn't seem to work
8287
level: 1,
8388
levels: 3,
8489
loaderHeight: '2px',
@@ -94,19 +99,18 @@ export default {
9499
multiSort: false,
95100
mustSort: false,
96101
nextIcon: '$next',
97-
nextPageLabel: '$vuetify.dataFooter.nextPage', // ? Not sure what this does. Needs Testing
102+
nextPageLabel: '$vuetify.dataFooter.nextPage', // ? Doesn't seem to work
98103
noDataText: '$vuetify.noDataText',
99-
// noFilter: false, // ? Not sure what this does. Needs Testing
100104
page: 1,
101105
pageText: '$vuetify.dataFooter.pageText',
102106
prevIcon: '$prev',
103-
prevPageLabel: '$vuetify.dataFooter.prevPage', // ? Not sure what this does. Needs Testing
104-
returnObject: false, // ? Not sure what this does. Needs Testing
105-
rowHeight: undefined, // ? Not sure what this does. Needs Testing
107+
// prevPageLabel: '$vuetify.dataFooter.prevPage', // ? Doesn't seem to work
108+
// returnObject: false, // ? Not sure what this does or if works.
109+
// rowHeight: undefined, // ? Doesn't seem to work
106110
search: '',
107111
searchDebounce: 750,
108112
searchMaxWait: 1000,
109-
searchProps: { // ? VDrilldownTable Custom Prop
113+
searchProps: { // ? Needs Testing
110114
cols: {
111115
lg: 3,
112116
md: 6,
@@ -118,19 +122,19 @@ export default {
118122
density: 'compact',
119123
variant: 'underlined',
120124
},
121-
selectStrategy: 'page', // ! Testing
125+
selectStrategy: 'page',
122126
server: false,
123127
showCurrentPage: false,
124128
showDrilldownWhenLoading: true,
125129
showExpand: false,
126130
showFooterRow: true,
127-
showSearch: false, // * Works - May or may not keep
131+
showSearch: false,
128132
showSelect: false,
129133
skeltonType: 'heading@1',
130134
sortAscIcon: '$sortAsc',
131135
sortBy: [],
132-
sticky: false, // ? Not sure what this does. Needs Testing
136+
// sticky: false, // ? Doesn't seem to work
133137
tag: 'div',
134138
theme: undefined,
135-
width: undefined, // ? Not sure what this does. Needs Testing
139+
// width: undefined, // ? Doesn't seem to work
136140
};

src/plugin/VDrilldownTable.vue

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<component
33
:is="tableType"
44
v-if="tableType"
5+
v-model="loadedDrilldown.modelValue"
56
v-bind="$attrs"
67
:class="tableClasses"
78
:density="loadedDrilldown.density"
@@ -11,6 +12,7 @@
1112
:height="loadedDrilldown.height"
1213
:hide-no-data="hidingNoData"
1314
:hover="loadedDrilldown.hover"
15+
:item-selectable="loadedDrilldown.itemSelectable"
1416
:item-value="loadedDrilldown.itemValue"
1517
:items="loadedDrilldown.items"
1618
:items-length="loadedDrilldown.itemsLength"
@@ -20,9 +22,7 @@
2022
:multi-sort="loadedDrilldown.multiSort"
2123
:must-sort="loadedDrilldown.mustSort"
2224
:no-data-text="loadedDrilldown.noDataText"
23-
:no-filter="loadedDrilldown.noFilter"
2425
:page="loadedDrilldown.page"
25-
:return-object="loadedDrilldown.returnObject"
2626
:search="levelSearch"
2727
:select-strategy="loadedDrilldown.selectStrategy"
2828
:show-expand="loadedDrilldown.showExpand"
@@ -44,7 +44,6 @@
4444
:search-props="loadedDrilldown.searchProps"
4545
:show-search="loadedDrilldown.showSearch ?? false"
4646
:slot-props="props"
47-
@click:selectAll="emitAllSelectedEvent($event)"
4847
@update:search="levelSearch = $event"
4948
>
5049
<!-- Pass on all scoped slots -->
@@ -65,8 +64,10 @@
6564
<template #[`headers`]="props">
6665
<HeadersSlot
6766
:key="level"
67+
:all-selected="props.allSelected"
6868
:colors="loadedDrilldown.colors"
6969
:density="loadedDrilldown.density"
70+
:items="loadedDrilldown.items"
7071
:level="level"
7172
:loader-settings="{
7273
colspan: props.columns.length,
@@ -77,12 +78,14 @@
7778
size: loadedDrilldown.loaderSize,
7879
skeltonType: loadedDrilldown.skeltonType,
7980
}"
81+
:select-strategy="loadedDrilldown.selectStrategy"
8082
:show-select="loadedDrilldown.showSelect"
81-
:slot-props="{ allRowsSelected, ...props }"
83+
:slot-props="{ ...props }"
8284
:sort-asc-icon="loadedDrilldown.sortAscIcon"
8385
:sort-by="loadedDrilldown.sortBy"
84-
@click:selectAll="emitAllSelectedEvent($event)"
86+
:table-model-value="loadedDrilldown.modelValue"
8587
>
88+
<!-- @click:selectAll="emitAllSelectedEvent($event)" -->
8689
<!-- Pass on all scoped slots -->
8790
<template
8891
v-for="(_, slot) in slots"
@@ -163,12 +166,13 @@
163166
:key="level"
164167
:density="loadedDrilldown.density"
165168
:expand-on-click="loadedDrilldown.expandOnClick"
169+
:item-selectable="loadedDrilldown.itemSelectable"
166170
:items="loadedDrilldown.items"
167171
:level="loadedDrilldown.level"
168172
:levels="loadedDrilldown.levels"
169173
:show-expand="loadedDrilldown.showExpand"
170174
:show-select="loadedDrilldown.showSelect"
171-
:slot-props="{ allRowsSelected, level, ...props }"
175+
:slot-props="{ level, ...props }"
172176
@click:row="emitClickRow($event)"
173177
@click:row:checkbox="emitClickRowCheckbox($event)"
174178
@update:expanded="emitUpdatedExpanded($event)"
@@ -263,7 +267,7 @@
263267
:footers="loadedDrilldown.footers || []"
264268
:level="loadedDrilldown.level"
265269
:show-select="loadedDrilldown.showSelect"
266-
:slot-props="{ allRowsSelected, ...props }"
270+
:slot-props="{ ...props }"
267271
>
268272
<!-- Pass on all scoped slots -->
269273
<template
@@ -388,7 +392,6 @@ const defaultDrilldownSettings = { ...props, ...loadedDrilldown };
388392
389393
390394
// -------------------------------------------------- Data //
391-
const allRowsSelected = ref<boolean>(false);
392395
const parentTableRef = ref<string>('');
393396
const levelSearch = ref<string>('');
394397
const theme = useTheme();
@@ -487,10 +490,6 @@ function setLoadedDrilldown(): void {
487490
}
488491
489492
// -------------------------------------------------- Emit Events //
490-
function emitAllSelectedEvent(val: boolean): void {
491-
allRowsSelected.value = val;
492-
}
493-
494493
function emitClickRow(event: MouseEvent): void {
495494
emit('click:row', event);
496495
}

src/plugin/utils/props.ts

Lines changed: 52 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { Column } from '@/types';
22

33
export const AllProps = {
4-
// ? Colors accept Vuetify them color names or variables, HEX, RGB, HSL, and CSS color names
5-
colors: () => ({ // * Passed
4+
// color: 'primary', // ? Doesn't seem to work
5+
colors: () => ({
66
body: {
77
base: '--v-theme-surface',
88
bg: '--v-theme-surface',
@@ -32,35 +32,35 @@ export const AllProps = {
3232
percentageChange: 25,
3333
percentageDirection: 'desc',
3434
}) as const,
35-
// customFilter: undefined, // ? Needs Testing
36-
// customKeyFilter: undefined, // ? Needs Testing
37-
density: 'default', // * Works
38-
// drilldown: () => ({}),
39-
drilldownKey: 'id', // * Works
40-
elevation: 0, // * Works
41-
expandOnClick: false, // * Works
42-
// expanded: () => [], // ? Needs Testing
43-
filterKeys: undefined, // ? Needs Testing
44-
// filterMode: 'some', // ? Needs Testing
45-
// firstIcon: '', // & Works - Is binding prop
46-
// firstPageLabel: '', // ? Not sure what this does or if it works
47-
fixedFooter: true, // ? Not sure what this does or if it works
48-
fixedHeader: true, // ? Not sure what this does or if it works
35+
// customFilter: undefined, // ? Needs Testing
36+
// customKeyFilter: undefined, // ? Needs Testing
37+
density: 'default',
38+
// drilldown: () => ({}), // * Works - Internal Prop
39+
drilldownKey: 'id',
40+
elevation: 0,
41+
expandOnClick: false,
42+
// expanded: () => [], // ? Needs Testing
43+
filterKeys: undefined, // ? Needs Testing
44+
// filterMode: 'some', // ? Needs Testing
45+
// firstIcon: '', // * Works - Keep Commented Out
46+
// firstPageLabel: '', // ? Doesn't seem to work
47+
// fixedFooter: true, // ? Doesn't seem to work
48+
// fixedHeader: true, // ? Doesn't seem to work
4949
footers: () => [] as Column[],
50-
// headers: () => [] as const,
51-
height: 'auto', // * Works
52-
// hideDefaultFooter: false, // ? In v2 Missing in v3
53-
// hideDefaultHeader: true, // ? In v2 Missing in v3
54-
hideNoData: false, // * Works
55-
hover: false, // * Works
56-
isDrilldown: false, // * Works
57-
// item: () => ({}), // * Works - Keep Commented Out
58-
itemChildrenKey: 'child', // * Works
59-
itemValue: 'id', // * Works, but is weird
60-
// items: () => [], // * Works
50+
// headers: () => [] as const, // * Works - Keep Commented Out
51+
height: 'auto',
52+
// hideDrilldownWhenLoading: true, // * Works - Keep Commented Out
53+
hideNoData: false,
54+
hover: false,
55+
isDrilldown: false, // ? Internal Prop
56+
itemChildrenKey: 'child',
57+
itemSelectable: undefined,
58+
itemValue: 'id',
59+
items: () => [],
6160
itemsLength: 0, // ? Not sure if this will be used
62-
itemsPerPage: 10, // * Works
63-
// itemsPerPageOptions: [ // ? Works - Keep Commented Out - Test drilldowns
61+
itemsPerPage: 10,
62+
// itemsPerPageText: '$vuetify.dataFooter.itemsPerPageText', // * Works - Keep Commented Out
63+
// itemsPerPageOptions: [ // * Works - Keep Commented Out
6464
// {
6565
// title: '10',
6666
// value: 10,
@@ -82,7 +82,8 @@ export const AllProps = {
8282
// value: -1,
8383
// }
8484
// ],
85-
// lastIcon: '', // & Works - Is binding prop
85+
// lastPageLabel: '$vuetify.dataFooter.lastPage', // ? Doesn't seem to work
86+
// lastIcon: '', // * Works - Keep Commented Out
8687
level: 1,
8788
levels: 1,
8889
loaderHeight: '2px',
@@ -91,15 +92,16 @@ export const AllProps = {
9192
loading: false,
9293
loadingText: '$vuetify.dataIterator.loadingText',
9394
multiSort: false, // ! Not sure if this is working correctly - Is binding prop
94-
// nextIcon: '', // & Works - Is binding prop
95-
noDataText: '$vuetify.noDataText', // * Works
96-
noFilter: false, // * Works, but not sure why you would use this.
97-
page: 1, // * Works
98-
returnObject: true, // ? Not sure what this does or if it works - Missing Docs
95+
// nextIcon: '', // * Works - Keep Commented Out
96+
noDataText: '$vuetify.noDataText',
97+
noFilter: false,
98+
page: 1,
99+
// returnObject: true, // ? Not sure what this does or if works.
100+
// rowHeight: undefined, // ? Doesn't seem to work
99101
search: '', // ? Need to test this when top slot is used over showSearch prop
100-
searchDebounce: 750, // * Works
101-
searchMaxWait: 1000, // * Works
102-
searchProps: () => ({ // ? Needs more testing
102+
searchDebounce: 750,
103+
searchMaxWait: 1000,
104+
searchProps: () => ({
103105
cols: {
104106
lg: 3,
105107
md: 6,
@@ -111,17 +113,17 @@ export const AllProps = {
111113
density: 'comfortable',
112114
variant: 'underlined',
113115
}) as const,
114-
selectStrategy: 'page' as const, // ! Not working properly //
116+
selectStrategy: 'page' as const,
115117
// separator: '', // TODO: Maybe add this //
116-
server: false, // * Works
117-
showDrilldownWhenLoading: true, // * Works
118-
showExpand: false, // ? Works but needs testing.- Not sure if needed in this object
119-
showFooterRow: false, // ? Not sure if I will use this. Depends on a possible footer slot
120-
showSearch: false, // * Custom Prop
121-
showSelect: false, // * Works
122-
skeltonType: 'heading@1', // * Works
123-
sortAscIcon: '$sortAsc', // * Works
124-
sortBy: () => [], // * Works
125-
tableType: () => ({}), // * Works
126-
width: '100%', // ! Not working properly //
118+
server: false,
119+
showDrilldownWhenLoading: true,
120+
showExpand: false,
121+
showFooterRow: false,
122+
showSearch: false, // * Works - May or may not keep
123+
showSelect: false,
124+
skeltonType: 'heading@1',
125+
sortAscIcon: '$sortAsc',
126+
sortBy: () => [],
127+
tableType: () => ({}),
128+
// width: '100%', // ? Doesn't seem to work
127129
};

0 commit comments

Comments
 (0)