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

@@ -6,10 +6,13 @@
:cluster-node-type="clusterNodeType"
map-id="unified-catalog-map"
:point-color="mapPointColor"
:items="[]"
:items="currentSelectionItems"
:hovered-id="hoveredItemId"
:show-panel="showPanel"
:filter-by-bounds="filterByBounds"
@select="onMapSelect"
@bounds-change="onBoundsChange"
@update:filter-by-bounds="filterByBounds = $event"
>
<!-- Panel slot - shows selection list OR quote results -->
<template #panel>
@@ -23,11 +26,10 @@
:loading="selectionLoading"
:loading-more="selectionLoadingMore"
:has-more="selectionHasMore && !filterByBounds"
:filter-by-bounds="filterByBounds"
@select="onSelectItem"
@close="cancelSelect"
@load-more="onLoadMore"
@update:filter-by-bounds="filterByBounds = $event"
@hover="onHoverItem"
/>
<!-- Quote results: show offers after search -->
@@ -61,6 +63,20 @@ const catalogPageRef = ref<{ currentBounds: Ref<MapBounds | null> } | null>(null
const filterByBounds = ref(false)
const currentMapBounds = ref<MapBounds | null>(null)
// Hovered item for map highlight
const hoveredItemId = ref<string | null>(null)
const onHoverItem = (uuid: string | null) => {
hoveredItemId.value = uuid
}
// Current selection items for hover highlighting on map
const currentSelectionItems = computed(() => {
if (selectMode.value === 'product') return filteredProducts.value
if (selectMode.value === 'hub') return filteredHubs.value
if (selectMode.value === 'supplier') return filteredSuppliers.value
return []
})
// Handle bounds change from map
const onBoundsChange = (bounds: MapBounds) => {
currentMapBounds.value = bounds