SebinNyshkim/viktor-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add ColorTable component

Browse source
This commit is contained in:
Sebin Nyshkim 2022-09-26 17:26:26 +02:00
parent b9b70d403f
commit 5389d0aa5c
1 changed files with 101 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

101
src/components/ColorTable.vue Normal file
View file

@ -0,0 +1,101 @@
<script setup lang="ts">
interface ColorDict {
name: string;
value: string;
}
interface Props {
colors: Array<ColorDict>;
}
defineProps<Props>();
</script>
<template>
<table class="color-table">
<thead class="color-table__head">
<tr class="color-table__row">
<th class="color-table__heading name">Body part</th>
<th class="color-table__heading value">Value</th>
<th class="color-table__heading color">Color</th>
</tr>
</thead>
<tbody class="color-table__body">
<tr class="color-table__row" v-for="(color, idx) in colors" :key="idx">
<td class="color-table__cell name">{{ color.name }}</td>
<td class="color-table__cell value">{{ color.value }}</td>
<td
class="color-table__cell color"
:style="{ 'background-color': color.value }"
></td>
</tr>
</tbody>
</table>
</template>
<style lang="scss">
.color-table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
max-width: var(--container-width-tables);
margin: 2rem auto;
padding: var(--color-table-spacing);
&__heading,
&__cell {
padding: 0.5rem 1rem;
}
&__heading {
font-weight: bold;
background-color: var(--color-table-heading-background);
color: var(--color-table-heading-text-color);
&:first-child {
border-radius: var(--color-table-border-radius) 0 0 0;
}
&:last-child {
border-radius: 0 var(--color-table-border-radius) 0 0;
}
&.name {
text-align: right;
}
}
&__cell {
background-color: var(--color-table-cell-background);
color: var(--color-table-cell-text-color);
&.name {
text-align: right;
}
&.value {
font-family: monospace;
text-align: center;
}
&.color {
min-width: var(--color-table-color-cell-width);
}
}
&__row:hover &__cell {
background-color: var(--color-table-row-hover);
color: var(--color-table-cell-text-color-hover);
}
&__row:last-child &__cell {
&:first-child {
border-radius: 0 0 0 var(--color-table-border-radius);
}
&:last-child {
border-radius: 0 0 var(--color-table-border-radius) 0;
}
}
}
</style>