Enhance MarketFuzzySearch component with responsive keyboard hints
- Updated the keyboard shortcuts hint to display only on desktop devices, improving usability for users on larger screens. - Introduced responsive breakpoints to manage the visibility of the enhanced placeholder, ensuring a better user experience across different device sizes. These changes refine the search component by tailoring the interface to the user's device, enhancing accessibility and interaction.
This commit is contained in:
parent
f3504b7df5
commit
a82360b283
1 changed files with 8 additions and 4 deletions
|
|
@ -20,7 +20,7 @@
|
|||
|
||||
<!-- Keyboard Shortcuts Hint -->
|
||||
<div class="absolute inset-y-0 right-0 pr-3 flex items-center gap-2">
|
||||
<div v-if="showKeyboardHints && !searchQuery" class="text-xs text-muted-foreground hidden sm:flex items-center gap-1">
|
||||
<div v-if="showKeyboardHints && !searchQuery && isDesktop" class="text-xs text-muted-foreground flex items-center gap-1">
|
||||
<Badge variant="outline" class="px-1 py-0 text-xs">⌘ K</Badge>
|
||||
</div>
|
||||
|
||||
|
|
@ -118,7 +118,7 @@ import { Input } from '@/components/ui/input'
|
|||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Search, X, History } from 'lucide-vue-next'
|
||||
import { useLocalStorage } from '@vueuse/core'
|
||||
import { useLocalStorage, useBreakpoints, breakpointsTailwind } from '@vueuse/core'
|
||||
import type { Product } from '../types/market'
|
||||
|
||||
interface Props {
|
||||
|
|
@ -199,9 +199,13 @@ const isFocused = ref(false)
|
|||
// Persistent recent searches (stored in localStorage)
|
||||
const recentSearches = useLocalStorage<string[]>('market-recent-searches', [])
|
||||
|
||||
// Enhanced placeholder with keyboard shortcut
|
||||
// Responsive breakpoints
|
||||
const breakpoints = useBreakpoints(breakpointsTailwind)
|
||||
const isDesktop = breakpoints.greaterOrEqual('lg')
|
||||
|
||||
// Enhanced placeholder with keyboard shortcut (only on desktop)
|
||||
const enhancedPlaceholder = computed(() => {
|
||||
if (props.showKeyboardHints) {
|
||||
if (props.showKeyboardHints && isDesktop.value) {
|
||||
return `${props.placeholder} (⌘K to focus)`
|
||||
}
|
||||
return props.placeholder
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue