Add Airbnb-style "search as I move" checkbox + hover highlight
All checks were successful
Build Docker Image / build (push) Successful in 3m33s

- Move filter checkbox to right side, same line as view toggle
- Add hover events on selection cards to highlight map points
- Update translations: "Искать при перемещении" / "Search as I move the map"
This commit is contained in:
Ruslan Bakiev
2026-01-24 11:07:31 +07:00
parent d03564a2d9
commit 2fc4dfb834
5 changed files with 77 additions and 40 deletions

View File

@@ -14,17 +14,6 @@
:placeholder="searchPlaceholder"
class="input input-sm w-full bg-white/50 border-base-300/50 text-base-content placeholder:text-base-content/50"
/>
<!-- Filter by map bounds checkbox -->
<label class="flex items-center gap-2 mt-2 text-sm cursor-pointer text-base-content/80 hover:text-base-content">
<input
type="checkbox"
:checked="filterByBounds"
class="checkbox checkbox-sm checkbox-primary"
@change="emit('update:filter-by-bounds', ($event.target as HTMLInputElement).checked)"
/>
<Icon name="lucide:map" size="14" />
<span>{{ $t('catalog.search.filterByMap') }}</span>
</label>
</div>
<!-- List -->
@@ -41,39 +30,54 @@
<div v-else class="flex flex-col gap-2">
<!-- Products -->
<template v-if="selectMode === 'product'">
<ProductCard
<div
v-for="item in filteredItems"
:key="item.uuid"
:product="item"
selectable
compact
:is-selected="selectedId === item.uuid"
@select="onSelect(item)"
/>
@mouseenter="emit('hover', item.uuid)"
@mouseleave="emit('hover', null)"
>
<ProductCard
:product="item"
selectable
compact
:is-selected="selectedId === item.uuid"
@select="onSelect(item)"
/>
</div>
</template>
<!-- Hubs -->
<template v-else-if="selectMode === 'hub'">
<HubCard
<div
v-for="item in filteredItems"
:key="item.uuid"
:hub="item"
selectable
:is-selected="selectedId === item.uuid"
@select="onSelect(item)"
/>
@mouseenter="emit('hover', item.uuid)"
@mouseleave="emit('hover', null)"
>
<HubCard
:hub="item"
selectable
:is-selected="selectedId === item.uuid"
@select="onSelect(item)"
/>
</div>
</template>
<!-- Suppliers -->
<template v-else-if="selectMode === 'supplier'">
<SupplierCard
<div
v-for="item in filteredItems"
:key="item.uuid"
:supplier="item"
selectable
:is-selected="selectedId === item.uuid"
@select="onSelect(item)"
/>
@mouseenter="emit('hover', item.uuid)"
@mouseleave="emit('hover', null)"
>
<SupplierCard
:supplier="item"
selectable
:is-selected="selectedId === item.uuid"
@select="onSelect(item)"
/>
</div>
</template>
<!-- Infinite scroll sentinel -->
@@ -107,14 +111,13 @@ const props = defineProps<{
loading?: boolean
loadingMore?: boolean
hasMore?: boolean
filterByBounds?: boolean
}>()
const emit = defineEmits<{
'select': [type: string, item: Item]
'close': []
'load-more': []
'update:filter-by-bounds': [value: boolean]
'hover': [uuid: string | null]
}>()
const { t } = useI18n()