Skip to content

Commit 7bc7a29

Browse files
laruisslaruiss
committed
feat: ✨ Implémente DsfrTable
1 parent 3ac628c commit 7bc7a29

File tree

4 files changed

+306
-0
lines changed

4 files changed

+306
-0
lines changed

‎src/components/DsfrTable/DsfrTable.spec.js‎

Whitespace-only changes.

‎src/components/DsfrTable/DsfrTable.stories.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import DsfrSearchBar from './DsfrSearchBar.vue'
2+
3+
export default {
4+
components: DsfrSearchBar,
5+
title: 'Éléments/Barre de recherche - Search bar',
6+
argTypes: {
7+
label: { control: 'text' },
8+
dark: { control: 'boolean' },
9+
hideIcon: { control: 'boolean' },
10+
labelVisible: { control: 'boolean' },
11+
placeholder: { control: 'text' },
12+
buttonText: { control: 'text' },
13+
modelValue: { control: 'text' },
14+
large: { control: 'boolean' },
15+
},
16+
}
17+
18+
export const TableauSimple = (args) => ({
19+
})
20+
21+
TableauSimple.args = {
22+
23+
}

‎src/components/DsfrTable/DsfrTable.vue‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<table class="simple-table">
3+
<caption class="caption">
4+
Derniers utilisateurs
5+
</caption>
6+
<thead>
7+
<tr
8+
class="header"
9+
>
10+
<th
11+
v-for="header in headers"
12+
:key="header"
13+
>
14+
{{ header }}
15+
</th>
16+
</tr>
17+
</thead>
18+
<tbody>
19+
<tr
20+
v-for="(row, i) in rows"
21+
:key="i"
22+
class="body-row"
23+
>
24+
<SimpleTableCell
25+
v-for="(field, j) in row"
26+
:key="`${i}-${j}`"
27+
:field="field"
28+
/>
29+
</tr>
30+
</tbody>
31+
</table>
32+
</template>
33+
34+
<style src="./table.css" />

‎src/components/DsfrTable/table.css‎

