From b2625e05dca34219ec6334d1ad7263fdcbd7d47a Mon Sep 17 00:00:00 2001
From: Barnaby <22575741+barnabwhy@users.noreply.github.com>
Date: Fri, 1 Mar 2024 12:42:05 +0000
Subject: [PATCH] optimise select mode toggle

---
 src/components/FileTree.vue   |  2 +-
 src/components/TreeFolder.vue | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/FileTree.vue b/src/components/FileTree.vue
index 99d3699..abf9ad7 100644
--- a/src/components/FileTree.vue
+++ b/src/components/FileTree.vue
@@ -96,7 +96,7 @@ watch(selectMode, (newVal) => {
 <template>
     <div class="container">
         <div class="file-tree">
-            <TreeFolder :dir="mainStore.fileTree" root @select="selectFile" @check="checkPath" :show-check-boxes="selectMode" :checked-files="checkedFiles" />
+            <TreeFolder :dir="mainStore.fileTree" root @select="selectFile" @check="checkPath" :show-check-boxes="selectMode" :checked-files="checkedFiles" key="fileTree" />
         </div>
         <div class="file-details" v-if="selectedPath">
             <template v-if="selectedPath.endsWith('/')">
diff --git a/src/components/TreeFolder.vue b/src/components/TreeFolder.vue
index 10f5bc2..895e580 100644
--- a/src/components/TreeFolder.vue
+++ b/src/components/TreeFolder.vue
@@ -22,9 +22,9 @@ function everyChecked(dir: DirTree): boolean {
         <TreeFolder class="dir" v-for="dir in props.dir.dirs" :dir="dir" :key="dir.name"
             :show-check-boxes="props.showCheckBoxes" :checked-files="props.checkedFiles"
             @select="path => emit('select', dir.name + '/' + path)" @check="(path, check) => emit('check', path, check)" />
-        <p v-for="file in props.dir.files" class="file" :key="file" @click="emit('select', file)">
+        <p v-for="file in props.dir.files" class="file" :key="dir.path + '/' + file" @click="emit('select', file)">
             {{ file }}
-            <input type="checkbox" v-if="props.showCheckBoxes"
+            <input type="checkbox" v-show="props.showCheckBoxes"
                 :checked="props.checkedFiles?.has(dir.path + '/' + file)"
                 @change="emit('check', ' /' + file, ($event.target as HTMLInputElement).checked)" />
         </p>
@@ -32,15 +32,15 @@ function everyChecked(dir: DirTree): boolean {
     <details class="folder" v-else>
         <summary @click="emit('select', '')" @click.right.prevent="emit('select', '')">
             {{ props.dir.name ?? "Unnamed" }}
-            <input type="checkbox" v-if="props.showCheckBoxes" :checked="everyChecked(dir)" :indeterminate="!everyChecked(dir) && anyChecked(dir)"
+            <input type="checkbox" v-show="props.showCheckBoxes" :checked="everyChecked(dir)" :indeterminate="!everyChecked(dir) && anyChecked(dir)"
                 @change="emit('check', dir.path + '/', ($event.target as HTMLInputElement).checked)" />
         </summary>
         <TreeFolder class="dir" v-for="dir in props.dir.dirs" :dir="dir" :key="dir.name"
             :show-check-boxes="props.showCheckBoxes" :checked-files="props.checkedFiles"
             @select="path => emit('select', dir.name + '/' + path)" @check="(path, check) => emit('check', path, check)" />
-        <p v-for="file in props.dir.files" class="file" :key="file" @click="emit('select', file)">
+        <p v-for="file in props.dir.files" class="file" :key="dir.path + '/' + file" @click="emit('select', file)">
             {{ file }}
-            <input type="checkbox" v-if="props.showCheckBoxes"
+            <input type="checkbox" v-show="props.showCheckBoxes"
                 :checked="props.checkedFiles?.has(dir.path + '/' + file)"
                 @change="emit('check', dir.path + '/' + file, ($event.target as HTMLInputElement).checked)" />
         </p>