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 -->
|
<!-- Keyboard Shortcuts Hint -->
|
||||||
<div class="absolute inset-y-0 right-0 pr-3 flex items-center gap-2">
|
<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>
|
<Badge variant="outline" class="px-1 py-0 text-xs">⌘ K</Badge>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -118,7 +118,7 @@ import { Input } from '@/components/ui/input'
|
||||||
import { Button } from '@/components/ui/button'
|
import { Button } from '@/components/ui/button'
|
||||||
import { Badge } from '@/components/ui/badge'
|
import { Badge } from '@/components/ui/badge'
|
||||||
import { Search, X, History } from 'lucide-vue-next'
|
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'
|
import type { Product } from '../types/market'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
|
|
@ -199,9 +199,13 @@ const isFocused = ref(false)
|
||||||
// Persistent recent searches (stored in localStorage)
|
// Persistent recent searches (stored in localStorage)
|
||||||
const recentSearches = useLocalStorage<string[]>('market-recent-searches', [])
|
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(() => {
|
const enhancedPlaceholder = computed(() => {
|
||||||
if (props.showKeyboardHints) {
|
if (props.showKeyboardHints && isDesktop.value) {
|
||||||
return `${props.placeholder} (⌘K to focus)`
|
return `${props.placeholder} (⌘K to focus)`
|
||||||
}
|
}
|
||||||
return props.placeholder
|
return props.placeholder
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue