Skip to content

Commit 3890791

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Adding slot components
1 parent 72f7bc9 commit 3890791

File tree

5 files changed

+312
-0
lines changed

5 files changed

+312
-0
lines changed

‎src/plugin/components/HeadersSlot.vue‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<template>
2+
<tr
3+
class="v-drilldown-table--header-row"
4+
:class="headerRowClasses"
5+
>
6+
<template
7+
v-for="column in loadedDrilldown.headers"
8+
:key="column"
9+
>
10+
<!-- Column Dynamic Name Header Slot -->
11+
<th
12+
v-if="$slots[`header.${column.key}`]"
13+
:class="headerRowThClasses(column)"
14+
:style="headerRowThStyles(column, true)"
15+
>
16+
<slot
17+
:column="column"
18+
:name="`header.${column.key}`"
19+
/>
20+
</th>
21+
<!-- Column Render `data-table-expand` -->
22+
<th
23+
v-else-if="column.key === 'data-table-expand'"
24+
class="v-drilldown-table--header-row-th"
25+
:class="headerRowThClasses(column)"
26+
:style="headerRowThStyles(column, true)"
27+
v-html="renderCell(column /* , index */)"
28+
></th>
29+
<!-- Column Render TH -->
30+
<th
31+
v-else
32+
class="v-drilldown-table--header-row-th"
33+
:class="headerRowThClasses(column)"
34+
:style="headerRowThStyles(column)"
35+
v-html="renderCell(column /* , index */)"
36+
></th>
37+
</template>
38+
</tr>
39+
</template>
40+
41+
<script setup lang="ts">
42+
import {
43+
CSSProperties,
44+
} from 'vue';
45+
import { useTheme } from 'vuetify';
46+
import { componentName } from '@/plugin/utils/globals';
47+
import * as DrilldownTypes from '@/types/types';
48+
import { useGetLevelColors } from '@/plugin/composables/levelColors';
49+
import {
50+
useConvertToUnit,
51+
useRenderCell,
52+
} from '@/plugin/composables/helpers';
53+
54+
55+
const props = defineProps({
56+
loadedDrilldown: {
57+
type: Object,
58+
required: true,
59+
},
60+
});
61+
62+
const theme = useTheme();
63+
64+
65+
// -------------------------------------------------- Header Row //
66+
const headerRowClasses = (): object => {
67+
return {
68+
[`${componentName}--header-row`]: true,
69+
[`${componentName}--header-row-${props.loadedDrilldown.level}`]: true,
70+
};
71+
};
72+
73+
74+
// -------------------------------------------------- Header Row TH //
75+
const headerRowThClasses = (column): object => {
76+
const classes = {
77+
[`${componentName}--header-row-th-${props.loadedDrilldown.level}`]: true,
78+
[column.cellClass]: column.cellClass,
79+
};
80+
81+
return classes;
82+
};
83+
84+
const headerRowThStyles = (column: { width?: string | number; }, dataTableExpand = false): CSSProperties => {
85+
const headerColors = useGetLevelColors(props.loadedDrilldown, theme, 'header');
86+
87+
const styles = {
88+
backgroundColor: headerColors.bg,
89+
color: headerColors.text,
90+
minWidth: column.width ? useConvertToUnit(column.width) : 'auto',
91+
width: column.width ? useConvertToUnit(column.width) : 'auto',
92+
};
93+
94+
if (dataTableExpand && !column.width) {
95+
styles.width = '48px';
96+
styles.minWidth = '48px';
97+
}
98+
99+
return styles;
100+
};
101+
102+
// -------------------------------------------------- Render //
103+
function renderCell(column: DrilldownTypes.Column, /* , index */): unknown {
104+
const tempIndex = 0;
105+
return useRenderCell(props.loadedDrilldown, column, tempIndex);
106+
}
107+
</script>

