Add Airbnb-style "search as I move" checkbox + hover highlight
All checks were successful
Build Docker Image / build (push) Successful in 3m33s
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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user