112 lines
1.9 KiB
Vue
112 lines
1.9 KiB
Vue
<template>
|
|
<div>
|
|
<div class="flex">
|
|
<div
|
|
:style="indent"
|
|
:class="{ collapsed: collapsed }"
|
|
@click="toggleChildren"
|
|
>
|
|
{{ getDisplay() }}
|
|
</div>
|
|
</div>
|
|
|
|
<div :class="{ hidden: collapsed }">
|
|
<FolderViewChild
|
|
v-for="(node, i) in getNodes()"
|
|
:key="i"
|
|
:depth="depth + 1"
|
|
:nodes="node"
|
|
:name="node.name"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="js">
|
|
|
|
export default {
|
|
name: 'FolderViewChild',
|
|
components: {
|
|
},
|
|
props: {
|
|
// eslint-disable-next-line vue/require-prop-types
|
|
nodes: {
|
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
default: () => {},
|
|
},
|
|
depth: {
|
|
type: Number,
|
|
default: () => 0
|
|
},
|
|
name : {
|
|
type: String,
|
|
default: () => '???',
|
|
}
|
|
},
|
|
data() {
|
|
return { collapsed: false }
|
|
},
|
|
computed: {
|
|
indent() {
|
|
return { transform: `translate(${this.depth * 30}px)` }
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
toggleChildren() {
|
|
if (this.isFolder()) {
|
|
this.collapsed = !this.collapsed
|
|
}
|
|
},
|
|
getDisplay() {
|
|
if (this.depth === -1) {
|
|
return ''
|
|
}
|
|
|
|
return this.getIcon(this.name) + this.getName(this.name)
|
|
},
|
|
isFolder() {
|
|
return Object.keys(this.nodes.children).length > 0
|
|
},
|
|
getNodes() {
|
|
return Object.values(this.nodes.children)
|
|
},
|
|
getIcon(path) {
|
|
if (this.isFolder())
|
|
{
|
|
return '📁'
|
|
}
|
|
|
|
let type = path.split('.').pop()
|
|
|
|
if (type === 'js' || type === 'ts' || type === 'json' || type === 'mcfunction') {
|
|
return '📝'
|
|
} else if (type === 'mcstructure') {
|
|
return '🏛'
|
|
} else if (type === 'png' || type === 'jpg' || type === 'jpeg') {
|
|
return '🖼️'
|
|
} else if (type === 'ogg' || type === 'wav' || type === 'mp3' || type === 'fsb') {
|
|
return '🔊'
|
|
} else if (type === 'lang') {
|
|
return '🈵'
|
|
} else {
|
|
return '📁'
|
|
}
|
|
},
|
|
getName(path) {
|
|
return path.split('/')[0]
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.collapsed {
|
|
opacity: 0.5;
|
|
font-style: italic;
|
|
}
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
</style>
|