✨ Site > File Tree > Add folder toggle

site/src/components/files-tree-folder/index.vue

@@ -1,3 +1,3 @@
 <template src="./template.html"></template>
 <script src="./script.js"></script>
-<style src="./style.styl" lang="stylus"></style>
+<style src="./style.styl" lang="stylus" scoped></style>

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

@@ -1,4 +1,5 @@
 import FilesTreeFile from '@/components/files-tree-file'
+
 export default
 {
     name: 'files-tree-folder',
@@ -14,11 +15,22 @@ export default
         content: { type: Object }
     },
 
+    data()
+    {
+        return {
+            open: true
+        }
+    },
+
     created()
     {
     },
 
     methods:
     {
+        onNameClick()
+        {
+            this.open = !this.open
+        }
     }
 }

site/src/components/files-tree-folder/style.styl

@@ -0,0 +1,2 @@
+.name
+    cursor pointer

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

@@ -1,7 +1,9 @@
 <div>
-    <div class="name" :style="{paddingLeft:depth * 20 + 'px'}">
+    <div class="name" :style="{ paddingLeft:depth * 20 + 'px' }" @click.prevent="onNameClick">
         {{ content.name }}
     </div>
-    <files-tree-folder v-for="folder of content.folders" :key="+ new Date()" :content="folder" :depth="depth + 1"></files-tree-folder>
-    <files-tree-file v-for="file of content.files" :key="+ new Date()" :content="file" :depth="depth + 1"></files-tree-file>
+    <div v-show="open">
+        <files-tree-folder v-for="folder of content.folders" :key="folder.name" :content="folder" :depth="depth + 1"></files-tree-folder>
+        <files-tree-file v-for="file of content.files" :key="file.data.path.full" :content="file" :depth="depth + 1"></files-tree-file>
+    </div>
 </div>