Skip to content

Commit d8d9d90

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Merge branch 'checkbox' into dev
2 parents 9dc8bff + 6049ef4 commit d8d9d90

File tree

13 files changed

+370
-158
lines changed

13 files changed

+370
-158
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vuetify-drilldown-table",
3-
"version": "1.0.0-beta-2",
3+
"version": "1.0.0-beta-3",
44
"description": "The Vuetify Drilldown Table is a powerful component that enhances the functionality of the Vuetify framework's VDataTable and VDataTableServer. It provides a recursive table structure, allowing you to display hierarchical data in a nested format.",
55
"private": false,
66
"main": "dist/vuetify-drilldown-table.cjs.js",

‎src/documentation/components/examples/ClientTable.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -287,7 +287,7 @@ function fetchClientData(drilldown = null) {
287287
user.child = {};
288288
user.child = {
289289
...tableDefaults,
290-
...props.colors,
290+
colors: null,
291291
drilldownKey: 'id',
292292
footers: footers.posts,
293293
headers: headers.posts,
@@ -314,7 +314,7 @@ function fetchClientData(drilldown = null) {
314314
post.child = {};
315315
post.child = {
316316
...tableDefaults,
317-
...props.colors,
317+
colors: null,
318318
drilldownKey: 'id',
319319
footers: footers.comments,
320320
headers: headers.comments,

‎src/documentation/components/examples/ServerTable.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -330,6 +330,7 @@ function getUserPosts(drilldown = null, updateCurrentLevel = false) {
330330
user.child = Object.assign({}, {
331331
...user.child,
332332
...{
333+
colors: null,
333334
drilldownKey: 'id',
334335
footers: footers.posts,
335336
headers: headers.posts,
@@ -388,6 +389,7 @@ function getPostComments(drilldown = null, updateCurrentLevel = false) {
388389
post.child = Object.assign({}, {
389390
...post.child,
390391
...{
392+
colors: null,
391393
drilldownKey: 'id',
392394
footers: footers.comments,
393395
headers: headers.comments,

‎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/ClientTable.vue

Lines changed: 156 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
<v-col cols="12">
99
<VDrilldownTable
10-
:color="tableSettings.color"
10+
v-model="selected"
1111
:colors="tableSettings.colors"
1212
:density="tableSettings.density"
1313
:drilldown-key="tableSettings.drilldownKey"
@@ -19,13 +19,13 @@
1919
:hover="tableSettings.hover"
2020
:item-children-key="tableSettings.itemChildrenKey"
2121
:item-props="tableSettings.itemProps"
22+
:item-selectable="tableSettings.itemSelectable"
2223
:items="tableSettings.items"
2324
:items-length="tableSettings.itemsLength"
2425
:items-per-page="tableSettings.itemsPerPage"
2526
:items-per-page-options="tableSettings.itemsPerPageOptions"
2627
:items-per-page-text="tableSettings.itemsPerPageText"
2728
:last-icon="tableSettings.lastIcon"
28-
:last-page-label="tableSettings.lastPageLabel"
2929
:level="tableSettings.level"
3030
:levels="tableSettings.levels"
3131
:loader-height="tableSettings.loaderHeight"
@@ -43,19 +43,154 @@
4343
:prev-page-label="tableSettings.prevPageLabel"
4444
:search-debounce="tableSettings.searchDebounce"
4545
:search-max-wait="tableSettings.searchMaxWait"
46+
:select-strategy="tableSettings.selectStrategy"
4647
:server="tableSettings.server"
4748
:show-current-page="tableSettings.showCurrentPage"
4849
:show-expand="tableSettings.showExpand"
4950
:show-footer-row="tableSettings.showFooterRow"
5051
:show-search="tableSettings.showSearch"
5152
:show-select="tableSettings.showSelect"
5253
:skelton-type="tableSettings.skeltonType"
54+
:sort-asc-icon="tableSettings.sortAscIcon"
5355
:sort-by="tableSettings.sortBy"
54-
:sort-icon-asc="tableSettings.sortAscIcon"
5556
:tag="tableSettings.tag"
5657
:theme="tableSettings.theme"
5758
@update:drilldown="fetchClientData($event)"
5859
>
60+
<!-- <template #loading>
61+
[loading Slot]
62+
</template> -->
63+
64+
<!-- <template #no-data>
65+
[no-data Slot]
66+
</template> -->
67+
68+
<!-- <template #top>
69+
[top Slot]
70+
</template> -->
71+
72+
<!-- <template
73+
v-if="isServerSide"
74+
#[`top.left`]
75+
>
76+
<v-col cols="4">
77+
<v-text-field
78+
v-model="tableSettings.search"
79+
class="mt-0 pt-0"
80+
density="compact"
81+
hide-details
82+
label="Search"
83+
single-line
84+
variant="outlined"
85+
></v-text-field>
86+
</v-col>
87+
</template> -->
88+
89+
<!-- <template #[`top.right`]="props">
90+
<v-col
91+
v-if="props.level === 1"
92+
class="d-flex align-center justify-end"
93+
>
94+
{{ props.search }}
95+
<v-btn
96+
class="ms-2"
97+
color="primary"
98+
@click="props.toggleSelectAll()"
99+
>Toggle Select</v-btn>
100+
<v-btn
101+
class="ms-2"
102+
color="primary"
103+
@click="props.selectAll(true)"
104+
>Select All</v-btn>
105+
<v-btn
106+
class="ms-2"
107+
color="primary"
108+
@click="props.selectAll(false)"
109+
>De-Select All</v-btn>
110+
</v-col>
111+
</template> -->
112+
113+
<!-- <template #[`header.data-table-select`]>
114+
<div class="d-flex justify-center">
115+
<v-icon>mdi mdi-vuetify</v-icon>
116+
</div>
117+
</template> -->
118+
119+
<!-- <template #[`header.sortIcon`]>
120+
<fa-icon icon="fa-solid fa-arrow-up"></fa-icon>
121+
</template> -->
122+
123+
<!-- <template #[`header.id`]="{ column }">
124+
[header cell Slot]: slot {{ column.title }}
125+
</template> -->
126+
127+
<!-- <template #thead="props">
128+
<thead>
129+
<tr>
130+
<td
131+
v-for="column in props.columns"
132+
:key="column"
133+
>
134+
{{ column.title }}
135+
</td>
136+
</tr>
137+
</thead>
138+
</template> -->
139+
140+
<!-- <template #body>
141+
[body Slot]
142+
</template> -->
143+
144+
<!-- <template #tbody="{ props }">
145+
<tbody>
146+
<tr>
147+
<td :colspan="Object.keys(tableSettings.headers.users).length">
148+
[tbody Slot] {{ props }}
149+
</td>
150+
</tr>
151+
</tbody>
152+
</template> -->
153+
154+
<!-- <template #[`item.id`]="{ item }">
155+
[item cell Slot]: {{ item.raw.id }}
156+
</template> -->
157+
158+
<!-- <template #[`item.data-table-select`]>
159+
<v-icon>mdi mdi-vuetify</v-icon>
160+
</template> -->
161+
162+
<!-- <template #[`item.data-table-expand`]>
163+
<fa-icon icon="fa-solid fa-chevron-down"></fa-icon>
164+
</template> -->
165+
166+
<!-- <template #tfoot="props">
167+
<tfoot>
168+
<tr>
169+
<td
170+
v-for="column in props.columns"
171+
:key="column"
172+
>
173+
{{ column.title }}
174+
</td>
175+
</tr>
176+
</tfoot>
177+
</template> -->
178+
179+
<!-- <template #[`tfoot.name`]>
180+
<td>
181+
[tfoot Slot]
182+
</td>
183+
</template> -->
184+
185+
<!-- <template #bottom>
186+
[bottom Slot]
187+
</template> -->
188+
189+
<!-- <template #[`footer.prepend`]>
190+
<div class="me-2">
191+
[footer.prepend Slot]
192+
</div>
193+
</template> -->
59194
</VDrilldownTable>
60195
</v-col>
61196
</template>
@@ -84,6 +219,7 @@ const props = defineProps({
84219
},
85220
});
86221
222+
const selected = ref([]);
87223
88224
const classes = inject('classes');
89225
const tableSettings = ref({ ...props.settings, ...props.colors });
@@ -144,6 +280,10 @@ const headers = {
144280
},
145281
],
146282
users: [
283+
// {
284+
// key: 'data-table-select',
285+
// title: '',
286+
// },
147287
{
148288
align: 'start',
149289
key: 'id',
@@ -153,11 +293,17 @@ const headers = {
153293
{
154294
align: 'start',
155295
key: 'name',
296+
renderer(value) {
297+
return value;
298+
},
156299
title: 'Name',
157300
},
158301
{
159302
align: 'start',
160303
key: 'email',
304+
renderItem(value) {
305+
return `<a href="mailto:${value}">${value}</a>`;
306+
},
161307
title: 'Email',
162308
},
163309
{
@@ -221,9 +367,16 @@ const footers = {
221367
},
222368
],
223369
users: [
370+
// {
371+
// key: 'data-table-select',
372+
// title: '',
373+
// },
224374
{
225375
align: 'start',
226376
key: 'id',
377+
renderFooter() {
378+
return '&nbsp;';
379+
},
227380
title: 'User ID',
228381
width: 350,
229382
},

‎src/playground/configs/templates/ServerTable.vue

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
<v-col cols="12">
99
<VDrilldownTable
10-
:color="tableSettings.color"
10+
v-model="selected"
1111
:colors="tableSettings.colors"
1212
:density="tableSettings.density"
1313
:drilldown-key="tableSettings.drilldownKey"
@@ -19,13 +19,13 @@
1919
:hover="tableSettings.hover"
2020
:item-children-key="tableSettings.itemChildrenKey"
2121
:item-props="tableSettings.itemProps"
22+
:item-selectable="tableSettings.itemSelectable"
2223
:items="tableSettings.items"
2324
:items-length="tableSettings.itemsLength"
2425
:items-per-page="tableSettings.itemsPerPage"
2526
:items-per-page-options="tableSettings.itemsPerPageOptions"
2627
:items-per-page-text="tableSettings.itemsPerPageText"
2728
:last-icon="tableSettings.lastIcon"
28-
:last-page-label="tableSettings.lastPageLabel"
2929
:level="tableSettings.level"
3030
:levels="tableSettings.levels"
3131
:loader-height="tableSettings.loaderHeight"
@@ -43,6 +43,7 @@
4343
:prev-page-label="tableSettings.prevPageLabel"
4444
:search-debounce="tableSettings.searchDebounce"
4545
:search-max-wait="tableSettings.searchMaxWait"
46+
:select-strategy="tableSettings.selectStrategy"
4647
:server="tableSettings.server"
4748
:show-current-page="tableSettings.showCurrentPage"
4849
:show-expand="tableSettings.showExpand"
@@ -73,6 +74,7 @@ const props = defineProps({
7374
},
7475
});
7576
77+
const selected = ref([]);
7678
7779
const classes = inject('classes');
7880
const tableSettings = ref({ ...props.settings });

0 commit comments

Comments
 (0)