Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[TAS-3080] 🚸 Enhance search behavior #2018

Merged
merged 4 commits into from
Jan 23, 2025
+80 −30
Merged

[TAS-3080] 🚸 Enhance search behavior #2018

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b5c1670
🚸 Enhance search behavior
AuroraHuang22 Jan 16, 2025
04c1378
🎨 Improve code formatting
AuroraHuang22 Jan 16, 2025
3b9ab80
♻️ Simplify handleInput
AuroraHuang22 Jan 22, 2025
e32ad68
♻️ Refactor SearchBar styles
AuroraHuang22 Jan 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 80 additions & 30 deletions src/components/SearchBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,40 +38,50 @@
'items-center',
'bg-shade-gray',
'gap-[12px]',
isSearchOpen && 'pl-[16px] pr-[4px]',
'h-full',
{ 'pl-[16px] pr-[4px]': isSearchOpen },
'rounded-[0px] desktop:rounded-[10px]',
'transition-[width]',
'duration-[5000]',
'duration-[300]',
'ease-in-out',
]"
>
<IconSearch />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we make this icon clickable so that it also serve as the open/submit button if people can't press enter?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we have submit button when open
截圖 2025-01-22 下午6 47 29

<input
ref="searchInput"
v-model="currentSearchQuery"
class="w-full bg-transparent border-0 focus-visible:outline-none"
type="text"
:value="searchQuery"
:placeholder="placeholderText"
@input="debouncedUpdateSearchKeyword"
@keyup.enter="handleEnter"
@input="handleInput"
@keyup.enter="handleSubmit"
/>
<ButtonV2
v-if="isSearchOpen"
size="tiny"
preset="plain"
class="!rounded-[10px]"
@click="toggleSearch"
v-if="searchButtonProps"
:size="searchButtonProps.size"
:preset="searchButtonProps.preset"
:class="searchButtonProps.class"
:content-class="searchButtonProps.contentClass"
:text="searchButtonProps.text"
@click="searchButtonProps.onClick"
>
<IconClose class="cursor-auto" />
<template v-if="searchButtonProps.icon">
<component :is="searchButtonProps.icon" class="cursor-auto" />
</template>
</ButtonV2>
</div>
</div>
</template>

<script>
import debounce from 'lodash.debounce';
import { SEARCH_SUGGESTIONS } from '@/constant/index';
import IconClose from '@/components/Icon/Close';

const SEARCH_ACTIONS = {
IDLE: 'idle',
TYPING: 'typing',
SUBMITTED: 'submitted',
};

export default {
name: 'SearchBar',
Expand All @@ -86,32 +96,62 @@ export default {
isSearchOpen: false,
placeholderText: this.$t('gutenberg_search_placeholder'),
randomKeywords: [],
currentSearchQuery: this.searchQuery,
searchActionState: SEARCH_ACTIONS.IDLE,
};
},
computed: {
searchButtonProps() {
if (!this.isSearchOpen) return null;
switch (this.searchActionState) {
case SEARCH_ACTIONS.TYPING:
return {
size: 'small',
preset: 'tertiary',
class: '!rounded-[10px] ml-auto',
contentClass: 'whitespace-nowrap',
text: this.$t('listing_page_search'),
onClick: this.handleSubmit,
};
case SEARCH_ACTIONS.SUBMITTED:
case SEARCH_ACTIONS.IDLE:
return {
size: 'tiny',
preset: 'plain',
class: '!rounded-[10px]',
contentClass: '',
icon: IconClose,
onClick: this.closeSearch,
};
default:
return null;
}
},
},
mounted() {
if (this.searchQuery) {
this.isSearchOpen = true;
this.placeholderText = this.getRandomPlaceholder();
this.searchActionState = SEARCH_ACTIONS.SUBMITTED;
}
},

methods: {
toggleSearch() {
this.isSearchOpen = !this.isSearchOpen;
if (this.isSearchOpen) {
this.$emit('clear');
} else {
this.$emit('open');
this.placeholderText = this.getRandomPlaceholder();
this.$nextTick(() => {
this.$refs.searchInput?.focus();
});
this.$nextTick(() => this.$refs.searchInput?.focus());
}
this.isSearchOpen = !this.isSearchOpen;
this.searchActionState = SEARCH_ACTIONS.IDLE;
this.$emit('open');
},
closeSearch() {
this.isSearchOpen = false;
this.currentSearchQuery = '';
this.searchActionState = SEARCH_ACTIONS.IDLE;
this.$emit('clear');
},
debouncedUpdateSearchKeyword: debounce(
function debouncedUpdateSearchKeyword(event) {
this.$emit('input', event.target.value);
},
200
),
getRandomPlaceholder() {
if (this.$i18n.locale === 'zh-Hant') {
const shuffled = [...SEARCH_SUGGESTIONS].sort(
Expand All @@ -123,13 +163,23 @@ export default {
}
return this.$t('gutenberg_search_placeholder');
},
handleEnter() {
if (!this.searchQuery || this.searchQuery.trim() === '') {
const fallbackKeyword =
this.randomKeywords?.[0] || this.$t('gutenberg_search_placeholder');
this.$emit('input', fallbackKeyword);
handleInput() {
if (!this.currentSearchQuery) {
this.searchActionState = SEARCH_ACTIONS.IDLE;
} else {
this.searchActionState = SEARCH_ACTIONS.TYPING;
}
},
handleSubmit() {
const trimmedQuery = this.currentSearchQuery?.trim();
const query =
trimmedQuery ||
this.randomKeywords?.[0] ||
this.$t('gutenberg_search_placeholder');
this.currentSearchQuery = query;
this.$emit('input', query);
this.searchActionState = SEARCH_ACTIONS.SUBMITTED;
},
},
};
</script>
Loading