github/dbx
4
0 Fork 0
mirror of https://github.com/t8y2/dbx.git synced 2026-11-15 06:51:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(sql-library): stabilize rename input

Browse Source
This commit is contained in:
zipg authored and GitHub committed 2026-07-11 08:55:35 +08:00
1 parent 264909aaa9
commit 1d0d2fbc05
1 file changed
+53 -5
Download Patch File Download Diff File Expand all files Collapse all files
apps/desktop/src/components/layout/SqlLibraryPanel.vue
+53 -5
View File
@@ -563,7 +563,24 @@ function setRenameInputRef(el: unknown) {
renameInputRef.value = (el as HTMLInputElement) ?? null;
}
function isRenamingFolder(folderId: string) {
return renamingTarget.value?.type === "folder" && renamingTarget.value.id === folderId;
}
function isRenamingFile(fileId: string) {
return renamingTarget.value?.type === "file" && renamingTarget.value.id === fileId;
}
function prepareRenameInput() {
resetDragState();
clearSelection();
markSuppressedClick();
renameInputRef.value = null;
}
function startRenameFolder(folder: SavedSqlFolder) {
prepareRenameInput();
setActiveItem(folder.id, "folder");
renamingTarget.value = { type: "folder", id: folder.id };
renameValue.value = folder.name;
nextTick(() => {
@@ -572,6 +589,8 @@ function startRenameFolder(folder: SavedSqlFolder) {
}
function startRenameFile(file: SavedSqlFile) {
prepareRenameInput();
setActiveItem(file.id, "file");
renamingTarget.value = { type: "file", id: file.id };
renameValue.value = file.name.replace(/\.sql$/i, "");
nextTick(() => {
@@ -1189,7 +1208,20 @@ function showDropInside(targetId: string) {
"
>
<FolderClosed class="h-4 w-4 text-amber-500 shrink-0" />
<span class="dbx-sql-library-drag-label min-w-0 flex-1 truncate">
<template v-if="isRenamingFolder(item.item.id)">
<input
:ref="setRenameInputRef"
v-model="renameValue"
data-no-drag="true"
class="min-w-0 flex-1 rounded border border-primary/50 bg-transparent px-1 text-[13px] outline-none"
@keydown.enter.prevent="confirmRename"
@keydown.escape.prevent="cancelRename"
@blur="confirmRename"
@mousedown.stop
@click.stop
/>
</template>
<span v-else class="dbx-sql-library-drag-label min-w-0 flex-1 truncate">
{{ item.item.name }}
<span class="ml-1 text-muted-foreground">({{ folderFileCount(item.item.id) }})</span>
</span>
@@ -1209,7 +1241,20 @@ function showDropInside(targetId: string) {
>
<FileText class="h-3.5 w-3.5 text-blue-400 shrink-0" />
<span v-if="isFileDirty(item.item)" aria-hidden="true" class="dirty-sql-library-marker">*</span>
<span class="dbx-sql-library-drag-label min-w-0 flex-1 truncate" :title="fileTitleLabel(item.item)" :style="fileTitleStyle(item.item)">{{ item.item.name }}</span>
<template v-if="isRenamingFile(item.item.id)">
<input
:ref="setRenameInputRef"
v-model="renameValue"
data-no-drag="true"
class="min-w-0 flex-1 rounded border border-primary/50 bg-transparent px-1 text-[13px] outline-none"
@keydown.enter.prevent="confirmRename"
@keydown.escape.prevent="cancelRename"
@blur="confirmRename"
@mousedown.stop
@click.stop
/>
</template>
<span v-else class="dbx-sql-library-drag-label min-w-0 flex-1 truncate" :title="fileTitleLabel(item.item)" :style="fileTitleStyle(item.item)">{{ item.item.name }}</span>
<span class="min-w-0 max-w-[45%] shrink truncate text-[13px]" :class="fileMetaClass(item.item.id)" :title="getConnectionLabel(item.item.connectionId)">[{{ getConnectionLabel(item.item.connectionId) }}]</span>
</div>
</div>
@@ -1236,7 +1281,7 @@ function showDropInside(targetId: string) {
<div v-if="showDropBefore(row.folder.id)" class="absolute left-2 right-2 top-0 border-t-2 border-primary" />
<div v-if="showDropAfter(row.folder.id)" class="absolute left-2 right-2 bottom-0 border-b-2 border-primary" />
<component :is="isFolderExpanded(row.folder.id) ? FolderOpen : FolderClosed" class="h-4 w-4 text-amber-500 shrink-0" />
<template v-if="renamingTarget?.type === 'folder' && renamingTarget.id === row.folder.id">
<template v-if="isRenamingFolder(row.folder.id)">
<input
:ref="setRenameInputRef"
v-model="renameValue"
@@ -1245,6 +1290,7 @@ function showDropInside(targetId: string) {
@keydown.enter.prevent="confirmRename"
@keydown.escape.prevent="cancelRename"
@blur="confirmRename"
@mousedown.stop
@click.stop
/>
</template>
@@ -1273,7 +1319,7 @@ function showDropInside(targetId: string) {
<div v-if="showDropAfter(row.file.id)" class="absolute left-2 right-2 bottom-0 border-b-2 border-primary" />
<FileText class="h-3.5 w-3.5 text-blue-400 shrink-0" />
<span v-if="isFileDirty(row.file)" aria-hidden="true" class="dirty-sql-library-marker">*</span>
<template v-if="renamingTarget?.type === 'file' && renamingTarget.id === row.file.id">
<template v-if="isRenamingFile(row.file.id)">
<input
:ref="setRenameInputRef"
v-model="renameValue"
@@ -1282,6 +1328,7 @@ function showDropInside(targetId: string) {
@keydown.enter.prevent="confirmRename"
@keydown.escape.prevent="cancelRename"
@blur="confirmRename"
@mousedown.stop
@click.stop
/>
</template>
@@ -1319,7 +1366,7 @@ function showDropInside(targetId: string) {
<div v-if="showDropAfter(file.id)" class="absolute left-2 right-2 bottom-0 border-b-2 border-primary" />
<FileText class="h-3.5 w-3.5 text-blue-400 shrink-0" />
<span v-if="isFileDirty(file)" aria-hidden="true" class="dirty-sql-library-marker">*</span>
<template v-if="renamingTarget?.type === 'file' && renamingTarget.id === file.id">
<template v-if="isRenamingFile(file.id)">
<input
:ref="setRenameInputRef"
v-model="renameValue"
@@ -1328,6 +1375,7 @@ function showDropInside(targetId: string) {
@keydown.enter.prevent="confirmRename"
@keydown.escape.prevent="cancelRename"
@blur="confirmRename"
@mousedown.stop
@click.stop
/>
</template>