Appearance
SearchTabs Component ​
File Information ​
- Path:
app/components/search/SearchTabs.vue - Purpose: Assets / Collages / Folders tab strip for search results, with an optional All tab.
- Type: Search Component
Overview ​
A thin v-model wrapper around Vuetify v-tabs (inset). Each tab maps to one Typesense collection through SEARCH_TAB_COLLECTION in useSearchUtils; the component itself only emits the selected key.
| Key | Label | Shown |
|---|---|---|
all | All | only when includeAll is true (first position) |
assets | Assets | always |
collages | Collages | always |
folders | Folders | always |
Props ​
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | SearchTab | 'all' | - | Active tab key |
includeAll | boolean | false | Prepends the All tab |
SearchTabValue (SearchTab | 'all') is exported from the component for callers.
Events ​
| Event | Payload | When |
|---|---|---|
update:modelValue | SearchTabValue | user selects a tab |
Usage Example ​
vue
<!-- SearchBar.vue: dropdown preview, includes All -->
<SearchTabs v-model="activeTab" include-all />
<!-- pages/[brand_name]/search.vue: results page, no All tab -->
<SearchTabs :model-value="activeTab" @update:model-value="setTab($event as SearchTab)" />