68 lines
1.6 KiB
Vue
68 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { storeToRefs } from 'pinia'
|
|
import { useTreeDataStore, type TreeDataFolder } from '@/stores/tree-data'
|
|
import { useSearchDataStore } from '@/stores/searched-data'
|
|
import { useFileInfoStore } from '@/stores/file-info-data'
|
|
|
|
const { isSearch } = storeToRefs(useSearchDataStore())
|
|
const { isFilePreview } = storeToRefs(useFileInfoStore())
|
|
const { getFolder } = useTreeDataStore()
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
data: TreeDataFolder[]
|
|
level: number
|
|
}>(),
|
|
{
|
|
level: 0,
|
|
},
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<q-list v-for="folder in data" class="rounded-borders">
|
|
<q-expansion-item
|
|
@click="
|
|
() => {
|
|
getFolder(folder.pathname, false)
|
|
isSearch = false
|
|
isFilePreview = false
|
|
}
|
|
"
|
|
:header-inset-level="level * 0.25"
|
|
:group="level.toString()"
|
|
:hide-expand-icon="level === 4"
|
|
:icon="
|
|
level === 1
|
|
? 'mdi-file-cabinet'
|
|
: level === 2
|
|
? 'inbox'
|
|
: 'o_folder_open'
|
|
"
|
|
:label="folder.name"
|
|
class="text-overflow-handle"
|
|
v-model="folder.status"
|
|
>
|
|
<tree-explorer
|
|
v-if="folder.folder"
|
|
:data="folder.folder"
|
|
:level="props.level + 1"
|
|
/>
|
|
</q-expansion-item>
|
|
</q-list>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep(.q-item[aria-expanded='true']) {
|
|
color: $primary;
|
|
}
|
|
|
|
.text-overflow-handle,
|
|
:deep(.q-item__label) {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
</style>
|