alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-03-21 21:22:11 -03:00
Code Issues Packages Projects Releases Wiki Activity

feat: auto-focus search bar in LoRA pool modals

Browse Source
This commit is contained in:
Will Miao
2026-01-14 21:14:43 +08:00
parent 30077099ec
commit 2a9ceb9e85
4 changed files with 79 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
vue-widgets/src/components/lora-pool/modals/BaseModelModal.vue
View File

@@ -11,6 +11,7 @@
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
<input
ref="searchInputRef"
v-model="searchQuery"
type="text"
class="search-input"
@@ -48,7 +49,7 @@
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { ref, computed, watch, nextTick } from 'vue'
import ModalWrapper from './ModalWrapper.vue'
import type { BaseModelOption } from '../../../composables/types'
@@ -64,6 +65,7 @@ const emit = defineEmits<{
}>()
const searchQuery = ref('')
const searchInputRef = ref<HTMLInputElement | null>(null)
const filteredModels = computed(() => {
if (!searchQuery.value) {
@@ -87,6 +89,14 @@ const toggleModel = (name: string) => {
const onSearch = () => {
// Debounce handled by v-model reactivity
}
watch(() => props.visible, (isVisible) => {
if (isVisible) {
nextTick(() => {
searchInputRef.value?.focus()
})
}
})
</script>
<style scoped>

12
vue-widgets/src/components/lora-pool/modals/TagsModal.vue
View File

@@ -12,6 +12,7 @@
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
<input
ref="searchInputRef"
v-model="searchQuery"
type="text"
class="search-input"
@@ -39,7 +40,7 @@
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { ref, computed, watch, nextTick } from 'vue'
import ModalWrapper from './ModalWrapper.vue'
import type { TagOption } from '../../../composables/types'
@@ -66,6 +67,7 @@ const subtitle = computed(() =>
)
const searchQuery = ref('')
const searchInputRef = ref<HTMLInputElement | null>(null)
const filteredTags = computed(() => {
if (!searchQuery.value) {
@@ -85,6 +87,14 @@ const toggleTag = (tag: string) => {
: [...props.selected, tag]
emit('update:selected', newSelected)
}
watch(() => props.visible, (isVisible) => {
if (isVisible) {
nextTick(() => {
searchInputRef.value?.focus()
})
}
})
</script>
<style scoped>