This repository has been archived by the owner on Feb 22, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 63
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Prevent clearing of the search bar value when homepage is hydrated (#…
…1934) * Add uncontrolled VStandaloneSearchBarOld component * Add snapshots
- Loading branch information
Showing
57 changed files
with
154 additions
and
104 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
84 changes: 84 additions & 0 deletions
84
src/components/VHeaderOld/VSearchBar/VStandaloneSearchBarOld.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| <template> | ||
| <form | ||
| class="search-bar group flex h-[57px] flex-row items-center rounded-sm border-tx bg-white md:h-[69px]" | ||
| @submit.prevent="handleSearch" | ||
| > | ||
| <div | ||
| class="input-field search-field group flex h-full flex-grow items-center overflow-hidden rounded-sm border p-0.5px pe-1.5px rounded-e-none border-e-0 focus-within:border-1.5 focus-within:border-pink focus-within:bg-dark-charcoal-06 focus-within:p-0 group-hover:bg-dark-charcoal-06" | ||
| :class="[isHomeRoute ? 'border-tx' : 'border-dark-charcoal-20']" | ||
| > | ||
| <input | ||
| id="search-bar" | ||
| ref="inputRef" | ||
| type="search" | ||
| name="q" | ||
| :placeholder=" | ||
| $t( | ||
| isHomeRoute ? 'hero.search.placeholder' : '404.search-placeholder' | ||
| ).toString() | ||
| " | ||
| class="h-full w-full appearance-none rounded-none bg-tx text-base leading-none text-dark-charcoal placeholder-dark-charcoal-70 ms-4 focus:outline-none md:text-2xl" | ||
| :aria-label=" | ||
| isHomeRoute | ||
| ? $t('search.search-bar-label', { | ||
| openverse: 'Openverse', | ||
| }).toString() | ||
| : $t('404.search-placeholder').toString() | ||
| " | ||
| /> | ||
| <!-- @slot Extra information goes here --> | ||
| <slot /> | ||
| </div> | ||
| <VSearchButtonOld type="submit" size="standalone" :route="route" /> | ||
| </form> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { | ||
| computed, | ||
| defineComponent, | ||
| PropType, | ||
| ref, | ||
| } from '@nuxtjs/composition-api' | ||
| import { defineEvent } from '~/types/emits' | ||
| import VSearchButtonOld from '~/components/VHeaderOld/VSearchBar/VSearchButtonOld.vue' | ||
| /** | ||
| * Displays a search input for a search query and is attached to an action button | ||
| * that fires a search request. Can contain other elements like the search type | ||
| * popover. Is uncontrolled: Vue code does not try to set a default value when | ||
| * hydrating the server-rendered code, so the value entered before full hydration | ||
| * is not removed. | ||
| */ | ||
| export default defineComponent({ | ||
| name: 'VStandaloneSearchBarOld', | ||
| components: { VSearchButtonOld }, | ||
| props: { | ||
| route: { | ||
| type: String as PropType<'home' | '404'>, | ||
| default: 'home', | ||
| }, | ||
| }, | ||
| emits: { | ||
| submit: defineEvent(), | ||
| }, | ||
| setup(props, { emit }) { | ||
| const inputRef = ref<HTMLInputElement | null>(null) | ||
| const handleSearch = () => { | ||
| const searchTerm = inputRef.value?.value.trim() | ||
| emit('submit', searchTerm) | ||
| } | ||
| const isHomeRoute = computed(() => props.route === 'home') | ||
| return { | ||
| inputRef, | ||
| handleSearch, | ||
| isHomeRoute, | ||
| } | ||
| }, | ||
| }) | ||
| </script> |
Oops, something went wrong.