✨ Site > Add file tree

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

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

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

@@ -0,0 +1,24 @@
+import FilesTreeFile from '@/components/files-tree-file'
+export default
+{
+    name: 'files-tree-folder',
+
+    components:
+    {
+        FilesTreeFile
+    },
+
+    props:
+    {
+        depth: { type: Number, default: 0 },
+        content: { type: Object }
+    },
+
+    created()
+    {
+    },
+
+    methods:
+    {
+    }
+}

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

@@ -0,0 +1,7 @@
+<div>
+    <div class="name" :style="{paddingLeft:depth * 20 + 'px'}">
+        {{ 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>