Skip to content

Commit 8a25c14

Browse files
webdevnerdstuffwebdevnerdstuff
committed
* Change how the header/footer/border colors work. (breaking change)
* Add props for the new color functionality * Fix table colors and density reactivity
1 parent 7bb573a commit 8a25c14

File tree

13 files changed

+223
-107
lines changed

13 files changed

+223
-107
lines changed

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

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,18 @@
88
<v-col cols="12">
99
<VDrilldownTable
1010
v-model="selected"
11-
:colors="tableSettings.colors"
12-
:density="tableSettings.density"
11+
:color-percentage-change="tableSettings.colorPercentageChange"
12+
:color-percentage-direction="tableSettings.colorPercentageDirection"
13+
:default-colors="tableSettings.defaultColors"
14+
:density="density"
1315
:drilldown-key="tableSettings.drilldownKey"
1416
:elevation="tableSettings.elevation"
1517
:expand-on-click="tableSettings.expandOnClick"
1618
:first-icon="tableSettings.firstIcon"
19+
:fixed-header="tableSettings.fixedHeader"
1720
:footers="footers.users"
1821
:headers="headers.users"
22+
:height="tableSettings.height"
1923
:hover="tableSettings.hover"
2024
:item-children-key="tableSettings.itemChildrenKey"
2125
:item-props="tableSettings.itemProps"
@@ -214,9 +218,10 @@ const props = defineProps({
214218
});
215219
216220
const selected = ref([]);
217-
218221
const classes = inject('classes');
219-
const tableSettings = ref({ ...props.settings });
222+
const defaultColors = inject('defaultColors');
223+
const density = inject('density');
224+
const tableSettings = ref({ ...props.settings, ...{ defaultColors } });
220225
221226
const headers = {
222227
comments: [
@@ -330,10 +335,6 @@ const footers = {
330335
key: 'name',
331336
title: 'Comment',
332337
},
333-
{
334-
key: 'data-table-expand',
335-
title: '',
336-
},
337338
],
338339
posts: [
339340
{
@@ -494,6 +495,10 @@ function fetchClientData(drilldown = null) {
494495
}
495496
});
496497
}
498+
499+
watch(defaultColors, (newVal) => {
500+
tableSettings.value.defaultColors = newVal;
501+
});
497502
</script>
498503
499504

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

