optimise select mode toggle

harmonytf · Mar 1, 2024 · b2625e0 · b2625e0
1 parent 7cb8869
commit b2625e0
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git 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
@@ -22,25 +22,25 @@ 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>
     </div>
     <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>