mirror of
https://github.com/lana-k/sqliteviz.git
synced 2025-12-06 10:08:52 +08:00
56 lines
1.0 KiB
Vue
56 lines
1.0 KiB
Vue
<template>
|
|
<div>
|
|
<div class="table-name" @click="colVisible = !colVisible">
|
|
<tree-chevron :expanded="colVisible" />
|
|
{{ name }}
|
|
</div>
|
|
<div v-show="colVisible" class="columns">
|
|
<div v-for="(col, index) in columns" :key="index" class="column">
|
|
{{ col.name }}
|
|
<span class="column-type">{{ col.type }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import TreeChevron from '@/components/svg/treeChevron'
|
|
|
|
export default {
|
|
name: 'TableDescription',
|
|
components: { TreeChevron },
|
|
props: {
|
|
name: String,
|
|
columns: Array
|
|
},
|
|
data() {
|
|
return {
|
|
colVisible: false
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.table-name,
|
|
.column {
|
|
margin-top: 11px;
|
|
}
|
|
|
|
.table-name:hover {
|
|
cursor: pointer;
|
|
}
|
|
.columns {
|
|
margin-left: 24px;
|
|
}
|
|
.column-type {
|
|
display: inline-block;
|
|
background-color: var(--color-gray-light-4);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--border-radius-small);
|
|
padding: 2px 6px;
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
}
|
|
</style>
|