Skip to content

Commit bd3442f

Browse files
guillaume-infernalguillaume-infernal
committed
feat(table): remove tailwind style
1 parent c8e2164 commit bd3442f

File tree

1 file changed

+203
-0
lines changed

1 file changed

+203
-0
lines changed

‎js/PureCSS/Table.vue‎

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
<template>
2+
<div>
3+
<div class="table-filters">
4+
<slot
5+
name="tableFilter"
6+
:hasFilters="hasFilters"
7+
:filters="filters"
8+
:changeFilterValue="changeFilterValue"
9+
>
10+
<TableFilter
11+
v-if="hasFilters"
12+
:filters="filters"
13+
:on-change="changeFilterValue"
14+
/>
15+
</slot>
16+
17+
<slot
18+
name="tableGlobalSearch"
19+
:search="search"
20+
:changeGlobalSearchValue="changeGlobalSearchValue"
21+
>
22+
<div class="table-global-search">
23+
<TableGlobalSearch
24+
v-if="search && search.global"
25+
:value="search.global.value"
26+
:on-change="changeGlobalSearchValue"
27+
/>
28+
</div>
29+
</slot>
30+
31+
<slot
32+
name="tableAddSearchRow"
33+
:hasSearchRows="hasSearchRows"
34+
:search="search"
35+
:newSearch="newSearch"
36+
:enableSearch="enableSearch"
37+
>
38+
<TableAddSearchRow
39+
v-if="hasSearchRows"
40+
:rows="search"
41+
:new="newSearch"
42+
:on-add="enableSearch"
43+
/>
44+
</slot>
45+
46+
<slot
47+
name="tableColumns"
48+
:hasColumns="hasColumns"
49+
:columns="columns"
50+
:changeColumnStatus="changeColumnStatus"
51+
>
52+
<TableColumns
53+
v-if="hasColumns"
54+
:columns="columns"
55+
:on-change="changeColumnStatus"
56+
/>
57+
</slot>
58+
</div>
59+
60+
<slot
61+
name="tableSearchRows"
62+
:hasSearchRows="hasSearchRows"
63+
:search="search"
64+
:newSearch="newSearch"
65+
:disableSearch="disableSearch"
66+
:changeSearchValue="changeSearchValue"
67+
>
68+
<TableSearchRows
69+
ref="rows"
70+
v-if="hasSearchRows"
71+
:rows="search"
72+
:new="newSearch"
73+
:on-remove="disableSearch"
74+
:on-change="changeSearchValue"
75+
/>
76+
</slot>
77+
78+
<slot name="tableWrapper" :meta="meta">
79+
<TableWrapper
80+
class="table-wrapper"
81+
:class="{ 'table-wrapper--not-only-data': !onlyData }"
82+
>
83+
<slot name="table">
84+
<table>
85+
<thead>
86+
<slot name="head" />
87+
</thead>
88+
89+
<tbody>
90+
<slot name="body" />
91+
</tbody>
92+
</table>
93+
</slot>
94+
95+
<slot name="pagination">
96+
<Pagination :meta="paginationMeta" />
97+
</slot>
98+
</TableWrapper>
99+
</slot>
100+
</div>
101+
</template>
102+
103+
<script>
104+
import Pagination from "./Pagination.vue";
105+
import Table from "./../Components/Table.vue";
106+
import TableAddSearchRow from "./TableAddSearchRow.vue";
107+
import TableColumns from "./TableColumns.vue";
108+
import TableFilter from "./TableFilter.vue";
109+
import TableGlobalSearch from "./TableGlobalSearch.vue";
110+
import TableSearchRows from "./TableSearchRows.vue";
111+
import TableWrapper from "./TableWrapper.vue";
112+
113+
export default {
114+
mixins: [Table],
115+
116+
components: {
117+
Pagination,
118+
TableAddSearchRow,
119+
TableColumns,
120+
TableFilter,
121+
TableGlobalSearch,
122+
TableSearchRows,
123+
TableWrapper,
124+
},
125+
};
126+
</script>
127+
<style>
128+
:root {
129+
--dt-text-opacity: 1;
130+
--dt-bg-opacity: 1;
131+
--dt-divide-y-reverse: 0;
132+
--dt-divide-opacity: 1;
133+
--dt-border-opacity: 1;
134+
--dt-input-border-color: 209, 213, 219;
135+
}
136+
</style>
137+
138+
<style scoped>
139+
table :deep(th) {
140+
font-weight: 500;
141+
font-size: 0.75rem;
142+
line-height: 1rem;
143+
padding: 0.75rem 1.5rem;
144+
text-align: left;
145+
text-transform: uppercase;
146+
letter-spacing: 0.05em;
147+
color: rgba(var(--dt-text-color, 107, 114, 128), var(--dt-text-opacity));
148+
}
149+
150+
table :deep(td) {
151+
font-size: 0.875rem;
152+
line-height: 1.25rem;
153+
padding: 1rem 1.5rem;
154+
color: rgba(var(--dt-text-color, 107, 114, 128), var(--dt-text-opacity));
155+
white-space: nowrap;
156+
}
157+
158+
table :deep(tr):hover td {
159+
background-color: rgba(
160+
var(--dt-bg-color, 249, 250, 251),
161+
var(--dt-bg-opacity)
162+
);
163+
}
164+
165+
.table-filters {
166+
display: flex;
167+
}
168+
.table-filters > * + * {
169+
margin-left: 1rem;
170+
}
171+
172+
.table-global-search {
173+
flex-grow: 1;
174+
}
175+
.table-wrapper {
176+
}
177+
.table-wrapper--not-only-data {
178+
margin-top: 0.5rem;
179+
}
180+
.table-wrapper table {
181+
min-width: 100%;
182+
background-color: rgba(
183+
var(--dt-bg-color, 255, 255, 255),
184+
var(--dt-bg-opacity)
185+
);
186+
}
187+
188+
.table-wrapper table > * + * {
189+
border-top-width: calc(1px * calc(1 - var(--dt-divide-y-reverse)));
190+
border-bottom-width: calc(1px * var(--dt-divide-y-reverse));
191+
border-color: rgba(
192+
var(--dt-border-color, 229, 231, 235),
193+
var(--dt-divide-opacity)
194+
);
195+
}
196+
197+
.table-wrapper table > thead {
198+
background-color: rgba(
199+
var(--dt-bg-color, 249, 250, 251),
200+
var(--dt-bg-opacity)
201+
);
202+
}
203+
</style>

0 commit comments

Comments
 (0)