Transform search bar in Quote mode to Airbnb-style segmented input
All checks were successful
Build Docker Image / build (push) Successful in 3m21s
All checks were successful
Build Docker Image / build (push) Successful in 3m21s
- Remove mode toggle [Explore/Quote] tabs from header - In Quote mode: show segmented input (Product | Hub | Quantity) + Search button - In Explore mode: keep regular pill input with chips - Add productLabel, hubLabel, supplierLabel computed values to useCatalogSearch - Pass Quote mode props to MainNavigation
This commit is contained in:
Ruslan Bakiev
@@ -9,84 +9,105 @@
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Center: Search input + chips -->
|
||||
<!-- Center: Search input (transforms based on mode) -->
|
||||
<div class="flex-1 flex flex-col items-center max-w-2xl mx-auto gap-2">
|
||||
<!-- Big pill input -->
|
||||
<div
|
||||
class="flex items-center gap-3 w-full px-5 py-3 rounded-full border border-base-300 bg-base-100 focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 transition-all cursor-text"
|
||||
@click="focusInput"
|
||||
>
|
||||
<Icon name="lucide:search" size="22" class="text-primary flex-shrink-0" />
|
||||
|
||||
<!-- Tokens + input inline -->
|
||||
<div class="flex items-center gap-2 flex-wrap flex-1 min-w-0">
|
||||
<!-- Active filter tokens -->
|
||||
<div
|
||||
v-for="token in activeTokens"
|
||||
:key="token.type"
|
||||
class="badge badge-lg gap-1.5 cursor-pointer hover:opacity-80 transition-all flex-shrink-0 text-white"
|
||||
:style="{ backgroundColor: getTokenColor(token.type) }"
|
||||
@click.stop="$emit('edit-token', token.type)"
|
||||
>
|
||||
<Icon :name="token.icon" size="14" />
|
||||
<span class="max-w-28 truncate">{{ token.label }}</span>
|
||||
<!-- Quote mode: Segmented input like Airbnb -->
|
||||
<template v-if="catalogMode === 'quote'">
|
||||
<div class="flex items-center gap-3 w-full">
|
||||
<div class="flex items-center flex-1 rounded-full border border-base-300 bg-base-100 shadow-sm divide-x divide-base-300">
|
||||
<!-- Product segment -->
|
||||
<button
|
||||
class="hover:text-error"
|
||||
@click.stop="$emit('remove-token', token.type)"
|
||||
class="flex-1 px-4 py-2.5 text-left hover:bg-base-200/50 rounded-l-full transition-colors min-w-0"
|
||||
@click="$emit('edit-token', 'product')"
|
||||
>
|
||||
<Icon name="lucide:x" size="14" />
|
||||
<div class="text-xs text-base-content/60">{{ $t('catalog.quote.product') }}</div>
|
||||
<div class="font-medium truncate">{{ productLabel || $t('catalog.quote.selectProduct') }}</div>
|
||||
</button>
|
||||
<!-- Hub segment -->
|
||||
<button
|
||||
class="flex-1 px-4 py-2.5 text-left hover:bg-base-200/50 transition-colors min-w-0"
|
||||
@click="$emit('edit-token', 'hub')"
|
||||
>
|
||||
<div class="text-xs text-base-content/60">{{ $t('catalog.quote.hub') }}</div>
|
||||
<div class="font-medium truncate">{{ hubLabel || $t('catalog.quote.selectHub') }}</div>
|
||||
</button>
|
||||
<!-- Quantity segment -->
|
||||
<button
|
||||
class="flex-1 px-4 py-2.5 text-left hover:bg-base-200/50 rounded-r-full transition-colors min-w-0"
|
||||
@click="$emit('edit-token', 'quantity')"
|
||||
>
|
||||
<div class="text-xs text-base-content/60">{{ $t('catalog.quote.quantity') }}</div>
|
||||
<div class="font-medium">{{ quantity ? `${quantity} ${$t('units.t')}` : '—' }}</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Search input -->
|
||||
<input
|
||||
ref="inputRef"
|
||||
v-model="localSearchQuery"
|
||||
type="text"
|
||||
:placeholder="placeholder"
|
||||
class="flex-1 min-w-32 bg-transparent outline-none text-lg"
|
||||
@input="$emit('update:search-query', localSearchQuery)"
|
||||
/>
|
||||
<!-- Search button -->
|
||||
<button
|
||||
class="btn btn-primary btn-circle shadow-lg"
|
||||
:disabled="!canSearch"
|
||||
@click="$emit('search')"
|
||||
>
|
||||
<Icon name="lucide:search" size="20" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Chips below -->
|
||||
<div
|
||||
v-if="availableChips.length > 0"
|
||||
class="flex items-center justify-center gap-2"
|
||||
>
|
||||
<button
|
||||
v-for="chip in availableChips"
|
||||
:key="chip.type"
|
||||
class="btn btn-xs btn-ghost gap-1"
|
||||
@click="$emit('start-select', chip.type)"
|
||||
<!-- Explore mode: Regular pill input + chips -->
|
||||
<template v-else>
|
||||
<!-- Big pill input -->
|
||||
<div
|
||||
class="flex items-center gap-3 w-full px-5 py-3 rounded-full border border-base-300 bg-base-100 focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 transition-all cursor-text"
|
||||
@click="focusInput"
|
||||
>
|
||||
<Icon name="lucide:plus" size="12" />
|
||||
{{ chip.label }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<Icon name="lucide:search" size="22" class="text-primary flex-shrink-0" />
|
||||
|
||||
<!-- Catalog mode toggle (only on catalog pages) -->
|
||||
<div v-if="showCatalogModeToggle" class="flex-shrink-0 py-2.5">
|
||||
<div class="tabs tabs-boxed tabs-sm bg-base-200">
|
||||
<button
|
||||
class="tab"
|
||||
:class="{ 'tab-active': catalogMode === 'explore' }"
|
||||
@click="$emit('set-catalog-mode', 'explore')"
|
||||
<!-- Tokens + input inline -->
|
||||
<div class="flex items-center gap-2 flex-wrap flex-1 min-w-0">
|
||||
<!-- Active filter tokens -->
|
||||
<div
|
||||
v-for="token in activeTokens"
|
||||
:key="token.type"
|
||||
class="badge badge-lg gap-1.5 cursor-pointer hover:opacity-80 transition-all flex-shrink-0 text-white"
|
||||
:style="{ backgroundColor: getTokenColor(token.type) }"
|
||||
@click.stop="$emit('edit-token', token.type)"
|
||||
>
|
||||
<Icon :name="token.icon" size="14" />
|
||||
<span class="max-w-28 truncate">{{ token.label }}</span>
|
||||
<button
|
||||
class="hover:text-error"
|
||||
@click.stop="$emit('remove-token', token.type)"
|
||||
>
|
||||
<Icon name="lucide:x" size="14" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Search input -->
|
||||
<input
|
||||
ref="inputRef"
|
||||
v-model="localSearchQuery"
|
||||
type="text"
|
||||
:placeholder="placeholder"
|
||||
class="flex-1 min-w-32 bg-transparent outline-none text-lg"
|
||||
@input="$emit('update:search-query', localSearchQuery)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chips below -->
|
||||
<div
|
||||
v-if="availableChips.length > 0"
|
||||
class="flex items-center justify-center gap-2"
|
||||
>
|
||||
<Icon name="lucide:compass" size="14" class="mr-1" />
|
||||
{{ $t('catalog.modes.explore') }}
|
||||
</button>
|
||||
<button
|
||||
class="tab"
|
||||
:class="{ 'tab-active': catalogMode === 'quote' }"
|
||||
@click="$emit('set-catalog-mode', 'quote')"
|
||||
>
|
||||
<Icon name="lucide:search" size="14" class="mr-1" />
|
||||
{{ $t('catalog.modes.quote') }}
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
v-for="chip in availableChips"
|
||||
:key="chip.type"
|
||||
class="btn btn-xs btn-ghost gap-1"
|
||||
@click="$emit('start-select', chip.type)"
|
||||
>
|
||||
<Icon name="lucide:plus" size="12" />
|
||||
{{ chip.label }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Right: AI + Globe + Team + User -->
|
||||
@@ -232,8 +253,12 @@ const props = defineProps<{
|
||||
selectMode?: SelectMode
|
||||
searchQuery?: string
|
||||
// Catalog mode props
|
||||
showCatalogModeToggle?: boolean
|
||||
catalogMode?: CatalogMode
|
||||
// Quote mode props
|
||||
productLabel?: string
|
||||
hubLabel?: string
|
||||
quantity?: string
|
||||
canSearch?: boolean
|
||||
}>()
|
||||
|
||||
defineEmits([
|
||||
@@ -247,8 +272,8 @@ defineEmits([
|
||||
'edit-token',
|
||||
'remove-token',
|
||||
'update:search-query',
|
||||
// Catalog mode
|
||||
'set-catalog-mode'
|
||||
// Quote mode
|
||||
'search'
|
||||
])
|
||||
|
||||
const localePath = useLocalePath()
|
||||
|
||||
Reference in New Issue
Block a user