Fix: Search table error #29

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sqliteviz",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "license": "Apache-2.0",
   "private": true,
   "scripts": {

src/components/Schema.vue

@@ -5,20 +5,7 @@
     </div>
     <div id="db">
       <div @click="schemaVisible = !schemaVisible" class="db-name">
-        <svg
+        <tree-chevron :expanded="schemaVisible"/>
-          :style="{ transform: schemaVisible ? 'rotate(90deg)' : 'rotate(0)' }"
-          class="chevron-icon"
-          width="9"
-          height="9"
-          viewBox="0 0 8 12"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M0.721924 9.93097L4.85292 5.79997L0.721924 1.66897L1.99992 0.399973L7.39992 5.79997L1.99992 11.2L0.721924 9.93097Z"
-            :fill="schemaVisible ? '#506784' : 'rgba(80, 103, 132, 0.5)'"
-          />
-        </svg>
         {{ dbName }}
       </div>
       <div class="db-edit">
@@ -43,13 +30,15 @@
 import TableDescription from '@/components/TableDescription'
 import TextField from '@/components/TextField'
 import ChangeDbIcon from '@/components/svg/changeDb'
+import TreeChevron from '@/components/svg/treeChevron'
 
 export default {
   name: 'Schema',
   components: {
     TableDescription,
     TextField,
-    ChangeDbIcon
+    ChangeDbIcon,
+    TreeChevron
   },
   data () {
     return {
@@ -66,7 +55,7 @@ export default {
       return !this.filter
         ? this.$store.state.schema
         : this.$store.state.schema.filter(
-          table => table[0].toUpperCase().indexOf(this.filter.toUpperCase()) !== -1
+          table => table.name.toUpperCase().indexOf(this.filter.toUpperCase()) !== -1
         )
     },
     dbName () {
@@ -120,12 +109,9 @@ export default {
 .db-name {
   cursor: pointer;
 }
->>> .chevron-icon {
+
-  -webkit-transition: transform .15s ease-in-out;
-  transition: transform .15s ease-in-out;
-}
 .db-name:hover .chevron-icon path,
 >>> .table-name:hover .chevron-icon path {
-  fill: #506784;
+  fill: var(--color-gray-dark);
 }
 </style>

src/components/TableDescription.vue

@@ -1,20 +1,7 @@
 <template>
   <div>
     <div @click="colVisible = !colVisible" class="table-name">
-      <svg
+      <tree-chevron :expanded="colVisible"/>
-        :style="{transform: colVisible ? 'rotate(90deg)' : 'rotate(0)'}"
-        class="chevron-icon"
-        width="9"
-        height="9"
-        viewBox="0 0 8 12"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M0.721924 9.93097L4.85292 5.79997L0.721924 1.66897L1.99992 0.399973L7.39992 5.79997L1.99992 11.2L0.721924 9.93097Z"
-          :fill="colVisible ? '#506784' : 'rgba(80, 103, 132, 0.5)'"
-        />
-      </svg>
       {{ name }}
     </div>
     <div v-show="colVisible" class="columns">
@@ -27,9 +14,11 @@
 </template>
 
 <script>
+import TreeChevron from '@/components/svg/treeChevron'
 
 export default {
   name: 'TableDescription',
+  components: { TreeChevron },
   props: ['name', 'columns'],
   data () {
     return {

src/components/svg/treeChevron.vue

@@ -0,0 +1,36 @@
+<template>
+  <svg
+    :style="{ transform: expanded ? 'rotate(90deg)' : 'rotate(0)' }"
+    class="chevron-icon"
+    width="9"
+    height="9"
+    viewBox="0 0 8 12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M0.721924 9.93097L4.85292 5.79997L0.721924 1.66897L1.99992 0.399973L7.39992 5.79997L1.99992 11.2L0.721924 9.93097Z"
+      :fill="expanded ? '#506784' : 'rgba(80, 103, 132, 0.5)'"
+    />
+  </svg>
+</template>
+
+<script>
+
+export default {
+  name: 'treeChevron',
+  props: {
+    expanded: {
+      type: Boolean,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chevron-icon {
+  -webkit-transition: transform .15s ease-in-out;
+  transition: transform .15s ease-in-out;
+}
+</style>