Skip to content

Commit 26c6f7b

Browse files
NewCodeOnDaBlockNewCodeOnDaBlock
committedOct 17, 2022
chore: add mew light table vue component
1 parent 2b1e573 commit 26c6f7b

File tree

1 file changed

+230
-0
lines changed

1 file changed

+230
-0
lines changed
 

‎src/components/MewLightTable/MewLightTable.vue

+230
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,230 @@
1+
<template>
2+
<div
3+
class="core-components--app-table"
4+
:class="containerClass"
5+
:style="containerStyle"
6+
>
7+
<div v-if="title" class="font-weight-bold mt-6 ml-5 mb-10">{{ title }}</div>
8+
<slot />
9+
<div v-if="loading" class="skeleton-loader-container">
10+
<div v-for="n in Number(loaderCount)" :key="n">
11+
<v-skeleton-loader width="100%" type="heading"></v-skeleton-loader>
12+
</div>
13+
</div>
14+
</div>
15+
</template>
16+
17+
<script>
18+
export default {
19+
name: 'MewLightTable',
20+
components: {},
21+
props: {
22+
fullWidth: {
23+
type: Boolean,
24+
default: false
25+
},
26+
hoverEffect: {
27+
type: Boolean,
28+
default: false
29+
},
30+
background: {
31+
type: Boolean,
32+
default: false
33+
},
34+
mobileBackground: {
35+
type: Boolean,
36+
default: false
37+
},
38+
loading: {
39+
type: Boolean,
40+
default: false
41+
},
42+
loaderCount: {
43+
type: [String, Number],
44+
default: 1
45+
},
46+
borderAround: {
47+
type: Boolean,
48+
default: false
49+
},
50+
borderTopBottom: {
51+
type: Boolean,
52+
default: false
53+
},
54+
borderTop: {
55+
type: Boolean,
56+
default: false
57+
},
58+
borderBottom: {
59+
type: Boolean,
60+
default: false
61+
},
62+
divider: {
63+
type: Boolean,
64+
default: false
65+
},
66+
flat: {
67+
type: Boolean,
68+
default: false
69+
},
70+
title: {
71+
type: String,
72+
default: ''
73+
},
74+
paddingAround: {
75+
type: Boolean,
76+
default: false
77+
},
78+
paddingSide: {
79+
type: Boolean,
80+
default: false
81+
},
82+
roundCorner: {
83+
type: Boolean,
84+
default: false
85+
},
86+
noTablePadding: {
87+
type: Boolean,
88+
default: false
89+
}
90+
},
91+
data() {
92+
return {};
93+
},
94+
computed: {
95+
containerStyle() {
96+
return {
97+
display: this.fullWidth ? 'block' : 'inline-block'
98+
};
99+
},
100+
containerClass() {
101+
return [
102+
this.hoverEffect ? 'hover-effect' : '',
103+
this.background ? 'alteranting-background' : '',
104+
this.borderAround ? 'border-around' : '',
105+
this.borderTopBottom ? 'border-top-bottom' : '',
106+
this.borderTop ? 'border-top' : '',
107+
this.borderBottom ? 'border-bottom' : '',
108+
this.roundCorner ? 'round-corner' : '',
109+
this.loading ? 'loading' : '',
110+
this.flat ? '' : 'box-shadow',
111+
this.divider ? 'divider' : '',
112+
this.paddingAround ? 'padding-around' : '',
113+
this.paddingSide ? 'padding-side' : '',
114+
this.mobileBackground ? 'mobile-background' : '',
115+
this.noTablePadding ? 'no-table-padding' : ''
116+
];
117+
}
118+
}
119+
};
120+
</script>
121+
122+
<style lang="scss">
123+
.core-components--app-table {
124+
// Force style Vuetify skeleton loader
125+
.v-skeleton-loader__heading {
126+
width: 100%;
127+
}
128+
}
129+
</style>
130+
131+
<style lang="scss" scoped>
132+
.skeleton-loader-container {
133+
& > div {
134+
display: flex;
135+
align-items: center;
136+
height: 58px;
137+
padding: 0px 20px;
138+
}
139+
}
140+
// Default styles
141+
.core-components--app-table {
142+
--bg-color: #f4f7fe;
143+
--hover-color: #eaeffb;
144+
--border-color: #e0e5f2;
145+
--shadow-color: rgba(0, 0, 0, 0.15);
146+
table {
147+
border-collapse: collapse;
148+
width: 100%;
149+
thead {
150+
border-bottom: 1px solid var(--border-color);
151+
font-size: 12px;
152+
color: #76848b;
153+
font-weight: 500;
154+
}
155+
td {
156+
height: 58px;
157+
padding: 0px 20px;
158+
}
159+
}
160+
}
161+
// Options by props
162+
.box-shadow {
163+
box-shadow: 0 2px 6px var(--shadow-color);
164+
}
165+
.border-around {
166+
border: 1px solid var(--border-color);
167+
}
168+
.border-top-bottom {
169+
border-top: 1px solid var(--border-color);
170+
border-bottom: 1px solid var(--border-color);
171+
}
172+
.border-top {
173+
border-top: 1px solid var(--border-color);
174+
}
175+
.border-bottom {
176+
border-bottom: 1px solid var(--border-color);
177+
}
178+
.hover-effect {
179+
tbody {
180+
tr:hover {
181+
background-color: var(--hover-color) !important;
182+
}
183+
}
184+
}
185+
.alteranting-background {
186+
tbody {
187+
tr:nth-child(odd) {
188+
background-color: var(--bg-color);
189+
}
190+
}
191+
}
192+
.loading {
193+
tbody {
194+
display: none;
195+
}
196+
}
197+
.divider {
198+
tbody {
199+
tr:not(:last-child) {
200+
border-bottom: 1px solid var(--border-color);
201+
}
202+
}
203+
}
204+
.padding-around {
205+
padding: 15px 15px 15px 15px;
206+
}
207+
.padding-side {
208+
padding: 0px 10px;
209+
}
210+
.round-corner {
211+
border-radius: 8px;
212+
overflow: hidden;
213+
}
214+
.mobile-background {
215+
background-color: var(--v-blueLight-base);
216+
}
217+
.no-table-padding {
218+
table {
219+
td {
220+
padding: 0 !important;
221+
}
222+
td:first-child {
223+
padding-left: 15px !important;
224+
}
225+
td:last-child {
226+
padding-right: 15px !important;
227+
}
228+
}
229+
}
230+
</style>

1 commit comments

Comments
 (1)
Please sign in to comment.