52 lines
1.1 KiB
Vue
52 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { useTreeDataStore, type TreeDataFolder } from '@/stores/tree-data'
|
|
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)"
|
|
: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"
|
|
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">
|
|
.q-item[aria-expanded='true'] {
|
|
color: $primary;
|
|
}
|
|
|
|
.q-item[aria-expanded='true'] .q-icon {
|
|
color: $primary;
|
|
}
|
|
</style>
|