‎src/plugin/components/TfootSlot.vue‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<template>
2+
<slot
3+
v-if="$slots.tfoot"
4+
name="tfoot"
5+
/>
6+
<tfoot v-else-if="loadedDrilldown.footers">
7+
<tr
8+
class="v-drilldown-table--footer-row"
9+
:class="footerRowClasses"
10+
>
11+
<template
12+
v-for="column in loadedDrilldown.footers"
13+
:key="column"
14+
>
15+
<!-- Column Dynamic Name Header Slot -->
16+
<slot
17+
v-if="$slots[`tfoot.${column.key}`]"
18+
:column="column"
19+
:name="`tfoot.${column.key}`"
20+
/>
21+
<!-- Column Render TD -->
22+
<td
23+
v-else-if="column.renderFooter || column.renderer"
24+
:class="footerRowClasses(column)"
25+
:style="footerRowTdStyles"
26+
v-html="renderCell(column /* , index */)"
27+
></td>
28+
<!-- Column use `title` -->
29+
<td
30+
v-else
31+
:style="footerRowTdStyles"
32+
>
33+
{{ column.title }}
34+
</td>
35+
</template>
36+
</tr>
37+
</tfoot>
38+
<tfoot v-else-if="loadedDrilldown.showFooterRow">
39+
<tr class="v-drilldown-table--footer-row">
40+
<!-- // ! Updated loadedDrilldown.headers once Vuetify adds missing props to tfoot slot -->
41+
<template
42+
v-for="column in loadedDrilldown.headers"
43+
:key="column"
44+
>
45+
<!-- Column Dynamic Name Header Slot -->
46+
<slot
47+
v-if="$slots[`tfoot.${column.key}`]"
48+
class="v-drilldown-table--footer-row-td"
49+
:column="column"
50+
:name="`tfoot.${column.key}`"
51+
/>
52+
<!-- Column Render `data-table-expand` -->
53+
<td
54+
v-else-if="column.key === 'data-table-expand'"
55+
class="v-drilldown-table--footer-row-td"
56+
v-html="renderCell(column /* , index */)"
57+
></td>
58+
<!-- Column Render TH -->
59+
<td
60+
v-else
61+
class="v-drilldown-table--footer-row-td"
62+
v-html="renderCell(column /* , index */)"
63+
></td>
64+
</template>
65+
</tr>
66+
67+
</tfoot>
68+
</template>
69+
70+
<script setup lang="ts">
71+
import {
72+
CSSProperties,
73+
} from 'vue';
74+
import { useTheme } from 'vuetify';
75+
import { componentName } from '@/plugin/utils/globals';
76+
import * as DrilldownTypes from '@/types/types';
77+
import { useGetLevelColors } from '@/plugin/composables/levelColors';
78+
import {
79+
useRenderCell,
80+
} from '@/plugin/composables/helpers';
81+
82+
83+
const props = defineProps({
84+
loadedDrilldown: {
85+
type: Object,
86+
required: true,
87+
},
88+
});
89+
90+
const theme = useTheme();
91+
92+
93+
const footerRowClasses = (column: DrilldownTypes.Column): object => {
94+
return {
95+
[`${componentName}--footer-row-td`]: true,
96+
[`${componentName}--footer-row-td-${props.loadedDrilldown.level}`]: true,
97+
[column.cellClass]: column.cellClass,
98+
};
99+
};
100+
101+
const footerRowTdStyles = (): CSSProperties => {
102+
const headerColors = useGetLevelColors(props.loadedDrilldown, theme, 'header');
103+
104+
const styles = {
105+
backgroundColor: headerColors.bg,
106+
color: headerColors.text,
107+
};
108+
109+
return styles;
110+
};
111+
112+
function renderCell(column: DrilldownTypes.Column, /* , index */): unknown {
113+
const tempIndex = 0;
114+
return useRenderCell(props.loadedDrilldown, column, tempIndex);
115+
}
116+
117+
</script>
118+
119+
<style lang="scss">
120+
</style>

‎src/plugin/components/TheadSlot.vue‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<thead>
3+
<HeadersSlot :loadedDrilldown="loadedDrilldown" />
4+
</thead>
5+
</template>
6+
7+
<script setup lang="ts">
8+
import { HeadersSlot } from '@/plugin/components';
9+
10+
defineProps({
11+
loadedDrilldown: {
12+
type: Object,
13+
required: true,
14+
},
15+
});
16+
</script>

‎src/plugin/components/TopSlot.vue‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<template>
2+
<slot
3+
v-if="$slots.top"
4+
name="top"
5+
/>
6+
7+
<v-col
8+
v-else-if="loadedDrilldown.showSearch"
9+
lg="12"
10+
>
11+
<v-row>
12+
<slot
13+
v-if="$slots[`top.left`]"
14+
name="top.left"
15+
/>
16+
17+
<v-col
18+
v-else-if="loadedDrilldown.showSearch"
19+
class="d-flex align-center justify-end"
20+
:class="searchFieldClasses"
21+
>
22+
<!-- =========================== Search -->
23+
<v-text-field
24+
v-if="loadedDrilldown.showSearch"
25+
v-model="levelSearch"
26+
class="mt-0 pt-0"
27+
:density="loadedDrilldown.searchProps.density"
28+
hide-details
29+
label="Search"
30+
single-line
31+
:variant="loadedDrilldown.searchProps.variant"
32+
></v-text-field>
33+
</v-col>
34+
35+
<slot
36+
v-if="$slots[`top.right`]"
37+
name="top.right"
38+
/>
39+
</v-row>
40+
</v-col>
41+
</template>
42+
43+
<script setup lang="ts">
44+
import { ref } from 'vue';
45+
46+
47+
defineProps({
48+
loadedDrilldown: {
49+
required: true,
50+
type: Object,
51+
},
52+
searchFieldClasses: {
53+
required: true,
54+
type: Object,
55+
}
56+
});
57+
58+
59+
const levelSearch = ref<string>('');
60+
</script>

‎src/plugin/components/index.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import HeadersSlot from './HeadersSlot.vue';
2+
import TfootSlot from './TfootSlot.vue';
3+
import THeadSlot from './THeadSlot.vue';
4+
5+
export {
6+
HeadersSlot,
7+
THeadSlot,
8+
TfootSlot,
9+
};

0 commit comments

Comments
 (0)