Skip to content

Commit f802e38

Browse files
Adding in binding props and events for the built in search field. Adding in binding props for the tableLoader
1 parent 15890eb commit f802e38

File tree

11 files changed

+163
-128
lines changed

11 files changed

+163
-128
lines changed

src/playground/configs/templates/ClientTable.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
:level="tableSettings.level"
3030
:levels="tableSettings.levels"
3131
:loader-height="tableSettings.loaderHeight"
32+
:loader-props="tableSettings.loaderProps"
3233
:loader-size="tableSettings.loaderSize"
3334
:loader-type="tableSettings.loaderType"
3435
:loading="tableSettings.loading"

src/playground/configs/templates/ServerTable.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,14 @@
2929
:level="tableSettings.level"
3030
:levels="tableSettings.levels"
3131
:loader-height="tableSettings.loaderHeight"
32+
:loader-props="tableSettings.loaderProps"
3233
:loader-size="tableSettings.loaderSize"
3334
:loader-type="tableSettings.loaderType"
3435
:loading="tableSettings.loading"
3536
:loading-text="tableSettings.loadingText"
3637
:match-column-widths="tableSettings.matchColumnWidths"
3738
:multi-sort="tableSettings.multiSort"
3839
:next-icon="tableSettings.nextIcon"
39-
:next-page-label="tableSettings.nextPageLabel"
4040
:no-data-text="tableSettings.noDataText"
4141
:page="tableSettings.page"
4242
:page-text="tableSettings.pageText"

