Skip to content

Commit 0753ca3

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Fixing strict ts errors
1 parent 3e6e5fd commit 0753ca3

File tree

8 files changed

+76
-62
lines changed

8 files changed

+76
-62
lines changed

‎src/plugin/VDrilldownTable.vue‎

Lines changed: 15 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -241,20 +241,17 @@ import {
241241
} from './composables/helpers';
242242
import {
243243
Column,
244+
DataTableItem,
244245
DrilldownEvent,
245246
LoadedDrilldown,
246-
SearchProps,
247247
SearchPropCols,
248+
SearchProps,
248249
SortItem,
249250
} from '@/types/types';
250251
import {
251252
HeadersSlot,
252253
TfootSlot,
253254
} from './slots';
254-
import {
255-
DataTableItem,
256-
} from 'vuetify/dist/vuetify-labs.esm';
257-
258255
259256
260257
// -------------------------------------------------- Emits & Slots & Injects //
@@ -305,8 +302,7 @@ const loadedDrilldown = ref<LoadedDrilldown>({
305302
customFilter: () => { }, // ? Needs Testing
306303
customKeyFilter: [], // ? Needs Testing
307304
debounceDelay: 750, // * Custom Prop
308-
// dense: false, // ? Missing in Docs, but is in code base
309-
density: 'comfortable', // * Works - Missing in Docs
305+
density: 'comfortable', // * Works
310306
drilldownKey: '', // * Custom Prop
311307
elevation: 1, // * Custom Prop
312308
expandOnClick: false, // * Works
@@ -330,6 +326,8 @@ const loadedDrilldown = ref<LoadedDrilldown>({
330326
items: [], // * Works
331327
itemsLength: 0,
332328
itemsPerPage: 10, // * Works
329+
level: 0,
330+
levels: 0,
333331
// ! Not working yet `loading` & `loadingText`: https://github.com/vuetifyjs/vuetify/issues/16811 //
334332
// loading: false,
335333
// loadingText: 'Loading...',
@@ -373,7 +371,7 @@ const slots = useSlots();
373371
374372
// -------------------------------------------------- Watch //
375373
watch(props, useDrilldownDebounce(() => {
376-
if (props.level !== 0 || typeof loadedDrilldown.value.level === 'undefined') {
374+
if (props.level !== 0 || loadedDrilldown.value.level === 0) {
377375
setLoadedDrilldown();
378376
}
379377
}, props.debounceDelay, props.level === 0), { deep: true });
@@ -441,41 +439,37 @@ const searchFieldClasses = computed<object>(() => {
441439
442440
// -------------------------------------------------- Methods #
443441
function setLoadedDrilldown(): void {
444-
// console.log('----------------------------- setLoadedDrilldown', props.level);
445-
446442
if (props.drilldown) {
447-
loadedDrilldown.value = useMergeDeep(loadedDrilldown.value, props.drilldown);
443+
loadedDrilldown.value = useMergeDeep(loadedDrilldown.value, props.drilldown) as LoadedDrilldown;
448444
449-
const drilldownItem = loadedDrilldown.value.items.find((item) => {
450-
return item[loadedDrilldown.value.drilldownKey] === props.item.raw[loadedDrilldown.value.drilldownKey];
451-
});
445+
const drilldownItem = loadedDrilldown.value.items.find(<T, K extends keyof T>(item: T) => {
446+
const thisItem = item[loadedDrilldown.value.drilldownKey as K];
447+
const propsItem = props.item.raw[loadedDrilldown.value.drilldownKey];
452448
453-
// console.log({ drilldownItem });
449+
return thisItem === propsItem;
450+
}) as LoadedDrilldown;
454451
455452
loadedDrilldown.value = useMergeDeep(
456453
loadedDrilldown.value,
457-
drilldownItem[loadedDrilldown.value.itemChildrenKey],
458-
);
454+
drilldownItem[loadedDrilldown.value.itemChildrenKey as keyof LoadedDrilldown],
455+
) as LoadedDrilldown;
459456
460457
// Hide expand icon if this is the last drilldown level //
461458
if (props.levels === props.level) {
462459
loadedDrilldown.value.showExpand = false;
463460
}
464461
465-
// console.log('loadedDrilldown', loadedDrilldown.value);
466-
467462
return;
468463
}
469464
470-
loadedDrilldown.value = useMergeDeep(loadedDrilldown.value, props);
465+
loadedDrilldown.value = useMergeDeep(loadedDrilldown.value, props) as LoadedDrilldown;
471466
}
472467
473468
function renderCellItem(item: DataTableItem, column: Column, index: number): unknown {
474469
return useRenderCellItem(item.raw, column, index);
475470
}
476471
477472
478-
479473
// ------------------------- Table Events //
480474
function drilldownEvent(data: DrilldownEvent): void {
481475
// console.log('1 ---------------------------------------- drilldownEvent', { data });

‎src/plugin/slots/HeadersSlot.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,8 @@ import {
5050
5151
const props = defineProps({
5252
loadedDrilldown: {
53-
type: Object,
5453
required: true,
54+
type: Object as PropType<DrilldownTypes.LoadedDrilldown>,
5555
},
5656
});
5757
@@ -78,7 +78,7 @@ const cellClasses = (column: DrilldownTypes.Column): object => {
7878
};
7979
8080
const cellStyles = (column: { width?: string | number; }, dataTableExpand = false): CSSProperties => {
81-
const headerColors = useGetLevelColors(props.loadedDrilldown as DrilldownTypes.LoadedDrilldown, theme, 'header');
81+
const headerColors = useGetLevelColors(props.loadedDrilldown, theme, 'header');
8282
8383
const styles = {
8484
backgroundColor: headerColors.bg,
@@ -98,6 +98,6 @@ const cellStyles = (column: { width?: string | number; }, dataTableExpand = fals
9898
// -------------------------------------------------- Render //
9999
function renderCell(column: DrilldownTypes.Column, /* , index */): unknown {
100100
const tempIndex = 0;
101-
return useRenderCell(props.loadedDrilldown as DrilldownTypes.LoadedDrilldown, column, tempIndex);
101+
return useRenderCell(props.loadedDrilldown, column, tempIndex);
102102
}
103103
</script>

‎src/plugin/slots/TfootSlot.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,8 @@ const props = defineProps({
5858
// required: false,
5959
// },
6060
loadedDrilldown: {
61-
type: Object,
6261
required: true,
62+
type: Object as PropType<DrilldownTypes.LoadedDrilldown>,
6363
},
6464
});
6565
@@ -81,7 +81,7 @@ const cellClasses = (column: DrilldownTypes.Column): object => {
8181
};
8282
8383
const cellStyles = (): CSSProperties => {
84-
const headerColors = useGetLevelColors(props.loadedDrilldown as DrilldownTypes.LoadedDrilldown, theme, 'footer');
84+
const headerColors = useGetLevelColors(props.loadedDrilldown, theme, 'footer');
8585
8686
const styles = {
8787
backgroundColor: headerColors.bg,
@@ -93,7 +93,7 @@ const cellStyles = (): CSSProperties => {
9393
9494
function renderCell(column: DrilldownTypes.Column, /* , index */): unknown {
9595
const tempIndex = 0;
96-
return useRenderCell(props.loadedDrilldown as DrilldownTypes.LoadedDrilldown, column, tempIndex);
96+
return useRenderCell(props.loadedDrilldown, column, tempIndex);
9797
}
9898
9999
</script>

‎src/plugin/slots/TheadSlot.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,14 @@
55
</template>
66

77
<script setup lang="ts">
8+
import * as DrilldownTypes from '@/types/types';
89
import { HeadersSlot } from '@/plugin/slots';
910
1011
1112
defineProps({
1213
loadedDrilldown: {
13-
type: Object,
1414
required: true,
15+
type: Object as PropType<DrilldownTypes.LoadedDrilldown>,
1516
},
1617
});
1718
</script>

‎src/plugin/slots/TopSlot.vue‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,17 +41,19 @@
4141
</template>
4242

4343
<script setup lang="ts">
44+
import * as DrilldownTypes from '@/types/types';
45+
46+
4447
defineProps({
4548
loadedDrilldown: {
4649
required: true,
47-
type: Object,
50+
type: Object as PropType<DrilldownTypes.LoadedDrilldown>,
4851
},
4952
searchFieldClasses: {
5053
required: true,
5154
type: Object,
5255
}
5356
});
5457
55-
5658
const levelSearch = ref<string>('');
5759
</script>

‎src/plugin/utils/props.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Props } from '@/types/types';
1+
import { DataTableItem, Props } from '@/types/types';
22

33
export const AllProps: Props = {
44
// ? Colors accept Vuetify them color names or variables, HEX, RGB, HSL, and CSS color names
@@ -78,7 +78,7 @@ export const AllProps: Props = {
7878
item: {
7979
default: () => { },
8080
required: false,
81-
type: Object,
81+
type: Object as PropType<DataTableItem>,
8282
},
8383
// ? This is for v-data-table-server //
8484
itemsLength: {

‎src/types/types.d.ts‎

Lines changed: 46 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,22 @@ export type SortItem = {
1616

1717
type Density = null | 'default' | 'comfortable' | 'compact';
1818

19+
export interface InternalItem<T = object> {
20+
title: string;
21+
value: unknown;
22+
props: {
23+
[key: string]: unknown;
24+
title: string;
25+
value: unknown;
26+
};
27+
children?: InternalItem<T>[];
28+
raw: T;
29+
}
30+
31+
export interface DataTableItem extends InternalItem {
32+
[key: string]: string;
33+
raw: T;
34+
};
1935

2036

2137
// -------------------------------------------------- Cell Rendering //
@@ -105,20 +121,20 @@ export type SearchProps = {
105121
export type Props = {
106122
// * Custom Property //
107123
colors?: {
108-
default: () => ColorsObject;
124+
default: () => object;
109125
required: boolean;
110-
type: PropType<object>;
126+
type: PropType<ColorsObject>;
111127
};
112128
// * Custom Property //
113-
debounceDelay?: {
129+
debounceDelay: {
114130
default: number;
115131
required: boolean;
116-
type?: PropType<number>;
132+
type: PropType<number>;
117133
};
118134
density?: {
119-
default: string,
135+
default: Density,
120136
required: boolean,
121-
type: StringConstructor;
137+
type: PropType<string | undefined>;
122138
};
123139
// * Custom Property //
124140
drilldown?: {
@@ -127,9 +143,9 @@ export type Props = {
127143
type: PropType<object>;
128144
};
129145
// * Custom Property //
130-
drilldownKey?: {
131-
default?: string;
132-
required?: boolean;
146+
drilldownKey: {
147+
default: string;
148+
required: boolean;
133149
type: PropType<string>;
134150
};
135151
// * Custom Property //
@@ -139,15 +155,15 @@ export type Props = {
139155
type: PropType<number | string | undefined>;
140156
};
141157
// * Custom Property //
142-
footers?: {
143-
default?: () => DataTableHeader[] | DataTableHeader[][];
144-
required?: boolean;
145-
type?: PropType<DataTableHeader[] | DataTableHeader[][]>;
158+
footers: {
159+
default: () => DataTableHeader[] | DataTableHeader[][];
160+
required: boolean;
161+
type: PropType<DataTableHeader[] | DataTableHeader[][]>;
146162
};
147-
headers?: {
148-
default?: () => DataTableHeader[] | DataTableHeader[][];
149-
required?: boolean;
150-
type?: PropType<DataTableHeader[] | DataTableHeader[][]>;
163+
headers: {
164+
default: () => DataTableHeader[] | DataTableHeader[][];
165+
required: boolean;
166+
type: PropType<DataTableHeader[] | DataTableHeader[][]>;
151167
};
152168
hover?: {
153169
default: boolean;
@@ -160,17 +176,17 @@ export type Props = {
160176
required: boolean;
161177
type: PropType<boolean>;
162178
};
163-
item?: {
164-
default: () => unknown;
179+
item: {
180+
default: DataTableItem | object;
165181
required: boolean;
166-
type: DataTableItem;
182+
type: PropType<DataTableItem>;
167183
};
168184
itemChildrenKey?: {
169185
default: string;
170186
required: boolean;
171187
type: PropType<string>;
172188
};
173-
items?: {
189+
items: {
174190
default: () => unknown;
175191
required: boolean;
176192
type: PropType<object>;
@@ -181,13 +197,13 @@ export type Props = {
181197
type: PropType<number>;
182198
};
183199
// * Custom Property //
184-
level?: {
200+
level: {
185201
default: number;
186202
required: boolean;
187203
type: PropType<number>;
188204
};
189205
// * Custom Property //
190-
levels?: {
206+
levels: {
191207
default: number;
192208
required: boolean;
193209
type: PropType<number>;
@@ -202,7 +218,7 @@ export type Props = {
202218
searchProps: {
203219
default: () => SearchProps;
204220
required?: boolean;
205-
type?: PropType<object>;
221+
type?: PropType<SearchProps>;
206222
};
207223
// * Custom Property //
208224
separator?: {
@@ -229,11 +245,11 @@ export type LoadedDrilldown = {
229245
colors?: ColorsObject; // * Custom Property
230246
customFilter?: FilterFunction | undefined;
231247
customKeyFilter?: FilterKeyFunctions | undefined;
232-
debounceDelay?: number; // * Custom Property
248+
debounceDelay?: number | undefined; // * Custom Property
233249
// dense?: boolean; // ! Missing Vuetify Prop
234250
density?: Density;
235251
drilldown?: object; // * Custom Property
236-
drilldownKey?: string; // * Custom Property
252+
drilldownKey: string; // * Custom Property
237253
elevation?: string | number | undefined; // * Custom Property
238254
expandOnClick?: boolean;
239255
expanded?: string[];
@@ -251,17 +267,17 @@ export type LoadedDrilldown = {
251267
hideNoData?: boolean;
252268
hover?: boolean;
253269
isDrilldown?: boolean; // * Custom Property
254-
item?: DataTableItem; // * Custom Property
270+
item?: object; // * Custom Property
255271
itemChildren?: SelectItemKey;
256272
itemChildrenKey?: string; // * Custom Property
257273
itemProps?: SelectItemKey;
258274
itemTitle?: SelectItemKey;
259275
itemValue?: NonNullable<SelectItemKey>;
260-
items?: unknown[];
276+
items: unknown[];
261277
itemsLength?: number;
262278
itemsPerPage?: string | number;
263-
level?: number | undefined; // * Custom Property
264-
levels?: number; // * Custom Property
279+
level: number; // * Custom Property
280+
levels: number; // * Custom Property
265281
// loading?: boolean; // ! Not working properly
266282
// loadingText?: string; // ! Not working properly
267283
modelValue?: unknown[];

‎tsconfig.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
],
1414
"module": "ESNext",
1515
"moduleResolution": "Node",
16+
"noImplicitAny": false,
1617
"noEmit": true,
1718
"outDir": "./dist",
1819
"paths": {

0 commit comments

Comments
 (0)