Lines changed: 249 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,249 @@
1+
/* ------------------------------------ *\
2+
TABLE
3+
\* ------------------------------------ */
4+
5+
.fr-table {
6+
position: relative;
7+
margin-bottom: 2.5rem;
8+
padding-top: calc(var(--table-offset) + 1rem);
9+
/* Style bordered, enleve le style even/odd et ajoute des bordures entre chaque ligne *//*
10+
* Cache la caption
11+
*//*
12+
* Fixe le caption en bas du tableau
13+
*//*
14+
* pas de scroll ni de shadow
15+
*//*
16+
* Fixe la taille des colonnes du tableau
17+
*//*
18+
* Ombres ajoutées en Js si le contenu est plus grand que le conteneur
19+
*//*
20+
* Positionnement ombres sur le tableau sans caption
21+
*//*
22+
* Positionnement ombres sur le tableau avec caption en bas
23+
*/
24+
}
25+
26+
.fr-table::before {
27+
content: "";
28+
display: block;
29+
width: 100%;
30+
height: 0;
31+
}
32+
33+
.fr-table:not(.fr-table--no-scroll) table {
34+
width: 100%;
35+
}
36+
37+
.fr-table table {
38+
width: 100%;
39+
display: block;
40+
overflow: auto;
41+
border-spacing: 0;
42+
}
43+
44+
.fr-table[data-fr-js-table="true"] caption {
45+
position: absolute;
46+
top: 0;
47+
}
48+
49+
.fr-table caption {
50+
position: initial;
51+
font-weight: 700;
52+
font-size: 1.375rem;
53+
line-height: 1.75rem;
54+
margin: 0 0 1rem;
55+
font-weight: 700;
56+
text-align: left;
57+
}
58+
59+
.fr-table td, .fr-table th {
60+
text-align: left;
61+
vertical-align: middle;
62+
display: table-cell;
63+
border: 0;
64+
padding: 0.75rem;
65+
font-size: 0.875rem;
66+
line-height: 1.5rem;
67+
}
68+
69+
.fr-table th {
70+
font-weight: 700;
71+
}
72+
73+
.fr-table thead td, .fr-table thead th {
74+
font-weight: 700;
75+
}
76+
77+
.fr-table--bordered tbody td, .fr-table--bordered tbody th {
78+
border: 0;
79+
}
80+
81+
.fr-table--no-caption {
82+
padding-top: 0;
83+
}
84+
85+
.fr-table--no-caption caption {
86+
position: absolute;
87+
width: 1px;
88+
height: 1px;
89+
padding: 0;
90+
margin: -1px;
91+
overflow: hidden;
92+
clip: rect(0, 0, 0, 0);
93+
white-space: nowrap;
94+
/* added line */
95+
border: 0;
96+
height: 0;
97+
}
98+
99+
.fr-table--caption-bottom {
100+
padding-top: 0;
101+
margin-bottom: 0;
102+
margin-top: 1rem;
103+
}
104+
105+
.fr-table--caption-bottom table {
106+
margin-bottom: calc(var(--table-offset) + 3.75rem);
107+
}
108+
109+
.fr-table--caption-bottom[data-fr-js-table="true"] caption {
110+
position: absolute;
111+
top: 100%;
112+
right: 0;
113+
bottom: 0;
114+
left: 0;
115+
margin-top: 1rem;
116+
}
117+
118+
.fr-table--caption-bottom caption {
119+
margin-top: 1rem;
120+
height: min-content;
121+
caption-side: bottom;
122+
}
123+
124+
.fr-table--no-scroll {
125+
min-width: auto;
126+
}
127+
128+
.fr-table--no-scroll table {
129+
overflow-x: hidden;
130+
}
131+
132+
.fr-table--no-scroll caption {
133+
max-width: calc(100vw - 2rem);
134+
}
135+
136+
.fr-table--layout-fixed table {
137+
display: table;
138+
table-layout: fixed;
139+
}
140+
141+
.fr-table--shadow table::before {
142+
content: "";
143+
display: block;
144+
position: absolute;
145+
top: calc(var(--table-offset) + 1rem);
146+
right: 0;
147+
bottom: 0;
148+
left: 0;
149+
z-index: 1;
150+
opacity: 1;
151+
pointer-events: none;
152+
}
153+
154+
.fr-table--no-caption table::before {
155+
content: "";
156+
display: block;
157+
position: absolute;
158+
top: 0;
159+
right: 0;
160+
bottom: 0;
161+
left: 0;
162+
}
163+
164+
.fr-table--caption-bottom table::before {
165+
content: "";
166+
display: block;
167+
position: absolute;
168+
top: 0;
169+
right: 0;
170+
bottom: 0;
171+
left: 0;
172+
}
173+
174+
.fr-table {
175+
/* Style bordered, enleve le style even/odd et ajoute des bordures entre chaque ligne *//*
176+
* Ombres ajoutées en Js si le contenu est plus grand que le conteneur
177+
*/
178+
}
179+
180+
.fr-table caption {
181+
color: var(--g800);
182+
}
183+
184+
.fr-table thead td, .fr-table thead th {
185+
border-bottom: 0.125rem solid var(--g600);
186+
background-color: var(--beige);
187+
color: var(--g700);
188+
}
189+
190+
.fr-table tbody tr:nth-child(even) {
191+
background-color: var(--beige);
192+
}
193+
194+
.fr-table tbody tr:nth-child(odd) {
195+
background-color: var(--white);
196+
}
197+
198+
.fr-table--bordered tbody td, .fr-table--bordered tbody th {
199+
border-bottom: 1px solid var(--g400);
200+
}
201+
202+
.fr-table--bordered tbody tr:nth-child(odd),
203+
.fr-table--bordered tbody tr:nth-child(even) {
204+
background-color: var(--t-plain);
205+
}
206+
207+
.fr-table--shadow {
208+
/**
209+
* Modifier ombre à gauche
210+
**//**
211+
* Modifier ombre à droite
212+
**//**
213+
* Modifier combinaison ombre à gauche et ombre à droite
214+
**/
215+
}
216+
217+
.fr-table--shadow table::before {
218+
box-shadow: inset 0 0 0 transparent, inset 0 0 0 transparent;
219+
}
220+
221+
.fr-table--shadow-left table::before {
222+
content: "";
223+
display: block;
224+
box-shadow: inset 2rem 0 1rem -1.5rem var(--scroll-shadow), inset 0 0 0 transparent;
225+
}
226+
227+
.fr-table--shadow-right table::before {
228+
content: "";
229+
display: block;
230+
box-shadow: inset 0 0 0 transparent, inset -2rem 0 1rem -2rem var(--scroll-shadow);
231+
}
232+
233+
.fr-table--shadow-left.fr-table--shadow-right table::before {
234+
content: "";
235+
display: block;
236+
box-shadow: inset 2rem 0 1rem -1.5rem var(--scroll-shadow),
237+
inset -2rem 0 1rem -1.5rem var(--scroll-shadow);
238+
}
239+
240+
@media (min-width: 48em) {
241+
.fr-table caption {
242+
font-size: 1.5rem;
243+
line-height: 2rem;
244+
}
245+
246+
.fr-table td, .fr-table th {
247+
padding: 1rem;
248+
}
249+
}

0 commit comments

Comments
 (0)