linter

src/views/MainView/Workspace/Schema/TableDescription.vue

@@ -0,0 +1,55 @@
+<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>