feat: add CartButton component for consistent cart access across views
- Introduced a new CartButton component to encapsulate cart summary functionality, improving code reusability and maintainability. - Updated MarketPage.vue and StallView.vue to utilize the CartButton component, enhancing user navigation to the cart. - Removed redundant cart summary code from both views, streamlining the component structure. These changes provide a unified and consistent user experience for accessing the cart across different market views.
This commit is contained in:
parent
688bf5e105
commit
da5c4d6de1
5 changed files with 515 additions and 24 deletions
53
src/modules/market/composables/useSearchKeyboardShortcuts.ts
Normal file
53
src/modules/market/composables/useSearchKeyboardShortcuts.ts
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
import { onMounted, onUnmounted, type Ref } from 'vue'
|
||||
|
||||
export function useSearchKeyboardShortcuts(searchInputRef: Ref<any>) {
|
||||
const focusSearchInput = () => {
|
||||
if (searchInputRef.value?.$el) {
|
||||
// Access the underlying HTML input element from the Shadcn Input component
|
||||
const inputElement = searchInputRef.value.$el.querySelector('input') || searchInputRef.value.$el
|
||||
if (inputElement && typeof inputElement.focus === 'function') {
|
||||
inputElement.focus()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const blurSearchInput = () => {
|
||||
if (searchInputRef.value?.$el) {
|
||||
const inputElement = searchInputRef.value.$el.querySelector('input') || searchInputRef.value.$el
|
||||
if (inputElement && typeof inputElement.blur === 'function') {
|
||||
inputElement.blur()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleGlobalKeydown = (event: KeyboardEvent) => {
|
||||
// ⌘K or Ctrl+K to focus search
|
||||
if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
|
||||
event.preventDefault()
|
||||
focusSearchInput()
|
||||
}
|
||||
}
|
||||
|
||||
const handleSearchKeydown = (event: KeyboardEvent) => {
|
||||
// Escape key clears search or blurs input
|
||||
if (event.key === 'Escape') {
|
||||
event.preventDefault()
|
||||
return true // Signal to clear search
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('keydown', handleGlobalKeydown)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('keydown', handleGlobalKeydown)
|
||||
})
|
||||
|
||||
return {
|
||||
focusSearchInput,
|
||||
blurSearchInput,
|
||||
handleSearchKeydown
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue