migration: search form

This commit is contained in:
Phan An 2022-04-24 23:23:20 +03:00
parent 5e96e5a0b9
commit 8568b7a39c
No known key found for this signature in database
GPG key ID: A81E4477F0BB6FDC
3 changed files with 14 additions and 14 deletions

View file

@ -1,9 +1,9 @@
import Component from '@/components/ui/search-form.vue'
import Component from '@/components/ui/SearchForm.vue'
import { mock } from '@/__tests__/__helpers__'
import { shallow } from '@/__tests__/adapter'
import { eventBus } from '@/utils'
describe('components/ui/search-form', () => {
describe('components/ui/SearchForm', () => {
afterEach(() => {
jest.resetModules()
jest.clearAllMocks()

View file

@ -34,7 +34,7 @@ import { eventBus } from '@/utils'
import { app as appConfig } from '@/config'
import { commonStore, userStore } from '@/stores'
const SearchForm = defineAsyncComponent(() => import('@/components/ui/search-form.vue'))
const SearchForm = defineAsyncComponent(() => import('@/components/ui/SearchForm.vue'))
const UserBadge = defineAsyncComponent(() => import('@/components/user/UserBadge.vue'))
const user = toRef(userStore.state, 'current')

View file

@ -1,16 +1,16 @@
<template>
<div class="side search" id="searchForm" :class="{ showing }" role="search">
<input
type="search"
:class="{ dirty: q }"
@input="onInput"
@focus="goToSearchScreen"
autocorrect="false"
placeholder="Press F to search"
ref="input"
spellcheck="false"
name="q"
v-model="q"
:class="{ dirty: q }"
autocorrect="false"
name="q"
placeholder="Press F to search"
spellcheck="false"
type="search"
@focus="goToSearchScreen"
@input="onInput"
>
</div>
</template>
@ -23,7 +23,7 @@ import { debounce } from 'lodash'
import { eventBus } from '@/utils'
import router from '@/router'
const input = ref(null as unknown as HTMLInputElement)
const input = ref<HTMLInputElement>()
const q = ref('')
const showing = ref(!isMobile.phone)
@ -38,8 +38,8 @@ eventBus.on({
'TOGGLE_SEARCH_FORM': () => (showing.value = !showing.value),
FOCUS_SEARCH_FIELD () {
input.value.focus()
input.value.select()
input.value?.focus()
input.value?.select()
}
})
</script>