Lines changed: 71 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,42 @@
11
<template>
22
<v-container>
3+
<v-row>
4+
<v-col cols="12">
5+
<v-btn-toggle
6+
v-model="selectedColor"
7+
class="ms-2"
8+
density="compact"
9+
>
10+
<v-btn
11+
v-for="color in colors"
12+
:key="color"
13+
:active="headerBackgroundColor === color"
14+
:color="headerBackgroundColor === color ? color : 'accent'"
15+
size="small"
16+
:value="color"
17+
@click="updateColor(color)"
18+
>
19+
{{ color ? color : 'DefaultColors Prop' }}
20+
</v-btn>
21+
</v-btn-toggle>
22+
23+
<v-btn-toggle
24+
v-model="density"
25+
class="ms-2"
26+
density="compact"
27+
>
28+
<v-btn
29+
v-for="densityName in densities"
30+
:key="densityName"
31+
size="small"
32+
:value="densityName"
33+
>
34+
{{ densityName }}
35+
</v-btn>
36+
</v-btn-toggle>
37+
</v-col>
38+
</v-row>
39+
340
<v-row>
441
<ClientTable :settings="tableSettings" />
542
<ServerTable :settings="tableSettingsServer" />
@@ -16,8 +53,41 @@ import ClientTable from './ClientTable.vue';
1653
import ServerTable from './ServerTable.vue';
1754
import tableDefaults from './tableDefaults';
1855
56+
1957
const tableSettings = ref(Object.assign({}, tableDefaults));
20-
const tableSettingsServer = ref({ ...tableDefaults, ...{ searchDebounce: 5000, server: true } });
58+
const tableSettingsServer = ref({ ...tableDefaults, ...{ searchDebounce: 750, server: true } });
59+
60+
61+
// -------------------------------------------------- Testing Helpers //
62+
const colors = ref(['primary', 'secondary', 'success', 'info', 'warning', 'error', null]);
63+
const densities = ref(['compact', 'comfortable', 'default']);
64+
const density = ref('compact');
65+
const headerBackgroundColor = ref('primary');
66+
const selectedColor = ref('primary');
67+
68+
const defaultColors = ref({
69+
background: 'primary',
70+
border: 'primary',
71+
color: 'on-primary',
72+
});
73+
const defaultColorsExample = ref({
74+
background: 'accent',
75+
border: 'accent',
76+
color: 'on-accent',
77+
});
78+
79+
provide('defaultColors', defaultColors);
80+
provide('density', density);
81+
82+
function updateColor(val) {
83+
headerBackgroundColor.value = val ?? defaultColorsExample.value.background;
84+
85+
defaultColors.value = {
86+
background: val ?? defaultColorsExample.value.background,
87+
border: val ?? defaultColorsExample.value.border,
88+
color: val ? `on-${val}` : defaultColorsExample.value.color,
89+
};
90+
}
2191
</script>
2292
2393

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

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,10 @@
88
<v-col cols="12">
99
<VDrilldownTable
1010
v-model="selected"
11-
:colors="tableSettings.colors"
12-
:density="tableSettings.density"
11+
:color-percentage-change="tableSettings.colorPercentageChange"
12+
:color-percentage-direction="tableSettings.colorPercentageDirection"
13+
:default-colors="tableSettings.defaultColors"
14+
:density="density"
1315
:drilldown-key="tableSettings.drilldownKey"
1416
:elevation="tableSettings.elevation"
1517
:expand-on-click="tableSettings.expandOnClick"
@@ -216,7 +218,9 @@ const props = defineProps({
216218
const selected = ref([]);
217219
218220
const classes = inject('classes');
219-
const tableSettings = ref({ ...props.settings });
221+
const defaultColors = inject('defaultColors');
222+
const density = inject('density');
223+
const tableSettings = ref({ ...props.settings, ...{ defaultColors } });
220224
const defaultSortBy = [
221225
{
222226
key: 'id',
@@ -227,7 +231,7 @@ const headers = {
227231
comments: [
228232
// {
229233
// align: 'start',
230-
// key: '',
234+
// key: null,
231235
// title: '',
232236
// width: 110,
233237
// },
@@ -582,4 +586,8 @@ async function serverFetch(url, body) {
582586
function updateOptions(data) {
583587
fetchServerData(data.drilldown, true);
584588
}
589+
590+
watch(defaultColors, (newVal) => {
591+
tableSettings.value.defaultColors = newVal;
592+
});
585593
</script>

‎src/playground/configs/templates/tableDefaults.ts‎

Lines changed: 8 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,7 @@
11
export default {
2-
// color: 'primary', // ? Doesn't seem to work - Vuetify prop
3-
// colors: null,
4-
colors: {
5-
footer: {
6-
background: '--v-theme-surface',
7-
color: '--v-theme-on-surface',
8-
},
9-
header: {
10-
background: 'primary',
11-
color: 'on-primary',
12-
},
13-
percentageChange: 15,
14-
percentageDirection: 'desc',
15-
table: {
16-
bottomBorder: 'primary',
17-
},
18-
},
2+
colorPercentageChange: 15,
3+
colorPercentageDirection: 'desc',
4+
// color: 'primary', // ? Currently only works with multiSort (colored number in header, not added to VDT) - Vuetify prop
195
// customFilter: undefined, // ? Needs Testing - Vuetify prop
206
// customKeyFilter: undefined, // ? Needs Testing - Vuetify prop
217
density: 'default',
@@ -28,7 +14,7 @@ export default {
2814
firstIcon: '$first',
2915
// firstPageLabel: '', // ? Doesn't seem to work - Vuetify prop
3016
// fixedFooter: true, // ? Doesn't seem to work - Vuetify prop
31-
// fixedHeader: true, // ? Doesn't seem to work - Vuetify prop
17+
fixedHeader: false,
3218
footers: [],
3319
headers: [],
3420
height: 'auto',
@@ -118,7 +104,7 @@ export default {
118104
xs: 12,
119105
xxl: 2,
120106
},
121-
searchDebounce: 750,
107+
searchDebounce: 0,
122108
searchEvents: {
123109
// 'input': (e: InputEvent) => {
124110
// console.log('input event triggered', e);
@@ -145,14 +131,14 @@ export default {
145131
variant: 'underlined',
146132
},
147133
selectStrategy: 'page',
148-
separator: 'default',
134+
separator: 'horizontal',
149135
server: false,
150136
showCurrentPage: false,
151137
showDrilldownWhenLoading: true,
152138
showExpand: false,
153139
showFooterRow: false,
154-
showSearch: false,
155-
showSelect: false,
140+
showSearch: true,
141+
showSelect: true,
156142
sortAscIcon: '$sortAsc',
157143
sortBy: [],
158144
// sticky: false, // ? Doesn't seem to work - Vuetify prop

‎src/plugin/VDrilldownTable.vue‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -261,6 +261,7 @@
261261
:multi-sort="item[itemChildrenKey]?.multiSort"
262262
:no-data-text="loadedDrilldown.noDataText"
263263
:server="item[itemChildrenKey]?.server"
264+
:show-footer-row="item[itemChildrenKey]?.showFooterRow"
264265
:sort-by="loadedDrilldown.sortBy"
265266
:table-type="tableType"
266267
@update:drilldown="emitUpdatedExpanded($event)"
@@ -304,7 +305,7 @@
304305
:key="level"
305306
:colorPercentageChange="colorPercentageChange"
306307
:colorPercentageDirection="colorPercentageDirection"
307-
:colors="loadedDrilldown.colors || null"
308+
:colors="loadedDrilldown.colors"
308309
:density="density"
309310
:footerBackgroundColor="footerBackgroundColor"
310311
:footerColor="footerColor"
@@ -447,6 +448,7 @@ if (loadedDrilldown?.colors) {
447448
loadedDrilldown.colors.default = { ...defaultColorValues, ...defaultColors.value };
448449
}
449450
451+
450452
const defaultDrilldownSettings = { ...props, ...loadedDrilldown };
451453
452454
@@ -495,6 +497,12 @@ watch(() => props.loading, () => {
495497
setLoadedDrilldown();
496498
});
497499
500+
watchEffect(() => {
501+
if (loadedDrilldown.colors && defaultColors.value) {
502+
loadedDrilldown.colors.default = { ...defaultColorValues, ...defaultColors.value };
503+
}
504+
});
505+
498506
499507
// -------------------------------------------------- Table #
500508
const showLoadingDrilldownTable = (loading: boolean): boolean => {
@@ -533,7 +541,7 @@ const tableClasses = computed<object>(() => {
533541
534542
const tableStyles = computed<StyleValue>(() => {
535543
return useTableStyles({
536-
colors: loadedDrilldown.colors,
544+
colors: loadedDrilldown.colors!,
537545
level: loadedDrilldown.level,
538546
theme,
539547
});

‎src/plugin/composables/classes.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,15 +89,15 @@ export const useHeaderRowClasses: UseHeaderRowClasses = (options) => {
8989

9090
// ------------------------- Header Cells //
9191
export const useHeaderCellClasses: UseHeaderCellClasses = (options) => {
92-
const { colors, column, level, slotName = '' } = options;
92+
const { column, level, slotName = '' } = options;
9393

9494
const classes = {
9595
[`${componentName}--header-row-th`]: true,
9696
[`${componentName}--header-row-th-${slotName}`]: slotName !== '',
9797
[`${componentName}--header-row-th-${slotName}-${level}`]: slotName,
9898
[`${componentName}--header-row-th-${level}`]: true,
9999
[`${componentName}--header-row-th-sortable`]: column.sortable,
100-
[`${componentName}--header-row-th-sortable-default-color`]: column.sortable && colors === false,
100+
[`${componentName}--header-row-th-sortable-default-color`]: column.sortable,
101101
[`${column.cellClass}`]: column.cellClass,
102102
};
103103

‎src/plugin/composables/levelColors.ts‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616
*/
1717
const levelPercentage: LevelPercentage = (colors, level, direction) => {
1818
let percentage = 100;
19-
let percentageChange = colors.percentageChange ?? 0;
19+
let percentageChange = colors?.percentageChange ?? 0;
2020

2121
if (isNaN(percentageChange)) {
2222
percentage = 100;
@@ -97,7 +97,7 @@ export const getSingleColor = (color: string, theme: ThemeInstance): string => {
9797
const convertLevelColors: ConvertLevelColors = (options) => {
9898
const { colors, level, prop = 'default', theme, type } = options;
9999
const propOptionResponse = { ...colors[prop] as LevelColorResponse };
100-
const direction = colors.percentageDirection as keyof ColorsObject;
100+
const direction = colors?.percentageDirection as keyof ColorsObject;
101101

102102
// Color prop does not exist //
103103
if (typeof propOptionResponse === 'undefined') {
@@ -112,9 +112,10 @@ const convertLevelColors: ConvertLevelColors = (options) => {
112112
const theTheme = theme.global.current.value.colors;
113113
let color = theTheme[value as string] ?? value as string;
114114

115-
// If color is null set to transparent //
115+
// If color is null or undefined use defaults or set to transparent //
116116
if (!color) {
117-
color = 'transparent';
117+
color = colors.default[key] ?? 'transparent';
118+
color = getSingleColor(color, theme);
118119
}
119120

120121
// If color is a property that should not be converted, return the value //
@@ -424,9 +425,10 @@ function hexToRGB(hex: string): RGBColor {
424425
export const useGetLevelColors: UseGetLevelColors = (options) => {
425426
const { colors, level, prop = 'default', themeColors, type = null } = options;
426427

427-
if (typeof colors !== 'object' || colors === null) {
428-
console.trace();
429-
throw new Error('The "colors" prop is set to false. This function should not be called.');
428+
if (typeof colors !== 'object' || colors === null || typeof colors === 'undefined') {
429+
// console.trace(); // For use when debugging //
430+
// throw new Error('Invalid prop: type check failed for prop "colors". Expected Object'); // For use when debugging //
431+
return {};
430432
}
431433

432434
const levelColorOptions = convertLevelColors({

‎src/plugin/composables/styles.ts‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,6 @@ export const useHeaderCellStyles: UseHeaderCellStyles = (options) => {
5151
styles.minWidth = column.width ? useConvertToUnit({ str: column.width }) : '56px';
5252
}
5353

54-
if (colors === false || colors === null) {
55-
return styles as CSSProperties;
56-
}
57-
5854
const headerColors = useGetLevelColors({
5955
colors,
6056
level,
@@ -73,10 +69,6 @@ export const useHeaderCellStyles: UseHeaderCellStyles = (options) => {
7369
export const useTFootCellStyles: UseTFootCellStyles = (options) => {
7470
const { colors, elm, level, theme } = options;
7571

76-
if (colors === false || colors === null) {
77-
return {};
78-
}
79-
8072
const baseColors = useGetLevelColors({
8173
colors,
8274
level,

0 commit comments

Comments
 (0)