xlmnxp/extractify.zip
1
0
Fork 0
mirror of https://github.com/xlmnxp/extractify.zip.git synced 2024-11-23 17:13:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix click on file

Browse Source
This commit is contained in:
Salem Yaslem 2023-06-03 06:59:17 +03:00
parent c9dde79651
commit 564825f3a8
3 changed files with 18 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app.vue
View File

@ -54,7 +54,7 @@ onUnmounted(() => {
watchEffect(() => {
const file = filesManager.getFile(selectedPath.value);
filesGridList.value = file?.isFolder ? file.content : [];
filesGridList.value = file?.content;
selectedList.value = [];
for (const selectedElement of document.querySelectorAll(".selectable.selected")) {

31
components/tree-view.vue
View File

@ -2,35 +2,34 @@
import { CompressedFile } from 'libarchive.js/src/compressed-file';
interface Props {
filesList: (File | CompressedFile) & { name: string, path: string, toggle: Boolean, isFolder: Boolean, content: any, active: boolean } [],
filesList: (File | CompressedFile) & { name: string, path: string, toggle: Boolean, isFolder: Boolean, content: any, active: boolean }[],
nav: boolean
}
let {filesList, nav} = defineProps<Props>()
let { filesList, nav } = defineProps<Props>()
let selectedPath = useSelectedPath();
</script>
<template>
<v-list :selected="[selectedPath]" density="compact" :nav="nav">
<template v-for="file in filesList" :key="file.path">
<v-list-item active-color="light-blue-darken-4" :active=file.active :title="file.name" :subtitle="file.path" :value="file.path"
@click="() =>{
<v-list-item active-color="light-blue-darken-4" :active=file.active :title="file.name" :subtitle="file.path"
:value="file.path" @click="() => {
selectedPath = file.path;
file.toggle = !file.toggle;
}">
<template v-slot:prepend>
<v-avatar :color="file.isFolder ? 'light-blue-accent-4' : 'blue-grey-darken-1'">
<v-icon color="white">{{ file.isFolder ? 'mdi-folder' : 'mdi-file' }}</v-icon>
</v-avatar>
</template>
<template v-if="file.isFolder" v-slot:append>
<v-icon>{{ `mdi-chevron-${file.toggle ? 'up' : 'down'}` }}</v-icon>
</template>
</v-list-item>
<div :style="`background-color: rgba(0,0,0,0.05);${nav ? `border-radius: 4px;` : ''}` ">
<template v-if="file.isFolder && file.toggle">
<TreeView :files-list="file.content" :nav="false"></TreeView>
<template v-slot:prepend>
<v-avatar :color="file.isFolder ? 'light-blue-accent-4' : 'blue-grey-darken-1'">
<v-icon color="white">{{ file.isFolder ? 'mdi-folder' : 'mdi-file' }}</v-icon>
</v-avatar>
</template>
<template v-if="file.isFolder" v-slot:append>
<v-icon>{{ `mdi-chevron-${file.toggle ? 'up' : 'down'}` }}</v-icon>
</template>
</v-list-item>
<div v-if="file.isFolder && file.toggle"
:style="`background-color: rgba(0,0,0,0.05);${nav ? `border-radius: 4px;` : ''}`">
<TreeView :files-list="file.content" :nav="false"></TreeView>
</div>
</template>
</v-list>

4
composables/files-manager.ts
View File

@ -144,7 +144,7 @@ export class FilesManager {
for (const file of (innerList || this.filesList.value)) {
if (file.path == path) {
file.content = file.content.sort((a:any, b:any) => {
file.content = file.content?.sort((a:any, b:any) => {
// sort by folder and from a to z
if (a.isFolder && !b.isFolder) return -1;
if (!a.isFolder && b.isFolder) return 1;
@ -157,7 +157,7 @@ export class FilesManager {
}
if (file.isFolder && path.includes(file.path)) {
let recursiveFile = this.getFile(path, file.content);
const recursiveFile = this.getFile(path, file.content);
if (recursiveFile) {
return recursiveFile;
}