Skip to content

Commit dc81e26

Browse files
webdevnerdstuffwebdevnerdstuff
authored
Merge pull request #35 from webdevnerdstuff/dev
Dev
2 parents 5d45302 + 2fe5d6b commit dc81e26

File tree

22 files changed

+523
-850
lines changed

22 files changed

+523
-850
lines changed

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

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@ const props = defineProps({
9090
9191
9292
const classes = inject('classes');
93+
const colorsProp = ref(props.colors);
9394
const tableSettings = ref({ ...props.settings, ...props.colors });
9495
9596
const headers = {
@@ -110,8 +111,9 @@ const headers = {
110111
{
111112
align: 'start',
112113
key: 'id',
114+
sortable: false,
113115
title: 'Comment ID',
114-
width: 150,
116+
width: 130,
115117
},
116118
{
117119
align: 'start',
@@ -135,7 +137,7 @@ const headers = {
135137
align: 'start',
136138
key: 'id',
137139
title: 'Post ID',
138-
width: 260,
140+
width: 240,
139141
},
140142
{
141143
align: 'start',
@@ -148,20 +150,30 @@ const headers = {
148150
},
149151
],
150152
users: [
153+
// {
154+
// key: 'data-table-select',
155+
// title: '',
156+
// },
151157
{
152158
align: 'start',
153159
key: 'id',
154160
title: 'User ID',
155-
width: 370,
161+
width: 350,
156162
},
157163
{
158164
align: 'start',
159165
key: 'name',
166+
renderer(value) {
167+
return value;
168+
},
160169
title: 'Name',
161170
},
162171
{
163172
align: 'start',
164173
key: 'email',
174+
renderItem(value) {
175+
return `<a href="mailto:${value}">${value}</a>`;
176+
},
165177
title: 'Email',
166178
},
167179
{
@@ -225,18 +237,22 @@ const footers = {
225237
},
226238
],
227239
users: [
240+
// {
241+
// key: 'data-table-select',
242+
// title: '',
243+
// },
228244
{
229245
align: 'start',
230246
key: 'id',
247+
renderFooter() {
248+
return '&nbsp;';
249+
},
231250
title: 'User ID',
232251
width: 350,
233252
},
234253
{
235254
align: 'start',
236255
key: 'name',
237-
renderer() {
238-
return 'Total';
239-
},
240256
title: 'Name',
241257
},
242258
{
@@ -287,7 +303,7 @@ function fetchClientData(drilldown = null) {
287303
user.child = {};
288304
user.child = {
289305
...tableDefaults,
290-
colors: null,
306+
...colorsProp.value,
291307
drilldownKey: 'id',
292308
footers: footers.posts,
293309
headers: headers.posts,
@@ -297,6 +313,7 @@ function fetchClientData(drilldown = null) {
297313
};
298314
}
299315
316+
300317
// Comments Level 3 //
301318
if (drilldown?.level === 2) {
302319
userId = item.userId;
@@ -314,11 +331,11 @@ function fetchClientData(drilldown = null) {
314331
post.child = {};
315332
post.child = {
316333
...tableDefaults,
317-
colors: null,
334+
...colorsProp.value,
318335
drilldownKey: 'id',
319336
footers: footers.comments,
320337
headers: headers.comments,
321-
itemsPerPage: 2,
338+
itemsPerPage: tableSettings.value.itemsPerPage,
322339
level: 3,
323340
loading: true,
324341
sortBy: [],

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

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -110,8 +110,9 @@ const headers = {
110110
{
111111
align: 'start',
112112
key: 'id',
113+
sortable: false,
113114
title: 'Comment ID',
114-
width: 150,
115+
width: 130,
115116
},
116117
{
117118
align: 'start',
@@ -135,7 +136,7 @@ const headers = {
135136
align: 'start',
136137
key: 'id',
137138
title: 'Post ID',
138-
width: 260,
139+
width: 240,
139140
},
140141
{
141142
align: 'start',
@@ -156,16 +157,22 @@ const headers = {
156157
align: 'start',
157158
key: 'id',
158159
title: 'User ID',
159-
width: 370,
160+
width: 350,
160161
},
161162
{
162163
align: 'start',
163164
key: 'name',
165+
renderer(value) {
166+
return value;
167+
},
164168
title: 'Name',
165169
},
166170
{
167171
align: 'start',
168172
key: 'email',
173+
renderItem(value) {
174+
return `<a href="mailto:${value}">${value}</a>`;
175+
},
169176
title: 'Email',
170177
},
171178
{
@@ -236,15 +243,15 @@ const footers = {
236243
{
237244
align: 'start',
238245
key: 'id',
246+
renderFooter() {
247+
return '&nbsp;';
248+
},
239249
title: 'User ID',
240250
width: 350,
241251
},
242252
{
243253
align: 'start',
244254
key: 'name',
245-
renderer() {
246-
return 'Total';
247-
},
248255
title: 'Name',
249256
},
250257
{
@@ -338,6 +345,7 @@ function getUserPosts(drilldown = null, updateCurrentLevel = false) {
338345
itemsPerPage: drilldown?.itemsPerPage ?? 0,
339346
level: 2,
340347
loading: true,
348+
server: true,
341349
sortBy: [],
342350
},
343351
});
@@ -397,6 +405,7 @@ function getPostComments(drilldown = null, updateCurrentLevel = false) {
397405
itemsPerPage: drilldown?.itemsPerPage ?? 0,
398406
level: 3,
399407
loading: true,
408+
server: true,
400409
sortBy: [],
401410
},
402411
});

‎src/documentation/sections/ExampleSection.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424

2525

2626
<ClientTable
27+
:colors="{ colors: null }"
2728
:settings="tableSettings"
2829
title="Client Side Data Table"
2930
/>

‎src/documentation/sections/PropsSection.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ const classes = inject('classes');
124124
const codeBlockSettings = computed(() => props.codeBlockOptions);
125125
const propsStore = usePropsStore();
126126
const store = useCoreStore();
127-
const tableSettings = ref({ ...tableDefaults });
127+
128128
129129
const colorsProp = {
130130
colors: {
@@ -158,6 +158,8 @@ const colorsProp = {
158158
}
159159
};
160160
161+
const tableSettings = ref({ ...tableDefaults, ...{ colors: colorsProp } });
162+
161163
const colorsPropCode = `colors: {
162164
body: {
163165
base: '--v-theme-surface',

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -242,8 +242,9 @@ const headers = {
242242
{
243243
align: 'start',
244244
key: 'id',
245+
sortable: false,
245246
title: 'Comment ID',
246-
width: 150,
247+
width: 130,
247248
},
248249
{
249250
align: 'start',
@@ -267,7 +268,7 @@ const headers = {
267268
align: 'start',
268269
key: 'id',
269270
title: 'Post ID',
270-
width: 260,
271+
width: 240,
271272
},
272273
{
273274
align: 'start',
@@ -288,7 +289,7 @@ const headers = {
288289
align: 'start',
289290
key: 'id',
290291
title: 'User ID',
291-
width: 370,
292+
width: 350,
292293
},
293294
{
294295
align: 'start',

0 commit comments

Comments
 (0)