Skip to content

Commit 885fda9

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Added separator prop
1 parent 08e251e commit 885fda9

File tree

7 files changed

+166
-12
lines changed

7 files changed

+166
-12
lines changed

‎src/plugin/VDrilldownTable.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -463,6 +463,7 @@ const tableClasses = computed<object>(() => {
463463
isHover: loadedDrilldown.hover,
464464
isServerSide,
465465
level: loadedDrilldown.level,
466+
separator: loadedDrilldown.separator,
466467
});
467468
});
468469

‎src/plugin/composables/classes.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,14 @@ import {
1818

1919
// -------------------------------------------------- VDrilldownTable //
2020
export const useTableClasses: UseTableClasses = (options) => {
21-
const { elevation, isDrilldown, isHover, isServerSide, level } = options;
21+
const { elevation, isDrilldown, isHover, isServerSide, level, separator } = options;
2222

2323
const classes = {
24-
'pb-2': true,
2524
[`${componentName}--child`]: isDrilldown,
2625
[`${componentName}--hover`]: isHover,
2726
[`${componentName}--level-${level}`]: true,
2827
[`${componentName}--server`]: isServerSide,
28+
[`${componentName}--separator-${separator}`]: separator,
2929
[`${componentName}`]: true,
3030
[`elevation-${elevation}`]: parseInt(elevation as string) > 0,
3131
};

‎src/plugin/composables/styles.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,8 @@ export const useHeaderCellStyles: UseHeaderCellStyles = (options) => {
4848
};
4949

5050
if (dataTableExpand && !column.width) {
51-
styles.width = '48px';
52-
styles.minWidth = '48px';
51+
styles.width = column.width ? useConvertToUnit({ str: column.width }) : '56px';
52+
styles.minWidth = column.width ? useConvertToUnit({ str: column.width }) : '56px';
5353
}
5454

5555
if (colors === false || colors === null) {

‎src/plugin/styles/main.scss

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
:root {
2+
--vdt-border: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
3+
}
4+
15
%hover-children {
26
.v-table__wrapper {
37
table {
@@ -60,9 +64,157 @@
6064
}
6165
}
6266

67+
&--separator {
68+
&-horizontal {
69+
thead {
70+
tr {
71+
th {
72+
border-top: var(--vdt-border) !important;
73+
}
74+
}
75+
}
76+
77+
tbody {
78+
> tr {
79+
&:last-child {
80+
> th,
81+
> td {
82+
border-bottom: var(--vdt-border) !important;
83+
}
84+
}
85+
}
86+
}
87+
88+
tfoot {
89+
tr {
90+
> th,
91+
> td {
92+
border-top: 0 !important;
93+
border-bottom: var(--vdt-border);
94+
}
95+
}
96+
}
97+
}
98+
99+
&-vertical {
100+
thead {
101+
tr {
102+
th {
103+
border-bottom: 0 !important;
104+
border-top: var(--vdt-border) !important;
105+
106+
&:not(:last-child) {
107+
border-right: var(--vdt-border) !important;
108+
}
109+
}
110+
}
111+
}
112+
113+
tbody {
114+
> tr {
115+
> td {
116+
border-bottom: 0 !important;
117+
118+
&:not(:last-child) {
119+
border-right: var(--vdt-border) !important;
120+
}
121+
}
122+
123+
&:first-child {
124+
> td {
125+
border-top: var(--vdt-border) !important;
126+
}
127+
}
128+
129+
&:last-child {
130+
> td {
131+
border-bottom: var(--vdt-border) !important;
132+
}
133+
}
134+
}
135+
}
136+
137+
tfoot {
138+
> tr {
139+
th {
140+
border-top: 0 !important;
141+
border-bottom: var(--vdt-border) !important;
142+
143+
&:not(:last-child) {
144+
border-right: var(--vdt-border) !important;
145+
}
146+
}
147+
}
148+
}
149+
}
150+
151+
&-cell {
152+
thead {
153+
tr {
154+
th {
155+
border-bottom: 0 !important;
156+
border-top: var(--vdt-border) !important;
157+
158+
&:not(:last-child) {
159+
border-right: var(--vdt-border) !important;
160+
}
161+
}
162+
}
163+
}
164+
165+
tbody {
166+
> tr {
167+
> td {
168+
169+
170+
&:not(:last-child) {
171+
border-right: var(--vdt-border) !important;
172+
}
173+
}
174+
175+
&:first-child {
176+
> td {
177+
border-top: var(--vdt-border) !important;
178+
}
179+
}
180+
181+
&:last-child {
182+
> td {
183+
border-bottom: var(--vdt-border) !important;
184+
}
185+
}
186+
}
187+
}
188+
189+
tfoot {
190+
> tr {
191+
th {
192+
border-top: 0 !important;
193+
border-bottom: var(--vdt-border) !important;
194+
195+
&:not(:last-child) {
196+
border-right: var(--vdt-border) !important;
197+
}
198+
}
199+
}
200+
}
201+
}
202+
}
203+
63204
tbody {
64205
height: 2px;
65206
min-height: 2px;
66207
position: relative;
67208
}
209+
210+
// tfoot tr th,
211+
// tfoot tr td {
212+
// border-bottom: var(--vdt-border);
213+
// }
214+
215+
.v-data-table-footer {
216+
border-bottom: var(--vdt-border);
217+
padding-bottom: 4px;
218+
padding-top: 4px;
219+
}
68220
}

‎src/plugin/utils/props.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ export const AllProps = {
114114
variant: 'underlined',
115115
}) as const,
116116
selectStrategy: 'page' as const,
117-
// separator: '', // TODO: Maybe add this //
117+
separator: 'default' as const,
118118
server: false,
119119
showDrilldownWhenLoading: true,
120120
showExpand: false,

‎src/stores/props.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -148,12 +148,12 @@ export const usePropsStore = defineStore('props', () => {
148148
name: 'searchProps',
149149
type: 'SearchProps',
150150
},
151-
// {
152-
// default: undefined,
153-
// desc: 'tbd',
154-
// name: 'separator',
155-
// type: 'string',
156-
// },
151+
{
152+
default: 'default',
153+
desc: 'Enhance the appearance of the table by modifying the borders of the cells',
154+
name: 'separator',
155+
type: '\'default\' | \'horizontal\' | \'vertical\' | \'cell\' | undefined',
156+
},
157157
{
158158
default: false,
159159
desc: 'Sets the table component to <code class="inline-code">VDataTableServer</code>',

‎src/types/index.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,7 @@ export interface Props {
205205
searchDebounce?: number | undefined | null;
206206
searchMaxWait?: number | undefined | null;
207207
searchProps?: SearchProps;
208-
separator?: string; // TODO: Maybe add this //
208+
separator?: 'default' | 'horizontal' | 'vertical' | 'cell' | undefined;
209209
server?: boolean;
210210
selectStrategy?: VDataTable['$props']['selectStrategy'];
211211
showDrilldownWhenLoading?: boolean;
@@ -553,6 +553,7 @@ export interface UseTableClasses {
553553
isHover: boolean | undefined,
554554
isServerSide: boolean,
555555
level: Props['level'],
556+
separator: Props['separator'],
556557
}
557558
): object;
558559
}

0 commit comments

Comments
 (0)