64 lines
1.4 KiB
Vue
64 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { updateIcons } from "@/lib/icons";
|
|
import { ref, onUpdated } from "vue";
|
|
|
|
const table = defineModel<[string, string][]>({ required: true });
|
|
|
|
const copyTableOverride = ref<string | null>(null);
|
|
|
|
async function copyTable() {
|
|
const csvTable = table.value.map((row) => row.join("\t")).join("\n");
|
|
try {
|
|
await navigator.clipboard.writeText(csvTable);
|
|
copyTableOverride.value = "Table Copied";
|
|
} catch {
|
|
copyTableOverride.value = "Error";
|
|
}
|
|
setTimeout(() => {
|
|
copyTableOverride.value = null;
|
|
}, 1000);
|
|
}
|
|
|
|
onUpdated(updateIcons);
|
|
</script>
|
|
|
|
<template>
|
|
<table id="output" class="output">
|
|
<colgroup>
|
|
<col style="width: 25%" />
|
|
<col />
|
|
</colgroup>
|
|
<tr v-for="(row, index) in table" :key="`out-row-${index}`">
|
|
<td v-for="(item, index2) in row" :key="`out-cell-${index}-${index2}`">
|
|
{{ item }}
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<br />
|
|
<p>
|
|
<button @click="copyTable">
|
|
<i icon="table"></i>
|
|
<span v-if="copyTableOverride">{{ copyTableOverride }}</span>
|
|
<span v-else>Copy table</span>
|
|
</button>
|
|
</p>
|
|
</template>
|
|
|
|
<style scoped>
|
|
table.output,
|
|
table.output th,
|
|
table.output td {
|
|
border: 1px solid var(--text-secondary);
|
|
}
|
|
|
|
table.output td {
|
|
text-align: center;
|
|
font-size: 1.1em;
|
|
padding: 0.25em 0.5em;
|
|
}
|
|
|
|
table.output td:first-child {
|
|
text-align: right;
|
|
}
|
|
</style>
|