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

feat: new paint job, code cleanup, copy hex values to clipboard when clicked

Browse source
This commit is contained in:
Sebin Nyshkim 2022-01-28 23:58:50 +01:00
parent 88361c95bf
commit fd3c8f6449
1 changed files with 34 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

57
src/components/DataTable.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<table class="datatable"> <table class="datatable">
<thead class="datatable__head"> <thead class="datatable__head">
<tr class="datatable__row datatable__row--head"> <tr class="datatable__row">
<th <th
class="datatable__heading" class="datatable__heading"
v-for="(header, idx) in dataset.headers" v-for="(header, idx) in dataset.headers"
@ -18,13 +18,10 @@
v-for="(cell, idx) in row" v-for="(cell, idx) in row"
:key="idx" :key="idx"
:colspan="idx === 1 && !isHexValue(row[1]) ? 2 : 1" :colspan="idx === 1 && !isHexValue(row[1]) ? 2 : 1"
:class="{ 'datatable__cell--hex': idx === 1 && isHexValue(row[1]) }"
> >
<template v-if="Array.isArray(cell)"> <template v-if="Array.isArray(cell)">
<ul <ul class="col-2">
:class="[
cell.length > 11 ? 'col-3' : cell.length > 4 ? 'col-2' : '',
]"
>
<li v-for="(item, idx) in cell" :key="idx"> <li v-for="(item, idx) in cell" :key="idx">
{{ item }} {{ item }}
</li> </li>
@ -32,13 +29,20 @@
</template> </template>
<template v-else> <template v-else>
<template v-if="isHexValue(cell)">
<a href="#" @click.prevent="copyToClipboard(cell)">
{{ cell }} {{ cell }}
</a>
</template>
<template v-else>
{{ cell }}
</template>
</template> </template>
</td> </td>
<td <td
v-if="isHexValue(row[1])" v-if="isHexValue(row[1])"
class="datatable__cell--colorpick" class="datatable__cell--colorpick"
:style="`background-color: ${row[1]}`" :style="{ backgroundColor: row[1] }"
></td> ></td>
</tr> </tr>
</tbody> </tbody>
@ -58,6 +62,9 @@ export default {
isHexValue(value) { isHexValue(value) {
return /^#[0-9a-f]{6}$/i.test(value) ? value : false; return /^#[0-9a-f]{6}$/i.test(value) ? value : false;
}, },
copyToClipboard(value) {
navigator.clipboard.writeText(value);
},
}, },
}; };
</script> </script>
@ -108,31 +115,37 @@ export default {
} }
} }
&__body { &__head {
.datatable__row {
background-color: rgba($bg-color-dark, 0.7);
&:nth-child(odd) {
background-color: rgba(lighten($bg-color-dark, 15%), 0.7);
}
}
}
&__row {
&--head {
background-color: $bg-color-light;
color: $copy-color; color: $copy-color;
border-top: 0.0625em solid $sebin-secondary;
} }
&__body {
border: {
top: 0.0625em solid $sebin-secondary;
bottom: 0.0625em solid $sebin-secondary;
}
}
&__body &__row:hover {
background: rgba(#000, 0.3);
} }
&__cell { &__cell {
a {
text-decoration: none;
}
&:first-child { &:first-child {
text-align: right; text-align: right;
} }
&--hex {
font-family: monospace;
}
&--colorpick { &--colorpick {
margin-top: 0.1em; border: 0.0625em solid #fff;
border: 0.1em solid #fff;
} }
} }
} }