✨ Site > File Tree > Add fuzzy search

site/src/components/files-tree-file/script.js

@@ -15,6 +15,42 @@ export default
         content: { type: Object }
     },
 
+    computed:
+    {
+        visible()
+        {
+            // Get and clean search
+            const search = this.$store.state.files.search.replace(/\ /g, '').toLowerCase()
+
+            // If no search value, return true
+            if(search === '')
+            {
+                return true
+            }
+
+            // Set up fuzzy search
+            const text = this.content.data.path.full
+            let searchPosition = 0
+
+            // Go through each character in the text
+            for(let n = 0; n < text.length; n++)
+            {
+                // If match a character in the search, highlight it
+                if(searchPosition < search.length && text[n].toLowerCase() === search[searchPosition])
+                {
+                    searchPosition += 1
+                }
+            }
+
+            if(searchPosition !== search.length)
+            {
+                return false
+            }
+
+            return true
+        }
+    },
+
     methods:
     {
         onNameClick()

site/src/components/files-tree-file/template.html

@@ -1,4 +1,4 @@
-<div>
+<div v-show="visible">
     <a href="#" class="name" :style="{ paddingLeft:depth * 20 + 'px' }" @click.prevent="onNameClick">
         <file-icon class="icon" :extension="content.data.extension"></file-icon>
         <span class="text">