src/playground/configs/templates/tableDefaults.ts

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,6 @@ export default {
2121
bg: 'primary',
2222
text: 'on-primary',
2323
},
24-
loader: {
25-
// bg: '',
26-
circular: 'primary',
27-
color: 'primary',
28-
linear: 'surface-variant',
29-
text: 'surface-variant',
30-
},
3124
percentageChange: 25,
3225
percentageDirection: 'desc',
3326
},
@@ -87,21 +80,37 @@ export default {
8780
// lastPageLabel: '$vuetify.dataFooter.lastPage', // ? Doesn't seem to work - Vuetify prop
8881
level: 1,
8982
levels: 3,
90-
loaderHeight: '2px',
91-
loaderSize: 'default',
83+
loaderProps: {
84+
circular: {
85+
bgColor: 'theme-surface',
86+
color: 'primary',
87+
indeterminate: true,
88+
},
89+
linear: {
90+
color: 'surface-variant',
91+
height: '2px',
92+
indeterminate: true,
93+
},
94+
skelton: {
95+
type: 'heading@1',
96+
},
97+
text: {
98+
color: 'surface-variant',
99+
},
100+
},
92101
loaderType: [
93102
'linear',
94103
// 'circular',
95104
// 'text',
96105
// 'skelton',
97106
],
98107
loading: false,
99-
loadingText: '$vuetify.dataIterator.loadingText',
108+
loadingText: 'Loading',
100109
matchColumnWidths: false,
101110
multiSort: false,
102111
mustSort: false,
103112
nextIcon: '$next',
104-
nextPageLabel: '$vuetify.dataFooter.nextPage', // ? Doesn't seem to work - Vuetify prop
113+
// nextPageLabel: '$vuetify.dataFooter.nextPage', // ? Doesn't seem to work - Vuetify prop
105114
noDataText: '$vuetify.noDataText',
106115
page: 1,
107116
pageText: '$vuetify.dataFooter.pageText',
@@ -152,7 +161,6 @@ export default {
152161
showFooterRow: false,
153162
showSearch: false,
154163
showSelect: false,
155-
skeltonType: 'heading@1',
156164
sortAscIcon: '$sortAsc',
157165
sortBy: [],
158166
// sticky: false, // ? Doesn't seem to work - Vuetify prop

src/plugin/VDrilldownTable.vue

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -73,14 +73,12 @@
7373
:density="loadedDrilldown.density"
7474
:items="loadedDrilldown.items"
7575
:level="level"
76+
:loader-props="loadedDrilldown.loaderProps"
7677
:loader-settings="{
7778
colspan: props.columns.length,
78-
height: loadedDrilldown.loaderHeight,
7979
loaderType: loadedDrilldown.loaderType,
8080
loading: loadedDrilldown.loading,
8181
loadingText: loadingText,
82-
size: loadedDrilldown.loaderSize,
83-
skeltonType: loadedDrilldown.skeltonType,
8482
}"
8583
:match-column-widths="loadedDrilldown.matchColumnWidths"
8684
:select-strategy="loadedDrilldown.selectStrategy"
@@ -215,16 +213,14 @@
215213
:items-per-page="item.raw[itemChildrenKey]?.itemsPerPage"
216214
:level="level + 1"
217215
:levels="loadedDrilldown.levels"
218-
:loaderHeight="item.raw[itemChildrenKey]?.loaderHeight"
219-
:loaderSize="item.raw[itemChildrenKey]?.loaderSize"
216+
:loaderProps="item.raw[itemChildrenKey]?.loaderProps"
220217
:loaderType="item.raw[itemChildrenKey]?.loaderType"
221218
:loading="item.raw[itemChildrenKey]?.loading"
222219
:loadingText="loadingText"
223220
:match-column-widths="loadedDrilldown.matchColumnWidths"
224221
:multi-sort="item.raw[itemChildrenKey]?.multiSort"
225222
:no-data-text="loadedDrilldown.noDataText"
226223
:server="item.raw[itemChildrenKey]?.server"
227-
:skeltonType="item.raw[itemChildrenKey]?.skeltonType"
228224
:sort-by="loadedDrilldown.sortBy"
229225
:table-type="tableType"
230226
@update:drilldown="emitUpdatedExpanded($event)"

src/plugin/components/TableLoader.vue

Lines changed: 21 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -18,24 +18,15 @@
1818
class="pa-0 ma-0"
1919
:order="getOrder('linear')"
2020
>
21-
<v-progress-linear
22-
:color="linearColor"
23-
:height="loaderHeight"
24-
indeterminate
25-
></v-progress-linear>
21+
<v-progress-linear v-bind="boundLinearProps"></v-progress-linear>
2622
</v-col>
2723

2824
<v-col
2925
v-if="checkLoaderType('circular')"
3026
class="pa-0 my-2"
3127
:order="getOrder('circular')"
3228
>
33-
<v-progress-circular
34-
:bg-color="circularBackgroundColor"
35-
:color="circularColor"
36-
indeterminate
37-
:size="size"
38-
></v-progress-circular>
29+
<v-progress-circular v-bind="boundCircularProps"></v-progress-circular>
3930
</v-col>
4031

4132
<v-col
@@ -44,8 +35,8 @@
4435
:order="getOrder('skelton')"
4536
>
4637
<v-skeleton-loader
38+
v-bind="boundSkeltonProps"
4739
:loading="skeltonLoading"
48-
:type="currentSkeltonType"
4940
>
5041
</v-skeleton-loader>
5142
</v-col>
@@ -73,7 +64,7 @@ import {
7364
useLoaderTrStyles,
7465
useLoaderVRowClasses,
7566
} from '@/plugin/composables/loader';
76-
import { useGetLevelColors } from '@/plugin/composables/levelColors';
67+
import { getSingleColor } from '@/plugin/composables/levelColors';
7768
7869
7970
const theme = useTheme();
@@ -86,19 +77,8 @@ const props = withDefaults(defineProps<TableLoader>(), {
8677
textLoader: true,
8778
});
8879
89-
const baseColors = computed(() => {
90-
if (typeof props.colors === 'object' && props.colors !== null) {
91-
return useGetLevelColors({
92-
colors: props.colors,
93-
level: props.level,
94-
prop: 'loader',
95-
themeColors: theme,
96-
});
97-
}
98-
99-
return;
100-
});
10180
81+
// -------------------------------------------------- Classes & Styles //
10282
const loaderTrStyles = computed<StyleValue>(() => useLoaderTrStyles({
10383
isLinearOnly,
10484
loaderHeight,
@@ -113,13 +93,13 @@ const loaderContainerClasses = computed(() => useLoaderContainerClasses({ isLine
11393
const loaderVRowClasses = computed(() => useLoaderVRowClasses());
11494
11595
116-
// v-progress-linear //
117-
const linearColor = computed<string | undefined>(() => {
118-
return baseColors.value?.linear || '';
119-
});
96+
// -------------------------------------------------- v-progress-linear //
97+
const boundLinearProps = computed(() => props.loaderProps.linear);
12098
12199
const loaderHeight = computed(() => {
122-
return useLoaderHeight(props.height as string | number);
100+
const height = props.loaderProps.linear?.height || '2px';
101+
102+
return useLoaderHeight(height as string | number);
123103
});
124104
125105
const isLinearOnly = computed<boolean>(() => {
@@ -133,30 +113,25 @@ const isLinearOnly = computed<boolean>(() => {
133113
});
134114
135115
136-
// v-progress-circular //
137-
const circularBackgroundColor = computed<string | undefined>(() => {
138-
return baseColors.value?.bg;
139-
});
140-
141-
const circularColor = computed<string | undefined>(() => {
142-
return baseColors.value?.circular;
143-
});
116+
// -------------------------------------------------- v-progress-circular //
117+
const boundCircularProps = computed(() => props.loaderProps.circular);
144118
145119
146-
// v-skeleton-loader //
147-
const currentSkeltonType = computed<string>(() => {
148-
return props.skeltonType || 'heading@1';
149-
});
120+
// -------------------------------------------------- v-skeleton-loader //
121+
const boundSkeltonProps = computed(() => props.loaderProps.skelton);
150122
151123
const skeltonLoading = computed(() => {
152124
return props.loading as boolean;
153125
});
154126
155127
156-
// loadingText //
128+
// -------------------------------------------------- loadingText //
157129
const textStyles = computed<StyleValue>(() => {
130+
let textColor = props.loaderProps.text?.color || 'surface-variant';
131+
textColor = getSingleColor(textColor, theme);
132+
158133
const styles = {
159-
color: baseColors.value?.text,
134+
color: textColor,
160135
};
161136
162137
return styles;
@@ -167,6 +142,8 @@ const computedLoadingText = computed<string>(() => {
167142
});
168143
169144
145+
// -------------------------------------------------- Methods //
146+
170147
// Get the order of the loader type //
171148
const getOrder = (type: string): number => {
172149
const loaderType = props.loaderType;

src/plugin/composables/levelColors.ts

Lines changed: 46 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { ThemeInstance } from 'vuetify';
12
import {
23
ColorsObject,
34
ConvertLevelColors,
@@ -48,6 +49,48 @@ const levelPercentage: LevelPercentage = (colors, level, direction) => {
4849
};
4950

5051

52+
/**
53+
* Checks
54+
*/
55+
function checkDoNotConvert(color: string) {
56+
return color === 'transparent' || color === 'none' || color === 'inherit' || color === 'currentColor' || color === 'initial' || color === 'unset';
57+
}
58+
59+
function checkIfThemeVarColor(color: string) {
60+
return color.includes('--v-theme');
61+
}
62+
63+
function checkIfThemeColor(color: string, theme: ThemeInstance) {
64+
const themeColors = theme.global.current.value.colors;
65+
66+
return Object.entries(themeColors).find(([key]) => {
67+
return key === color;
68+
});
69+
}
70+
71+
72+
/**
73+
* Converts single color
74+
*/
75+
export const getSingleColor = (color: string, theme: ThemeInstance): string => {
76+
if (checkDoNotConvert(color)) {
77+
return color;
78+
}
79+
80+
if (checkIfThemeVarColor(color)) {
81+
return `rgb(var(${color}))`;
82+
}
83+
84+
const isThemeColor = checkIfThemeColor(color, theme);
85+
86+
if (isThemeColor) {
87+
return `hsl(${convertToHSL(isThemeColor[1])})`;
88+
}
89+
90+
return `hsl(${convertToHSL(color)})`;
91+
};
92+
93+
5194
/**
5295
* Converts the colors to HSL values
5396
*/
@@ -75,7 +118,7 @@ const convertLevelColors: ConvertLevelColors = (options) => {
75118
}
76119

77120
// If color is a property that should not be converted, return the value //
78-
if (color === 'transparent' || color === 'none' || color === 'inherit' || color === 'currentColor' || color === 'initial' || color === 'unset') {
121+
if (checkDoNotConvert(color)) {
79122
propOptionResponse[key as keyof LevelColorResponse] = color;
80123
return;
81124
}
@@ -86,7 +129,7 @@ const convertLevelColors: ConvertLevelColors = (options) => {
86129
}
87130

88131
// If color is a theme variable, return the RGB with variable //
89-
if (color.includes('--v-theme')) {
132+
if (checkIfThemeVarColor(color)) {
90133
propOptionResponse[key as keyof LevelColorResponse] = `rgb(var(${color}))`;
91134
return;
92135
}
@@ -383,7 +426,7 @@ export const useGetLevelColors: UseGetLevelColors = (options) => {
383426

384427
if (typeof colors !== 'object' || colors === null) {
385428
console.trace();
386-
throw new Error('The "colors" prop is set to false. This function should no be called.');
429+
throw new Error('The "colors" prop is set to false. This function should not be called.');
387430
}
388431

389432
const levelColorOptions = convertLevelColors({

src/plugin/slots/HeadersSlot.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,11 +75,12 @@
7575
:colspan="loaderSettings.colspan"
7676
:height="loaderSettings.height"
7777
:level="level"
78+
:loader-props="loaderProps"
79+
:loader-settings="loaderSettings"
7880
:loader-type="loaderSettings.loaderType"
7981
:loading="loaderSettings.loading || false"
8082
:loading-text="loaderSettings.loadingText"
8183
:size="loaderSettings.size"
82-
:skelton-type="loaderSettings.skeltonType"
8384
/>
8485
</template>
8586

0 commit comments

Comments
 (0)