unstorage/demo/FileTreeNode.vue

<template>
  <li class="filetree-node">
    <div @click="onOpen">
      {{ item.name }} <span v-if="isDirectory">[{{ isOpen ? "-" : "+" }}]</span>
    </div>
    <ul v-if="isOpen && item.children.length">
      <file-tree-node
        v-for="child of item.children"
        :key="child.name"
        :item="child"
        @open="(path) => $emit('open', path)"
      />
    </ul>
  </li>
</template>

<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
  setup(props) {
    return {
      isOpen: ref((props.item.path || "").split(":").length < 3),
    };
  },
  computed: {
    isDirectory() {
      return this.item.children.length;
    },
  },
  methods: {
    onOpen() {
      if (this.isDirectory) {
        this.isOpen = !this.isOpen;
      } else {
        this.$emit("open", this.item.path);
      }
    },
  },
});
</script>

<style scoped>
.filetree-node {
  cursor: pointer;
}
</style>