punkfairie/library
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Extract table to component

Browse source
This commit is contained in:
Marley 2023-07-13 14:29:43 -07:00
parent eed4128b0f
commit 0226eada8c
7 changed files with 117 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
frontend/.idea/inspectionProfiles/Project_Default.xml
View file

@ -2,6 +2,24 @@
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
<inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
<option name="myValues">
<value>
<list size="9">
<item index="0" class="java.lang.String" itemvalue="nobr" />
<item index="1" class="java.lang.String" itemvalue="noembed" />
<item index="2" class="java.lang.String" itemvalue="comment" />
<item index="3" class="java.lang.String" itemvalue="noscript" />
<item index="4" class="java.lang.String" itemvalue="embed" />
<item index="5" class="java.lang.String" itemvalue="script" />
<item index="6" class="java.lang.String" itemvalue="tablethead" />
<item index="7" class="java.lang.String" itemvalue="tableth" />
<item index="8" class="java.lang.String" itemvalue="tabletbody" />
</list>
</value>
</option>
<option name="myCustomValuesEnabled" value="true" />
</inspection_tool>
<inspection_tool class="RequiredAttributes" enabled="true" level="WARNING" enabled_by_default="true">
<option name="myAdditionalRequiredHtmlAttributes" value="model-value" />
</inspection_tool>

13
frontend/components/Table/Tbody.vue Normal file
View file

@ -0,0 +1,13 @@
<script setup lang="ts">
</script>
<template>
<tbody><slot /></tbody>
</template>
<style lang="postcss">
tbody {
@apply divide-y divide-pink-400/40;
}
</style>

22
frontend/components/Table/Td.vue Normal file
View file

@ -0,0 +1,22 @@
<script setup lang="ts">
</script>
<template>
<td><slot /></td>
</template>
<style lang="postcss">
td {
@apply py-5 px-3 whitespace-nowrap;
@apply first-of-type:ps-0;
@apply last-of-type:pe-0 last-of-type:text-end;
div {
@apply mt-1;
@apply first-of-type:mt-0;
}
}
</style>

17
frontend/components/Table/Th.vue Normal file
View file

@ -0,0 +1,17 @@
<script setup lang="ts">
</script>
<template>
<th><slot /></th>
</template>
<style lang="postcss">
th {
@apply py-3.5 px-3;
@apply font-bold text-left;
@apply first-of-type:ps-0;
@apply last-of-type:ps-3.5 last-of-type:pe-0 last-of-type:relative;
}
</style>

13
frontend/components/Table/Thead.vue Normal file
View file

@ -0,0 +1,13 @@
<script setup lang="ts">
</script>
<template>
<thead><slot /></thead>
</template>
<style lang="postcss">
thead {
@apply border-b border-pink-400/80;
}
</style>

13
frontend/components/Table/index.vue Normal file
View file

@ -0,0 +1,13 @@
<script setup lang="ts">
</script>
<template>
<table><slot /></table>
</template>
<style scoped lang="postcss">
table {
@apply w-full;
}
</style>

75
frontend/pages/patrons/index.vue
View file

@ -16,52 +16,52 @@ const patrons = [
<template>
<section>
<table>
<Table>
<thead>
<TableThead>
<tr>
<th>Name</th>
<th>Status</th>
<th>Checked Out</th>
<th>Fines</th>
<th></th>
<TableTh>Name</TableTh>
<TableTh>Status</TableTh>
<TableTh>Checked Out</TableTh>
<TableTh>Fines</TableTh>
<TableTh></TableTh>
</tr>
</thead>
</TableThead>
<tbody>
<TableTbody>
<tr v-for="(patron, index) in patrons" :key="index">
<td>
<TableTd>
<div>{{ patron.name }}</div>
<div class="secondary-info">{{ patron.email }}</div>
</td>
</TableTd>
<td>
<TableTd>
<span class="badge" :class="{
'badge-good': patron.status === 'Active',
'badge-bad': patron.status === 'Overdue',
}">{{ patron.status }}</span>
</td>
</TableTd>
<td>
<TableTd>
<div>{{ patron.checkedOut }} books</div>
<div class="secondary-info">{{ patron.overdue }} overdue</div>
</td>
</TableTd>
<td>
<TableTd>
<div>${{ patron.fines }}</div>
</td>
</TableTd>
<td class="actions">
<TableTd class="actions">
<a href="#">Check Out</a>
<a href="#">View</a>
<a href="#">Edit</a>
</td>
</TableTd>
</tr>
</tbody>
</TableTbody>
</table>
</Table>
</section>
</template>
@ -72,39 +72,6 @@ section {
@apply w-full px-10;
}
table {
@apply w-full;
}
thead {
@apply border-b border-pink-400/80;
}
th {
@apply py-3.5 px-3;
@apply font-bold text-left;
@apply first-of-type:ps-0;
@apply last-of-type:ps-3.5 last-of-type:pe-0 last-of-type:relative;
}
tbody {
@apply divide-y divide-pink-400/40;
}
td {
@apply py-5 px-3 whitespace-nowrap;
@apply first-of-type:ps-0;
@apply last-of-type:pe-0 last-of-type:text-end;
div {
@apply mt-1;
@apply first-of-type:mt-0;
}
}
.badge {
@apply py-1 px-2 rounded-md inline-flex items-center;
@apply ring-1 ring-inset;